通用配置

请查看Vuepress 框架搭建博客

# 1. 安装 vuepress-theme-sakura

cd yourproject(根目录)
npm i vuepress-theme-sakura -s

# 2. 配置主题

//在config.js中使用
module.exports = {
  //...
  theme: 'sakura',
  //...
};
//即可使用主题

# 3. 主页

  • 在还没写任何一个页面时,使用了主题,运行起来也是跳往 404 页面,所以可以在docs(我的md放置文件夹)根目录下写一个Read.me
// 这样写就使用了首页的布局
// 首页由于不知道怎样才能既干净又吸引眼球,故暂时如此,小伙伴有好的idea可以评论下方提
---
home: true
---

# 4. config.js 的配置

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const NODE_ENV = process.env.NODE_ENV === 'production';
module.exports = {
  title: "JarryChen's Blog", // 网站名
  base: '/', // 最好是设置为 /
  author: '', // 填写作者,用于复制时使用
  description: '', // 描述
  head: [
    [
      // 网站ico图标
      'link',
      {rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon.ico'},
    ],
    [
      // 使用manifest
      'link',
      {
        rel: 'manifest',
        href: '/manifest.json',
        preload: true,
      },
    ],
    [
      // 获取分享的样式图标,为fontawesome
      'link',
      {
        rel: 'stylesheet',
        href:
          'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css',
        preload: true,
      },
    ],
    [
      // 如想使用iconfont,在此引入即可
      'link',
      {
        rel: 'stylesheet',
        href: '/iconfont.css',
        preload: true,
      },
    ],
    [
      // aplayer播放器的默认样式
      'link',
      {
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css',
        preload: true,
      },
    ],
    [
      // 2898 验证
      'meta',
      {name: 'wlhlauth', content: ''},
    ],
    [
      // 百度验证
      'meta',
      {name: 'baidu-site-verification', content: ''},
    ],
    [
      // 360验证
      'meta',
      {name: '360-site-verification', content: ''},
    ],
    [
      // 必应验证
      'meta',
      {name: 'msvalidate.01', content: ''},
    ],
    [
      // yandex验证
      'meta',
      {name: 'yandex-verification', content: ''},
    ],
    [
      // 搜狗验证
      'meta',
      {name: 'sogou_site_verification', content: ''},
    ],
    [
      // 百度联盟验证
      'meta',
      {name: 'baidu_union_verify', content: ''},
    ],
  ],
  themeConfig: {
    smoothScroll: true, //开启平滑滚动
    nav: [
      {text: 'test', link: '/', icon: 'el-icon-s-home'}, // 顶部栏配置参见vuepress配置
      {
        // 这里的icon只用在第一层上,支持iconfont或者是element提供的icon
        text: 'test-1',
        icon: 'icon-archive',
        items: [
          {
            text: 'test-1-1',
            link: '/category/test-1-1',
          },
          {
            text: 'test-1-2',
            link: '/category/test-1-2',
          },
          {
            text: 'test-1-3',
            link: '/category/test-1-3',
          },
        ],
      },
    ],
    commentsParam: {
      // 评论使用畅言
      changyan_appid: '', // 畅言key
      changyan_appkey: '', // 畅言secret
      // 开启功能只需在此填充信息即可
    },
    createTime: '', // 建站时间
    busuanzi: {
      // 网站统计修饰语
      pv: '',
      uv_first: '',
      uv_last: '',
    },
    beian: '', // 备案号
    botui: '', // 填写你的机器人botui的路径(相对路径)
    mode: true, // 开启白昼和黑夜模式转换
    aiSearch: true, // 开启智能搜索框
    postShare: {
      // 开启分享,设置禁用渠道
      disabled: ['diandian', 'douban', 'tencent', 'google'],
    },
    devTools: false, // 开启devTools进入debugger模式
    copyRight: true, // 开启复制带最后个人信息
  },
  serviceWorker: true,
  configureWebpack: config => {
    if (NODE_ENV) {
      config.optimization.splitChunks = false;
      config.plugins.push(
        // 生产模式开启预渲染
        new PrerenderSPAPlugin({
          //要求-给的WebPack-输出应用程序的路径预渲染。
          staticDir: path.join(__dirname, './dist/'),
          //必需,要渲染的路线。
          routes: ['/', '/category', '/life', '/about', '/archive', '/comment'],
          minify: {
            minifyCSS: true, // css压缩
            removeComments: true, // 移除注释
          },
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            renderAfterTime: 5000,
          }),
        })
      );
    }
  },
  chainWebpack: config => {
    if (NODE_ENV) {
      // 开启webpack分包
      config.optimization.splitChunks({
        cacheGroups: {
          common: {
            name: 'chunk-common', // 打包后的文件名
            chunks: 'all', //
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true,
          },
          ElementUI: {
            name: 'chunk-element-ui',
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            chunks: 'all',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      });
    }
  },
  evergreen: true, // 忘记是啥了,看vuepress官方文档即可
  markdown: {
    // markdown的配置,这里只设置目录包含的级别
    toc: {
      includeLevel: [2, 3, 4],
    },
  },
  plugins: [
    [
      'helper-live2d',
      {
        // 我网站左下角的看板娘,一键配置
        log: false,
        live2d: {
          enable: true,
          model: 'hibiki',
          display: {
            position: 'left',
            width: 135,
            height: 340,
            hOffset: 45,
            vOffset: 30,
          },
          mobile: {
            show: false,
          },
          react: {
            opacity: 0.8,
          },
        },
      },
    ],
    [
      'sitemap',
      {
        // 站点地图
        hostname: 'https://jarrychen.cn',
      },
    ],
    ['baidu-autopush', true], // 推送给百度,貌似没配对
    [
      'rss', // 站点rss订阅,同上
      {
        base_url: '/category',
        site_url: 'https://jarrychen.cn/category',
        copyright: '2020 Jarry Chen',
        filter: frontmatter => true,
        count: 20,
      },
    ],
    ['element-ui'], // markdown里直接使用element-ui
  ],
};

# 5. 其他配置

  • 单页面frontmatter比较重要的几个属性
---
post: true
categories: 'xx'
comments: true
mathjax: true
date: '2020-03-20 19:30:30'
---

参数解释

  • post表明当前 md 是单页面,不是列表页
  • categories单页面必须填写,紧跟列表页的类别
  • comments单页面是否开启评论
  • mathjax如果代码里有使用数学公式,需要开启 mathjax
  • date要使用如上的格式,记得加引号,保证时间正确

  • 列表页frontmatter比较重要的几个属性
---
kind: 'xx'
comments: true
---

参数解释

  • kind对应单页面的 categories,这里使用字符串来连接上关系
  • comments开启评论,不过好像没生效,列表页应该不需要单独的评论界面
  • frontmatter大概需要注意的就是以上几点

# 6. 其他操作

  • 要想在md里直接使用自己编写的组件,方法是自己在docs(我的主目录下)创建components编写 vue 组件,名字就是到时候你在md里引用时要写的名字
  • 目前的话只尝试了列表页和时间线页面,没有传递props,因为在组件里都能直接获取到页面的frontmatter,有需要的话直接写在frontmatter里到时候改起来也方便

  暂时的话需要注意这些内容,后续的话有更新会及时更新文档,希望大家多多支持和提优化意见,谢谢

————未完待续————