# 安装

$ yarn add vuepress-theme-yur

使用主题

module.exports = {
    theme: 'yur'
}

# 基本信息

module.exports = {
    themeConfig: {
        lang: 'zh-CN',
        logo: '/logo.png',
        author: 'cnguu',
        authorLink: 'https://github.com/cnguu/',
        locales: {
            title: '星汉灿烂',
            description: '书写生活与你'
        }
    }
}
参数 说明
lang 默认语言
可选:en(默认) zh-CN
logo 网站 LOGO 链接
author 站长名称
authorLink 站长名称站外跳转链接
locales 语言本地化
详细见:多语言文件 (opens new window)

# 导航

# 新增分类

新建文件:/docs/programe/index.md

---

title: 编程技术

meta:
  - name: description
    content: 编程技术
  - name: keywords
    content: 编程,技术

---

修改配置

module.exports = {
    themeConfig: {
        navs: [
            {text: '编程技术', link: '/program/'}
        ]
    }
}
参数 说明
text 分类名称
link 分类目录

# 开启时间线

新建文件:/docs/timeline.md

---

title: 时间线

meta:
  - name: description
    content: 时间线
  - name: keywords
    content: 时间线

---

修改配置

module.exports = {
    themeConfig: {
        timeline: true
    }
}

# 添加友链

新建文件:/docs/links.md

---

title: 友人帐

meta:
  - name: description
    content: 友人帐
  - name: keywords
    content: 友人帐

---

---

## 留言格式

::: primaryLong
站点名称:凉风有信

站点描述:责难无以成事

站点网址:https://blog.cnguu.cn/

LOGO:https://static.xmt.cn/cc50c217cbe342ce951324583f2c6139.png

主题色调: #9a69ec
:::

## 交友要求

1. 博文总数 >= 30
2. 内容积极乐观
3. 符合国家相关法律法规
4. 符合本人当时心情

修改配置

module.exports = {
    themeConfig: {
        links: [
            {
                name: '博客',
                lists: [
                    {
                        title: '凉风有信',
                        subtitle: '责难无以成事',
                        link: 'https://blog.cnguu.cn/',
                        logo: 'https://static.xmt.cn/cc50c217cbe342ce951324583f2c6139.png',
                        color: '#9a69ec'
                    }
                ]
            }
        ]
    }
}
参数 说明
name 类别名称
lists 友链列表
lists.title 站点名称
lists.subtitle 站点描述
lists.link 站点网址
lists.logo 站点 LOGO 链接
lists.color 站点主题色

# 开启个人页

新增文件:/docs/about.md

---

title: 关于我

meta:
  - name: description
    content: 关于我
  - name: keywords
    content: 关于我

---

---

## 自我介绍

此处省略十万八千字......

---

修改配置

module.exports = {
    themeConfig: {
        about: true,
        avatar: 'https://static.xmt.cn/cc50c217cbe342ce951324583f2c6139.png'
    }
}
参数 说明
avatar 个人头像链接

添加社交

module.exports = {
    themeConfig: {
        social: {
            github: 'https://github.com/cnguu/',
            facebook: 'https://www.facebook.com/profile.php?id=100031941487870',
            twitter: 'https://twitter.com/cnguu_cn',
            dribbble: 'https://dribbble.com/cnguu',
            weibo: 'https://weibo.com/gu642779596',
            zhihu: 'https://www.zhihu.com/people/gleehub',
            qq: 'tencent://message/?uin=642779596'
        }
    }
}

类型为图标名称 Icon (opens new window)

# 页脚

