一个基于vuepress默认主题开发的主题-vuepress-theme-reform

栏目: Node.js · 发布时间: 5年前

内容简介:项目地址:效果展示:我的博客此主题继承至vuepress的默认主题,添加功能有标签页改造,主页改造,博客分类及展示,gitalk集成及gitalk自动化配置,最新google Analytics集成等。

项目地址: vuepress-theme-reform

效果展示:我的博客

此主题继承至vuepress的默认主题,添加功能有标签页改造,主页改造,博客分类及展示,gitalk集成及gitalk自动化配置,最新google Analytics集成等。

使用

npm install vuepress-theme-reform -D # or yarn add vuepress-theme-reform
复制代码

然后在docs/.vuepress/config.js文件中添加

{
  ...
  theme:'reform'
  ...
}
复制代码

即可使用本主题

功能介绍

主页展示

如需使用主页展示 在docs下的README.md中修改defaultHome:true

---
defaultHome: true
___
复制代码
一个基于vuepress默认主题开发的主题-vuepress-theme-reform

目录分类及展示

在config.js中配置

...
nav: [
      ...
      {
        text: "博文",
        icon: 'zhi',
        items: [
          { text: "前端", link: "/blog/frontend/" }
        ]
      }
      ...
]
复制代码

在docs/blog/frontend下新建README.md,在头部编写

---
type: 'classify'
---
复制代码

那此文件夹下的其它文件都会被编译成展示的博文,此中的/blog/frontend自行定义

一个基于vuepress默认主题开发的主题-vuepress-theme-reform

标签云集成

在docs下新建tags,在tags下新建空的README.md

在config.js中的themeConfig下配置

...
themeConfig:{
  ...
  tags:"tags"
  ...
  nav:[
    ...
    {
        text: "标签云",
        link: '/tags/',
        tags: true
      },
      ...
  ]
}
...
复制代码

其中后面的tags表示你标签云的文件夹名

在我们写的文章中写

---
tags:
  - vuepress
---
复制代码

就能在页面中看到效果

一个基于vuepress默认主题开发的主题-vuepress-theme-reform

gitalk

在config.js中配置

{
  themConfig:{
    ...
    gitalk: {
      // gitalk的主要参数
      clientID: `your clientID`,
      clientSecret: `your clientSecret`,
      repo: `your repo`,
      owner: "yourname",
      admin: ["yourname"],
      accessToken: 'your accessToken ',
      labelRule: `(title,path)=> {
        let paths=path.split('/')
        if(paths.length>0){
          let res = paths.pop()
          if(res===''){
            res=paths.pop()
          }
          res = res.slice(-50)
          return res
        }else{
          return title
        }
      }`
    },
    ...
  }
}
复制代码
  • clientID: 你的clientID,在github的Settings/Developer settings/OAuth Apps下创建获取
  • clientSecret: 你的clientSecret,在github的Settings/Developer settings/OAuth Apps下创建获取
  • repo: 你的评论存放的仓库名,如我的为xuzhongpeng.github.io
  • owner: 你的github账户名
  • admin: 评论下展示的名字
  • accessToken: 可选,用于自动化创建gitalk时发送请求的taken,在github的Settings/Developer settings/Personal access tokens下创建获取
  • labelRule: 评论请求及自动化创建评论时的回调函数,有回调函数的原因在于gitalk标签只能有50个字符的限制,回调函数的第一个参数为当前页面的标题,第二个参数当前页面的路径,返回创建的标签名

gitalk自动化创建

下载安装插件

yarn add vuepress-plugin-gitalk # npm i vuepress-plugin-gitalk -D
复制代码

在package.json中的scripts中加入

{
  "scripts":{
    ...
    "gitalk": "vuepress gitalk ./docs",
    ...
  }
}
复制代码

执行

npm run gitalk
复制代码

即可输出自动化初始化评论的结果

最新Google Analytics插件集成

vuepress提供了@vuepress/plugin-google-analytics,我使用过后没有效果,去google-analytics网站上发现当前的插入代码已有变化,所以自己内置了插件,只需在config.js中配置即可。

{
  ga:'XXXX'
}
复制代码

错误处理

如果自动化创建评论时输出

接口返回数据{"message":"Bad credentials","documentation_url":"https://developer.github.com/v3"}
xxx 创建失败
复制代码

报这个错误大概率是accessToken失效了,这时需要重新到github的Settings/Developer settings/Personal access tokens下创建获取并替换

项目地址: vuepress-theme-reform

效果展示:我的博客


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

疯长

疯长

[美]肖恩· 阿美拉蒂 / 中信出版集团 / 2018-10 / 45

实现财务回报以及扩大影响力是企业家长期关注和讨论的问题。 为什么有些公司实现了10倍的投资回报,而其他的则勉力支撑?产品类似的公司,为什么有的家喻户晓,有的默默无闻直至退出市场…… 为了了解真相,作者阿美拉蒂在这本书中精选10组对照公司,比如,同为社交平通的Facebook(脸谱网)和Friendster(交友网),同为快餐领域先驱的麦当劳和白色城堡,再比如都在开发电动汽车市场的特斯拉......一起来看看 《疯长》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具