vuepress-theme-yur 使用教程
vuepress-theme-yur 使用教程
cnguu
发布于 2020-10-12 13:25:21
发布于 2020-10-12 13:25:21
代码可运行
运行总次数：0
代码可运行
# 简介
当前版本为 1.x
2.x 版本使用文档迁移至 这里
# 安装
$ yarn add vuepress-theme-yur修改配置文件，启用主题
module.exports = {
theme: 'yur',
};
# 站点配置
# 多语言
module.exports = {
locales: {
'/': {
lang: 'zh-CN', // 只支持中文
},
},
};
# MarkDown 扩展
module.exports = {
markdown: {
lineNumbers: true, // 开启行号（关闭无呼吸灯特效）
anchor: { permalink: true, permalinkBefore: true, permalinkSymbol: '#' },
toc: { includeLevel: [2, 3] }, // 指定 [[toc]]
},
};
# 主题配置
/20171231/logo.png对应/docs/.vuepress/public/20171231/logo.png
module.exports = {
themeConfig: {
site: 'https://gleehub.com', // 站点地址
logo: '/20171231/logo.png', // 站点 Logo
banner: '/20171231/banner.png', // 首页封面，固定宽高比例：482x500
bannerButtons: [ // 首页按钮，type 默认：default，可选：primary dashed danger link
{text: '阅读博文', link: '/posts/?page=1&pageSize=12', type: 'primary'},
{text: '了解博主', link: '/about', type: 'default'},
],
notFound: '/20171231/notFound.png', // 404 页面背景图片
},
};
# 添加分类
- 在
/docs下新建一个文件夹other：一个文件夹代表一个分类 - 在
/docs/other下新建一个文件README.md：代表该分类的列表页
README.md 内容如下：
---
title: 分类名称
meta:
- name: description
content: 分类描述
- name: keywords
content: 分类关键词
---
添加导航：
module.exports = {
themeConfig: {
nav: [
{ text: '编程技术', link: '/program/' },
{ text: '生活兴趣', link: '/life/' },
{ text: '软件工具', link: '/tool/' },
{ text: '其它', link: '/other/' },
],
},
};
# 添加友链
在 /docs 下新建文件 link.md
内容示例：
---
title: 友人帐
meta:
- name: description
content: 友人帐
- name: keywords
content: 友人帐
---
## 随便写写
配置：
module.exports = {
themeConfig: {
link: {
banner: '/20171231/banner.gif', // 封面图
blog: [
{
title: '凉风有信', // 站点名称
subtitle: '责难无以成事', // 站点描述
link: 'https://gleehub.com/', // 站点网址
logo: 'https://static.xmt.cn/cc50c217cbe342ce951324583f2c6139.png', // 头像或者 Logo
color: '#39c5bb', // 主题色
},
{
// 根据示例，继续添加
},
],
},
},
};
# 开启「时间线」页面
module.exports = {
themeConfig: {
timeline: true,
},
};
# 设置「关于我」页面
在 /docs 下新建文件 about.md
内容示例：
---
title: 关于我
meta:
- name: description
content: 关于我
- name: keywords
content: 关于我
---
## 随便介绍下自己
配置：
module.exports = {
themeConfig: {
about: {
banner: '/20171231/banner.gif', // 封面图
avatar: '头像链接',
name: '博主名称',
introduction: '简介',
},
},
};
# 设置页脚
module.exports = {
themeConfig: {
author: 'cnguu', // 博主名称
authorLink: 'https://github.com/cnguu/', // 博主名称跳转链接
footer: [
[ // 推荐资源
{
title: 'Yur', // 标题
subtitle: 'VuePress 主题', // 描述
link: 'https://github.com/cnguu/vuepress-theme-yur', // 跳转链接
},
{
// 根据示例，继续添加
},
],
[ // 相关信息
{
title: 'Github', // 标题
link: 'https://github.com/cnguu/', // 跳转链接
type: 'github', // 图标，这里获取：https://vue.ant.design/components/icon-cn/
theme: 'filled', // 图标类型，可选：filled（实心）丨outlined（默认：描线）丨twoTone（双色）
},
{
// 根据示例，继续添加
},
],
[ // 其它
{
title: 'www@cnguu.cn', // 标题
link: 'mailto:www@cnguu.cn', // 跳转链接
type: 'mail', // 图标，这里获取：https://vue.ant.design/components/icon-cn/
theme: 'outlined', // 图标类型，可选：filled（实心）丨outlined（默认：描线）丨twoTone（双色）
},
{
// 根据示例，继续添加
},
],
],
},
};
# 开启评论
先根据评论的官方文档做好相关安装与配置
module.exports = {
themeConfig: {
comment: 'vssue',
},
plugins: [
['@vssue/vuepress-plugin-vssue', {
platform: 'github',
owner: 'cnguu',
repo: 'blog-vssue',
clientId: 'clientId',
clientSecret: 'clientSecret',
}],
],
};
module.exports = {
themeConfig: {
comment: 'valine',
valine: {
appId: '<API_ID>',
appKey: '<API_Key>',
placeholder: '在这里写下你的留言丨支持 MarkDown 语法',
notify: true,
verify: true,
avatar: 'mp',
pageSize: 8,
recordIP: true,
},
},
};
在需要关闭评论的博文加上 comment 配置
---
title: 博文标题
comment: false
---
# 百度自动推送
module.exports = {
themeConfig: {
baiDuAuthPush: true,
},
};
# 百度统计
module.exports = {
themeConfig: {
baiDuTongJi: 'token', // https://hm.baidu.com/hm.js?token
},
};# 在线聊天
module.exports = {
themeConfig: {
crisp: 'CRISP_WEBSITE_ID', // Crisp 分配的 ID
},
};# 文章配置
在 /docs/other 分类下新建一个文件 示例.md，代表一篇博文
示例.md 内容如下：
---
title: 文章标题
meta:
- name: description
content: 页面描述
- name: keywords
content: 页面关键词
date: 2019-09-12
update_date: 2019-09-12
tags:
- 标签一
- 标签二
banner: /20190101/banner.jpg
---
参数 | 说明 |
|---|---|
date | 创建日期 |
update_date | 更新日期 |
tags | 标签，第一个为主标签 |
banner | 封面图片链接 |
copyright | 版权说明，默认：允许转载，需保留原文链接，著作权归博主所有 |
password | 访问密码 |
# 定制主题
新建文件 /docs/.vuepress/styles/variable.less：
@primary-color: #3c67bd; // 全局主色
@link-color: #3c67bd; // 链接色
@tip-color: #3c67bd; // 信息色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 16px; // 主字号
@heading-color: rgba(0, 0, 0, .85); // 标题色
@text-color: rgba(0, 0, 0, .65); // 主文本色
@text-color-secondary: #314659; // 次文本色
@disabled-color: rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 8px 15px rgba(0, 0, 0, .4); // 浮层阴影
@codeLang: bash, c, css, cpp, cmake, coffeescript, coffee, d, dart, docker, dockerfile, ejs, erlang, git, go, graphql, html, http, ini, java, javascript, jq, js, json, jsonp, json5, jsx, kotlin, latex, tex, context, less, lua, makefile, markdown, md, matlab, nginx, objectivec, perl, php, phpdoc, plsql, powershell, pug, python, py, q, r, regex, ruby, rb, rust, sass, scss, scala, shell, smarty, sql, stylus, svg, swift, toml, ts, tsx, twig, typescript, vim, visual-basic, vb, wiki, xml, yaml, yml; // 代码块语言
代码块支持的语言：PrismJs
# 定制标示牌
module.exports = {
themeConfig: {
nameplate: {
width: '86px', // 长度
height: '36px', // 高度
text: [ // css 属性
{
fontSize: '20',
textAnchor: 'middle',
x: '50%',
y: '50%',
textTransform: 'uppercase',
fill: 'none',
stroke: '#3498db',
textShadow: '0 0 1px #3498db',
strokeWidth: '1px',
strokeDasharray: '90 310',
animate: {
attributeName: 'stroke-dashoffset',
begin: '-1.5s',
dur: '6s',
from: '0',
to: '-400',
repeatCount: 'indefinite',
},
},
{
fontSize: '20',
textAnchor: 'middle',
x: '50%',
y: '50%',
textTransform: 'uppercase',
fill: 'none',
stroke: '#f39c12',
textShadow: '0 0 1px #f39c12',
strokeWidth: '1px',
strokeDasharray: '90 310',
animate: {
attributeName: 'stroke-dashoffset',
begin: '-3s',
dur: '6s',
from: '0',
to: '-400',
repeatCount: 'indefinite',
},
},
{
fontSize: '20',
textAnchor: 'middle',
x: '50%',
y: '50%',
textTransform: 'uppercase',
fill: 'none',
stroke: '#e74c3c',
textShadow: '0 0 1px #e74c3c',
strokeWidth: '1px',
strokeDasharray: '90 310',
animate: {
attributeName: 'stroke-dashoffset',
begin: '-4.5s',
dur: '6s',
from: '0',
to: '-400',
repeatCount: 'indefinite',
},
},
{
fontSize: '20',
textAnchor: 'middle',
x: '50%',
y: '50%',
textTransform: 'uppercase',
fill: 'none',
stroke: '#9b59b6',
textShadow: '0 0 1px #9b59b6',
strokeWidth: '1px',
strokeDasharray: '90 310',
animate: {
attributeName: 'stroke-dashoffset',
begin: '-6s',
dur: '6s',
from: '0',
to: '-400',
repeatCount: 'indefinite',
},
},
],
},
},
};
# 落下帷幕
module.exports = {
themeConfig: {
curtain: {
tip: '页面准备中...', // 提示语
textShadow: '#e91e63', // 文字阴影颜色
},
},
};# 密码保护
默认密码
module.exports = {
themeConfig: {
password: '123456', // 默认：52yur
},
};在需要密码访问的文章加上 password 配置
---
title: 文章标题
password: true
---独立密码
---
title: 文章标题
password: 123456
---# 打字特效
module.exports = {
themeConfig: {
ityped: {
typeSpeed: 300, // 正常速度
backSpeed: 100, // 反向速度
startDelay: 300, // 开始延迟（毫秒）
backDelay: 300, // 反向延迟（毫秒）
loop: true, // 循环
showCursor: true, // 显示指针
placeholder: false, // 占位
disableBackTyping: false, // 禁用反向输入
cursorChar: '丨', // 指针字符
},
},
};仅限网站描述
# 打赏
module.exports = {
themeConfig: {
reward: [
'https://static.xmt.cn/ca717dde8ae14ea7ab3c8c74b8711414.png',
'https://static.xmt.cn/acc7d3d02b0c4a35a3735268cbb2cce0.png',
],
},
};
# 乐动标签云
默认弹奏乐谱：小星星
module.exports = {
themeConfig: {
piano: true,
},
};自定义乐谱
module.exports = {
themeConfig: {
piano: '1:0-1:13-5:13-5:13-6:15-6:13-5:12-4:29-4:14-3:14-3:12-2:14-2:13-1:14-5:27-5:12-4:14-4:13-3:14-3:13-2:14-5:27-5:14-4:14-4:13-3:14-3:12-2:15-1:29-1:13-5:14-5:14-6:15-6:15-5:15-4:29-4:16-3:13-3:16-2:15-2:17-1:17',
},
};
1到9分别对应do、re、mi、fa、so、la、si、高音 do、高音 re- 乐谱 1:0-1:13-5:13 表示：播放
1，接着0*50毫秒后，播放1，接着13*50毫秒后，播放5
# 小图标
- 注册 阿里巴巴矢量图标库
- 新建项目，并添加自己喜欢的图标
- 引入 Symbol 的 CDN 链接（也可以下载到本地使用）
module.exports = {
head: [
['script', {src: '//at.alicdn.com/t/font_xxx.js'}],
],
};4. 在 MarkDown 中使用
<Icon name="github" />
<Icon name="man" color="#39c5bb" />
<Icon name="woman" size="2em" />- name：图标名称
- color：颜色
- size：大小（建议使用 em 单位）
# 升级
升级到指定版本 1.0.1
$ yarn upgrade vuepress-theme-yur@1.0.1
#或者
$ yarn upgrade-interactive --latest
# 订阅
新版本发布后，将会有邮件通知您！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/12/18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
