Setting
BlogiNote is flexible enough to meet your needs, it provides different ways to set the project.
App Config
You can set some properties for the whole website at the app.config.ts
file
Announce
all configurations about BlogiNote is under the bloginote
property
the default values of these properties are shown below, you can rewrite some of them at the app.config.ts
of your project.
export default defineAppConfig({
bloginote: {
meta: {
name: 'BlogiNote',
description: 'A Nuxt theme for showing blog posts and snippet notes with flexible layouts and multiple optimizations.',
author: 'Benbinbin',
url: 'https://bloginote.benbinbin.com/'
},
author: 'Benbinbin',
email: 'benthomsonbin@gmail.com',
avatar: '/default-avatar.png',
favicon: '/default-favicon.ico',
homePage: {
showBlogPosts: true,
postItemLimit: 5
},
subscribePage: true,
articlePage: {
showTime: true,
outdated: {
show: true,
threshold: 30
},
showCatalog: true
}
}
})
the sub properties under the bloginote.meta
property set the metadata for your project:
name
property sets the name of website (show at the browser tab)description
property sets the description of the websiteauthor
property sets the author name of the websiteTip
the
author
property under thebloginote
property is the sameurl
property is the domain of your website
email
property sets the email of the author
avatar
property sets the logo at the left side of the header navbar, and favicon
property set the icon of your website in the browser tab
the sub properties under the bloginote.homePage
property set the behavior for home page:
showBlogPosts
property is used to set whether to display blog posts list at home pagepostItemLimit
property limit the number of posts shown in each category.
subscribePage
property is used to set whether to display the subscribe
button on the header navbar
the sub properties under the bloginote.articlePage
property set the behavior for all article pages:
showTime
property is used to set whether to display the timestamp of an article (the created time and the last updated time)outdated.show
property andoutdated.threshold
property are used to set whether to display outdated warning of the article, and the outdated days threshold.
the default value is30
that means the outdated warning will show and the article outdated days threshold is 30 days (after it created or the latest updated time).showCatalog
property is used to set whether to display the catalog of the article by default (when the page open first)
Front Matter
You can add some metadata for the special article by add some YAML within ---
three dashes at the top of the markdown file, these contents call Front Matter.
Announce
We won't see this metadata after the markdown file convert to the website page. So you shouldn't worry about the "dirty" header will make the article in a mess.
It is written in a special format called YAML or YML, this format is make up of a list of key: value
pairs.
There are some properties you can use to configure the page interface and interactive behavior:
title
property is used to set the title of articlecover
property is used to set the cover of the articlenextArticleName
和nextArticleUrl
property is used to set the title and the file path of the next relative article (use the relative path, and ignore the file extension.md
)prevArticleName
andprevArticleUrl
property is used to set the title and the file path of the previous relative article (use the relative path, and ignore the file extension.md
)series
property is used to set the specific series that the article belongs totags
property is used to set the tags for the article, the value is an array, allowing you to add multiple tags to an article.showCatalog
property is used to set whether the table of contents of the article is displayed by default (when the article page is first opened), the value can be set astrue
orfalse
created
property is used to set the creation time of the article, the value should be a date in the formatYYYY-MM-DD
, for example2023-02-01
updated
property is used to set the updated time of the article, the value should be a date in the formatYYYY-MM-DD
, for example2023-02-01
showTime
property is used to set whether to display the timestamp of an article (the created time and the last updated time), the value can be set astrue
orfalse
showOutdatedWarning
property is used to set whether to display a warning about the timeliness of the article when it is being viewed, the value can be set as true or false.
Tip
Refer to this article for specific information and configuration examples of each Front Matter property mentioned above