VuePress 配置记录

最新推荐文章于 2024-09-06 16:45:43 发布

NFE_W

最新推荐文章于 2024-09-06 16:45:43 发布

阅读量475

点赞数

分类专栏：杂项文章标签： VuePress Github Pages

本文链接：https://blog.youkuaiyun.com/yrwan95/article/details/122193223

版权

杂项专栏收录该内容

2 篇文章

订阅专栏

VuePress 配置记录

mkdir vuepress-starter && cd vuepress-starter
npm init
npm install -D vuepress
vim package.json
### 添加如下内容
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "docs:deploy": "bash deploy.sh"
  }
}
###

mkdir -p docs/public/assets
vim docs/README.md # 内容如下
vim docs/public/config.js # 内容如下
vim deploy.sh # 内容如下

npm run docs:dev

README.md

---
home: true
heroImage: /assets/avatar.jpg
heroText: NFE-W`S BLOG
tagline: Just a study note for myself
actionText: Go →
actionLink: /sui-bi/
features:
- title: 随笔
  details: 随便记记。
- title: Todo
  details: todo
- title: Todo
  details: todo
footer: MIT Licensed | Copyright © 2022-present NFE-W
---

config.js

module.exports = {
  title: 'NFE-W`S BLOG',
  description: 'Just a study note for myself',
  base: '/',
  markdown: {
    lineNumbers: true // 代码块显示行数
  },
  plugins: ['permalink-pinyin', ['autobar', {'pinyinNav': true}], 'rpurl'],
  themeConfig: {
    repo: 'https://github.com/nfe-w',
    repoLabel: 'GitHub',
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Repo', link: 'https://github.com/nfe-w/my-note' },
    ],
  }
}

deploy.sh

#!/bin/sh

# 确保脚本抛出遇到的错误
set -e

npm run docs:build

cd docs/.vuepress/dist

# 如果是发布到自定义域名
echo 'note.nfe-w.top' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

git push -f git@github.com:nfe-w/nfe-w.github.io.git master

cd -

自动侧边栏插件

npm install -D boboidream/vuepress-bar
vim docs/public/config.js # 配置中添加插件，内容如下

module.exports = {
  plugins: ['autobar']
}

链接拼音插件

npm install -D vuepress-plugin-permalink-pinyin
vim docs/public/config.js # 配置中添加插件，内容如下

module.exports = {
	plugins: ['permalink-pinyin'] // 如果结合自动侧边插件，应为 plugins: ['permalink-pinyin', ['autobar', {'pinyinNav': true}]]
}

链接美化插件

npm install -D boboidream/vuepress-plugin-rpurl
vim docs/public/config.js # 配置中添加插件，内容如下

module.exports = {
	plugins: ['rpurl']
}