module.exports = {
    themeConfig: {
        footer: {
            icon: '/footer.jpg',
            one: [
                {
                    title: 'Yur',
                    subtitle: 'VuePress 主题',
                    link: 'https://github.com/cnguu/vuepress-theme-yur'
                },
                {
                    title: 'Yur Tool',
                    subtitle: '主题快速搭建工具',
                    link: 'https://github.com/ioim/vuepress-theme-yur-cli'
                }
            ],
            two: [
                {
                    title: '备案 xxxxxxxx 号',
                    link: 'http://beian.miit.gov.cn',
                    type: 'flag',
                    theme: 'filled'
                }
            ],
            three: [
                {
                    title: '吐个槽',
                    link: 'https://support.qq.com/product/106316',
                    type: 'message',
                    theme: 'outlined'
                },
                {
                    title: '社区交流扣群:686025154',
                    link: '//shang.qq.com/wpa/qunwpa?idkey=c6afb0610ede557ae6920fc4cb31d652fde73d703203b261c6d2366544371776',
                    type: 'qq',
                    theme: 'outlined'
                }
            ]
        }
    }
}
参数 说明
icon 图标
one 第一列
one.title 标题
one.subtitle 描述
one.link 站外跳转链接
two 第二列
two.title 标题
two.link 站外跳转链接
two.type 图标名称
two.theme 图标类型
默认:outlined(描线)
可选:filled(实心) twoTone(双色)
three 第三列
参数同第二列

# 主页

# 封面图

推荐使用比例为 1:1 的图片,至少像素为 500x500

module.exports = {
    themeConfig: {
        banner: '/banner.png'
    }
}

# 按钮组

module.exports = {
    themeConfig: {
        buttons: [
            {text: '阅读列表', link: '/posts/', type: 'primary'},
            {text: '了解作者', link: '/about.html', type: 'default'}
        ]
    }
}
参数 说明
text 文本
link 站内跳转链接
type 按钮类型
可选:default primary dashed danger link

# 打字特效

module.exports = {
    themeConfig: {
        ityped: {
            typeSpeed: 300,
            backSpeed: 100,
            startDelay: 300,
            backDelay: 1300,
            loop: true,
            showCursor: true,
            placeholder: false,
            disableBackTyping: false,
            cursorChar: '丨'
        }
    }
}
参数 说明
typeSpeed 正常速度
backSpeed 反向速度
startDelay 开始延迟(毫秒)
backDelay 反向延迟(毫秒)
loop 循环
showCursor 显示指针
placeholder 占位
disableBackTyping 禁用反向输入
cursorChar 指针字符

注意

仅限站点描述

# 标签数量

module.exports = {
    themeConfig: {
        tagSize: 100 // 默认:100
    }
}

# 文章信息

# 气泡特效

module.exports = {
    themeConfig: {
        post: {
        	bubbles: {
				color: 'random',
				radius: 15,
				density: 0.3,
				clearOffset: 0.2
			}
        }
    }
}
参数 说明
color 气泡颜色
默认随机
radius 气泡半径
默认:15
density 气泡密度
数值越大,气泡越密集(建议 <=1)
默认:0.3
clearOffset 气泡消失距离[0-1]
数值越大,消失越晚
默认:0.2

# 随机封面

主题自带了 49 张图片

module.exports = {
    themeConfig: {
        post: {
            cover: [
                '/post/1.jpg',
                '/post/2.jpg',
                'https://xxx.com/3.jpg',
                'https://xxx.com/4.jpg'
            ]
        }
    }
}

# 分页

module.exports = {
    themeConfig: {
        post: {
            pageSize: 12,
            pageSizeOptions: ['12', '24', '48', '96']
        }
    }
}
参数 说明
pageSize 每页文章数量
默认:12
pageSizeOptions 分页筛选项
默认:['12', '24', '48', '96']

# 扉页

---

title: 欢迎访问我的博客

meta:
  - name: description
    content: 欢迎访问我的博客
  - name: keywords
    content: 欢迎,访问,博客

created: 2020/02/08

updated: 2020/02/08

tags:
  - Blog
  - VuePress

banner: /banner.jpg

password: true

discuss: false

copyright: 允许转载,需保留原文链接,著作权归博主所有

---

## 标题

正文省略四万八千字......
参数 说明
title 文章标题
meta 增强 SEO
description:页面描述
keywords:页面关键词
created 文章创建时间
必填
updated 文章更新时间
tags 文章标签
第一个为主标签
banner 文章封面
默认:随机
password 文章访问密码
默认密码:52yur
discuss 评论开关
copyright 版权说明

# 打赏

module.exports = {
    themeConfig: {
        reward: [
            'https://static.xmt.cn/ca717dde8ae14ea7ab3c8c74b8711414.png',
            'https://static.xmt.cn/acc7d3d02b0c4a35a3735268cbb2cce0.png'
        ]
    }
}

