[持续更新] vuepress-theme-sakura配置说明
JarryChen 发布时间：2020-10-06 文章字数：622 预计用时：3分7秒
通用配置
# 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如果代码里有使用数学公式，需要开启 mathjaxdate要使用如上的格式，记得加引号，保证时间正确
- 列表页
frontmatter比较重要的几个属性
---
kind: 'xx'
comments: true
---
参数解释
kind对应单页面的 categories，这里使用字符串来连接上关系comments开启评论，不过好像没生效，列表页应该不需要单独的评论界面
frontmatter大概需要注意的就是以上几点
# 6. 其他操作
- 要想在
md里直接使用自己编写的组件，方法是自己在docs(我的主目录下)创建components编写 vue 组件，名字就是到时候你在md里引用时要写的名字 - 目前的话只尝试了列表页和时间线页面，没有传递
props，因为在组件里都能直接获取到页面的frontmatter，有需要的话直接写在frontmatter里到时候改起来也方便
暂时的话需要注意这些内容，后续的话有更新会及时更新文档，希望大家多多支持和提优化意见，谢谢
————未完待续————