优化hexo博客,添加评论,daovoice在线联系等

369 阅读2分钟
原文链接: juejin.im

  使用hexo+github/coding免费搭建个人博客,本文记录hexo博客的一些个性化配置。包括:

  • 修改主题、
  • 头像、
  • 评论、
  • 搜索、
  • DaoVoice在线联系、
  • 顶部加载条、
  • 访问量统计、
  • 第三方统计、

个性化配置

修改主题

下载next主题,完成后,修改站点配置文件的 theme: landscape 为 theme: next,然后执行 hexo s 预览

    git clone https://github.com/iissnan/hexo-theme-next themes/next 复制代码

增加头像并加旋转特效

增加统计字数、阅读时长

  在主题配置文件themes/next/_config.yml中找到以下内容:将wordcount、min2read修改为true

post_wordcount:  item_text: true  wordcount: true  min2read: true  totalcount: true  separated_meta: true复制代码

本地完成以上配置之后还需要增加 hexo-wordcount插件,在命令行中执行以下命令:

npm i --save hexo-wordcount复制代码

安装完毕之后,就可以预览了效果了。自定义样式,如 字数统计:***修改为 字数统计:***字,在themes/next/layout/_macro/post.swig中找到以下内容

  {{ wordcount(post.content) }}" data-snippet-id="ext.310459413f00658ba011e045c40c6dd8" data-snippet-saved="false" data-codota-status="done" class="hljs bash"><span title="{{ __('post.wordcount') }}">  {{ wordcount(post.content) }}</span>复制代码

修改为

  {{ wordcount(post.content) }} 字" data-snippet-id="ext.2af59be3f71b28a0132ada3e4a048e35" data-snippet-saved="false" data-codota-status="done" class="hljs bash"><span title="{{ __('post.wordcount') }}">  {{ wordcount(post.content) }} 字</span>复制代码

阅读时长:***修改为 阅读时长:***分钟

  {{ min2read(post.content) }} " data-snippet-id="ext.1783f112bf2493d58522bc30ab6aef2f" data-snippet-saved="false" data-codota-status="done" class="hljs bash"><span title="{{ __('post.min2read') }}">  {{ min2read(post.content) }} </span>复制代码

修改为

  {{ min2read(post.content) }} 分钟" data-snippet-id="ext.78662bb8c25c04e8165e7250cba8f529" data-snippet-saved="false" data-codota-status="done" class="hljs bash"><span title="{{ __('post.min2read') }}">  {{ min2read(post.content) }} 分钟</span>复制代码

即可。

hexo增加七牛云图床及上传

参考自: 使用VSCode+七牛云图床插件+自定义快捷键配置Hexo博文编写环境

工具:

  • 使用VSCode进行博客编写;
  • qiniu-upload-image插件,需要进行配置;
  • vscode-Hexo插件;
  • 使用七牛云,点击访问作为图床,这个需要自己申请和认证哈,我的认证花了两天时间~~

七牛云新建存储空间-201872223148