快速开始
npm
# 初始化
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog
# 安装
cd my-blog
npm install
# 运行
npm run dev
# 编译
npm run build
yarn
# 初始化
yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog
# 安装
cd my-blog
yarn install
目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── public
│ │ │ │
│ │ │ ├── css
│ │ │ │ └── css.css
│ │ │ ├── js
│ │ │ │ └── js.js
│ │ │ └── image
│ │ │
│ │ ├── styles
│ │ │ │
│ │ │ └── palette.styl
│ │ │
│ │ └── config.js
│ │
│ ├── README.md
│ │
│ └── config.md
│
└── package.json
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。docs/.vuepress/styles: 用于存放样式相关的文件，不要把自定义的css写在此文件，此主题打包不会识别。docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。docs/.vuepress/public: 静态资源目录。docs/.vuepress/public/css: 自定义css写在此文件docs/.vuepress/public/js: 自定义js写在此文件docs/.vuepress/public/image: 图片放在此文件docs/.vuepress/config.js: 配置文件的入口文件，也可以是YML或toml。
config.js配置
我只是解释一下个别配置
module.exports = {
title: "Max",
description: "....", // 主页描述，也会渲染到meta中
dest: "public",// 打包到public
plugins: [
// ["@vuepress-reco/vuepress-plugin-screenfull", false] // 禁用主题集成插件
],
head: [ // 下面配置<head></head>中的标签
[
"link",
{
rel: "icon",
href: "/favicon.ico"
}
],
[
"meta",
{
name: "viewport",
content: "width=device-width,initial-scale=1,user-scalable=no"
}
],
[
"link",
{
rel: "stylesheet",
href: "/css/index.css" // 这个要注意，要在pulic文件中创建，否则无法打包，你可以通过css修改页面样式
}
],
[
"script",
{
charset: "utf-8",
type: "text/javascript",
src: "/js/index.js" // 这个要注意，要在pulic文件中创建，否则无法打包
}
]
],
theme: "reco",
themeConfig: {
type: "blog", // 类型要选blog
themePicker: false, // 页面主题颜色
nav: [ // 头部按钮配置
{
text: "Home",
link: "/",
icon: "reco-home"
},
{
text: "TimeLine",
link: "/timeLine/",
icon: "reco-date"
}
],
valineConfig: { // 这个是评论插件valine
visitor: true,
hideListAccessNumber: true,
placeholder: '请留下你的评论....',
appId: 'EvGdK3Wsd8JwLFzcAPDQmPqN-gzGzoHsz',// your appId
appKey: 'R7iwrAuIzFelxGxqKR4561Qx' // your appKey
},
// vssueConfig: { // 这个是评论插件vssue
// platform: 'github',
// owner: 'max',
// repo: 'max-blog',
// clientId: 'bacef9972651d87f2430',
// clientSecret: '331eb7dc50b0f93264dcf25d8ce3bf50afabe6a6'
// },
blogConfig: {
category: {
location: 2,
text: "Category"
},
tag: {
location: 3,
text: "Tag"
}
},
search: true, // 是否开始搜索
searchMaxSuggestions: 10, // 搜索最大长度
sidebar: "auto",
lastUpdated: "Last Updated",
author: "Max",
record: "京ICP备17067634号-1",
startYear: "2019"
},
markdown: {
lineNumbers: true
}
}
valineConfig评论插件
具体请看他的配置valine
MarkDown模板
---
title: 文章名称
date: 2019-12-11 // 文章时间
sticky: 2 // 文章排序，不是必须的
tags:
- VuePress // 文章标签
categories:
- 学习 // 分类
---
:::tip
本人博客主题：vuepress-theme-reco // 摘要
:::
<!-- more -->
文章内容........
首页配置
解释首页配置
---
home: true
heroImage: /head.png // head中的头像
faceImage: /head.png // 头像
heroImageStyle: { // head中的头像样式
maxWidth: '600px',
width: '100%',
display: block,
margin: '9rem auto 2rem',
background: '#fff',
borderRadius: '1rem',
}
bgImage: '/bg.jpg' // 背景图片
bgImageStyle: { // 背景图片样式
height: '350px'
}
isShowTitleInHome: false
actionText: Guide // 跳转按钮
actionLink: /views/other/guide // 跳转链接
features:
- title: Yesterday
details: ....
- title: Today
details: ....
- title: Tomorrow
details: ...
---
有不懂的请到 本人博客 留言
