vuepress-theme-paocaijun v1.3.0
vuepress-theme-paocaijun
- It's a vuepress theme aimed at adding the categories, TAB walls, pagination, comments and other features required for blogging, suitable for
vuepress 0.x
;- The theme itself is minimalist and is modified based on the default theme of the vuepress;
Preview
Installation and use
Install
npm install vuepress-theme-paocaijun -dev--save # or yarn add vuepress-theme-paocaijun
Use
// 修改 /docs/.vuepress/config.js module.exports = { theme: 'paocaijun' }
Add categories
If want to add a front-end
and back-end
classification, need to undertake the following steps:
Add a category drop button to the top navigation
// change /docs/.vuepress/config.js module.exports = { theme: 'paocaijun', themeConfig: { nav: [ { text: 'categories', items: [ { text: 'frontEnd', link: '/categories/frontEnd' }, { text: 'backEnd', link: '/categories/backEnd' } ] } ] } }
Add the files needed for classification
/docs/categories/frontEnd.md
--- title: frontEnd isCategories: true sidebar: false --- ## FrontEnd
/docs/categories/backEnd.md
--- title: backEnd isCategories: true sidebar: false --- ## BackEnd
Why do you set sidebar false? Because you enable classification, that's a little bit of a conflict with the custom sidebar feature, so you globally turn on the auto sidebar feature, and then close it where you don't need a side marker
Add categories when writing articles
--- title: proxyTable date: 2017-12-28 categories: frontEnd ---
Remember,
categories
corresponding value to file and the corresponding classificationtitle
values are consistent.
Add tag cloud
Add a button to the top navigation
// change /docs/.vuepress/config.js module.exports = { theme: 'paocaijun', themeConfig: { nav: [ { text: 'Tags', link: '/tags/' } ] } }
Add the required files
/docs/tags/README.md
--- isTags: true sidebar: false --- ## tag cloud
Add tags when writing articles
--- title: 【vue】1 date: 2017-12-28 tags: - vue - webpack ---
Comment(valine)
Theme with a built-in valine comments, if you want to open this function, only configure your config.js
// change /docs/.vuepress/config.js
module.exports = {
theme: 'paocaijun',
themeConfig: {
valineConfig: {
appId: '...',// your appId
appKey: '...', // your appKey
}
}
}
Config.js
- On the mobile side, the search box will enlarge when it gets the focus, and it can scroll left and right after losing the focus, which can be optimized by setting the meta.
module.exports = {
head: [
[
"meta",
{
name: "viewport",
content: "width=device-width,initial-scale=1,user-scalable=no"
}
]
]
}
- You can add icon to the navigation menu,like this:
{ text: 'Tags', link: '/tags/', icon: 'paocaijun-tag' }
The project has built-in icons for you to choose
Home Config
- If your heroImage has your website title, maybe you need to set the value of
isShowTitleInHome
false
to make title not show
# this is your homepage
---
home: true
heroImage: /hero.png
isShowTitleInHome: false
---
- If you want change heroImage's style, you can set the value of
heroImageStyle
to achieve the effec you want
# this is your homepage
---
home: true
heroImage: /hero.png
heroImageStyle: {
maxHeight: '200px',
display: block,
margin: '6rem auto 1.5rem',
borderRadius: '50%',
boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
---
- Home page footer can no longer be edited at will, only the owner's name can be changed. The global author name will be displayed first, and if not, the title of the blog will be displayed