# 标示牌

module.exports = {
    themeConfig: {
        nameplate: {
            title: 'Yur', // 内容
            width: '42px', // 宽度
            height: '32px', // 高度
            text: [
                {
                    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: {
    	dark: true,
    }
}

# 落下帷幕

module.exports = {
    themeConfig: {
        curtain: {
            tip: '页面准备中...',
            textShadow: '#e91e63'
        }
    }
}
参数 说明
tip 提示文本
textShadow 文字阴影颜色

# 客服聊天

# crisp

注册账号,添加站点,获取分配的ID:Crisp (opens new window)

module.exports = {
    themeConfig: {
        crisp: 'xxx'
    }
}

破解免费时限

PayPal 绑定一张空的银行卡,然后在 Crisp 安装收付费版的插件,正常使用后即可解绑银行卡

# 添加评论

支持的评论:

module.exports = {
    themeConfig: {
        discuss: 'vssue'
    }
}

# Vssue

安装插件

$ yarn add @vssue/vuepress-plugin-vssue
$ yarn add @vssue/api-github-v3

修改配置

module.exports = {
    plugins: [
        ['@vssue/vuepress-plugin-vssue', {
            platform: 'github',
            owner: 'cnguu',
            repo: 'blog-vssue',
            clientId: '',
            clientSecret: ''
        }]
    ]
}

# Valine

module.exports = {
    themeConfig: {
        valine: {
            appId: '',
            appKey: '',
            placeholder: '在这里写下你的留言丨支持 MarkDown 语法',
            notify: false,
            verify: true,
            avatar: 'mp',
            pageSize: 8,
            recordIP: true,
            lang: 'zh-cn'
        }
    }
}

# 小图标

  1. 注册 阿里巴巴矢量图标库 (opens new window)
  2. 新建项目,并添加自己喜欢的图标
  3. 引入 Symbol 的 CDN 链接(也可以下载到本地使用)
module.exports = {
    head: [
        ['script', {src: '//at.alicdn.com/t/font_xxx.js'}]
    ]
}
  1. 在 MarkDown 中使用
<Icon name="github" />

<Icon name="man" color="#39c5bb" />

<Icon name="woman" size="2em" />
参数 说明
name 图标名称
color 图标颜色
size 图标大小(建议使用单位:em)

# 百度

module.exports = {
    themeConfig: {
        baiDu: {
            tongJi: '',
            autoPush: true,
            pinYin: true,
        }
    }
}
参数 说明
tongJi 百度统计
https://hm.baidu.com/hm.js?tongJi
autoPush 百度自动推送
pinYin 文章链接转拼音

# 主题样式

新建文件:/docs/.vuepress/styles/variable.less

@primary-color: #9a69ec;
@link-color: #9a69ec;
@tip-color: #3c67bd;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;

@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;
参数 说明
@primary-color 主题色
@link-color 链接色
@tip-color 提示色
@success-color 成功色
@warning-color 警告色
@error-color 错误色
@codeLang 代码块语言

代码块支持的语言:PrismJs (opens new window)

# CDN

module.exports = {
    themeConfig: {
        cdn: 'https://cdn.jsdelivr.net/gh/cnguu/cnguu.github.io@master/'
    }
}

# 升级

$ yarn upgrade vuepress-theme-yur@1.4.3

// 或者
$ yarn upgrade-interactive --latest

# 常见问题

  1. 从 1.x 升级 2.x 部署后,显示仍然是 1.x 版本?

    答:1.x 版本默认使用 pwa 插件,2.x 版本不再内置,导致缓存需要用户手动清除才可显示最新。

    解:安装 pwa 扩展,如果你不继续使用 pwa,需要自己编写 js 脚本自动清除旧版缓存。

  2. 编译后,缺少 index.html

    解:新建一个文件 /docs/index.md 即可。

  3. 文章列表布局异常?

    解:安装依赖 yarn add ant-design-vue@1.4.11

# 订阅

提示

新版本发布后,将会有邮件通知您!

vuepress-theme-yur订阅