Hexo博客主题pure使用说明

作者: nick5683 | 来源:发表于2022-04-07 10:23 被阅读0次

Hexo博客主题pure使用说明
为Hexo 安装主题
Blogging On Github
Hexo 博客从搭建部署到SEO优化等详细教程
Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源
使用 Hexo + GitHub 搭建个人博客
HEXO 搭建博客
github-hexo 如何添加自定义网页
Hexo 新手记
Hexo + GitHub Homepage 搭建个人博客

原文地址：https://blog.cofess.com/2017/11/01/hexo-blog-theme-pure-usage-description.html

Hexo博客主题pure使用说明

A brand new default theme for [Hexo]. Preview | English documentation

外观

首页 | 归档 | 分类 | 标签 | 项目 | 书单 | 友链 | 关于

启用主题

Execute the following command under your hexo folder.

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"><code>git clone https://github.com/cofess/hexo-theme-pure.git themes/pure
</code></pre>

Then modify the property theme of the file hexo/_config.yml to theme: pure

更新主题

Execute the following command to update theme.


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">cd themes/pure
git pull
</pre>

安装插件

hexo-wordcount

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-wordcount --save
</pre>

hexo-generator-json-content

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-generator-json-content --save
</pre>

hexo-generator-feed

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-generator-feed --save
</pre>

hexo-generator-sitemap

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-generator-sitemap --save
</pre>

hexo-generator-baidu-sitemap

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-generator-baidu-sitemap --save
</pre>

主题配置

导航菜单


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># 导航菜单
menu:
 Home: . 
 Archives: archives # 归档
 Categories: categories # 分类
 Tags: tags # 标签
 Repository: repository # github repositories
 Books: books     # 书单
 Links: links # 友链
 About: about # 关于

# 导航菜单图标（font awesome）
menu_icons:
 enable: true # 是否启用菜单图标
 home: fa-dashboard
 archives: fa-delicious
 categories: fa-folder
 tags: fa-tags
 repository: fa-code
 books: fa-leanpub
 links: fa-gg
 about: fa-coffee
</pre>

搜索

主题内置三种站内搜索方式：insight、swiftype、baidu


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># Search
search:
 insight: true # you need to install `hexo-generator-json-content` before using Insight Search
 swiftype: # enter swiftype install key here
 baidu: false # you need to disable other search engines to use Baidu search
</pre>

支持weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># Share
# weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
share:
 enable: true  # 是否启用分享
 sites: weibo,qq,wechat,facebook,twitter  # PC端显示的分享图标
 mobile_sites: weibo,qq,qzone  # 移动端显示的分享图标
</pre>

主题集成了disqus、友言、来必力、gitment评论系统，选择其中一种即可

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># Comment
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
comment:
 type: livere # 启用哪种评论系统
 disqus:  # enter disqus shortname here
 youyan: 
 uid: *** # enter youyan uid 
 livere:
 uid: *** # enter livere uid
 gitment:
 githubID: username
 repo: username.github.io
 ClientID: ***
 ClientSecret: ***
 lazy: false
</pre>

Github respostory

复制theme/pure/_source/ 目录下repository文件夹到blog path/source/ 目录下


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># Github
github: 
 username: ***  # github username
</pre>

豆瓣书单

复制theme/pure/_source/ 目录下books文件夹到blog path/source/ 目录下


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># douban 豆瓣书单
douban:
 user: *** # 豆瓣用户名
 start: 0 # 从哪一条记录开始
 count: 100 # 获取豆瓣书单数据条数
</pre>

友情链接

复制theme/pure/_source/ 目录下links文件夹到blog path/source/ 目录下

在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。

然后在文件内创建一个名为 links.yml 的文件,在其中添加相关数据即可。

单个友情链接的格式为：


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">Name:
 link: http://example.com
 avatar: http://example.com/avatar.png
 desc: "这是一个描述"
</pre>

添加多个友情链接，我们只需要根据上面的格式重复填写即可。

. 将 Name 改为友情链接的名字，例如 Cofess。

. http://example.com 为友情链接的地址。

. http://example.com/avatar.png 为友情链接的头像。

. 这是一个描述为友情链接描述。

文章启用目录索引


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">title: 文章标题
categories:
 - 文章分类
tags:
 - 文章标签
toc: true # 是否启用内容索引
</pre>

博客优化

hexo-neat

auto Minify html、js、css and make it neat


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-neat --save
</pre>

在博客配置文件_config.yml中添加

<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;"># hexo-neat
neat_enable: true
neat_html:
 enable: true
 exclude: 
neat_css:
 enable: true
 exclude:
 - '*.min.css'
neat_js:
 enable: true
 mangle: true
 output:
 compress:
 exclude:
 - '*.min.js'
</pre>

hexo-baidu-url-submit


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-baidu-url-submit --save
</pre>

hexo-translate-title

使用Google翻译，百度翻译和有道翻译将Hexo中的汉字标题转成英文标题

安装


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm install hexo-translate-title --save
</pre>

在博客配置文件_config.yml中添加


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">translate_title:
 translate_way: google    #google | baidu | youdao
 youdao_api_key: XXX
 youdao_keyfrom: XXX
 is_need_proxy: true     #true | false
 proxy_url: http://localhost:8123
</pre>

注意：判断是否需要配置google本地代理，因为我在本地是开启时才能访问google翻译的，如果没有被墙，请将_config.yml 下的is_need_proxy: true改为false。如果设置为true,请设置本地代理地址

数学公式

Hexo默认使用"hexo-renderer-marked"引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签

解决方案

解决方案有很多，可以网上搜下，为了节省大家的时间，这里只提供亲身测试过的方法。

更换Hexo的markdown渲染引擎，hexo-renderer-markdown-it-plus引擎替换默认的渲染引擎hexo-renderer-marked即可。

安装hexo-renderer-markdown-it-plus插件


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save
</pre>

配置

安装插件后，如果未正常渲染LaTeX数学公式，在博客配置文件_config.yml中添加


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">markdown_it_plus:
 highlight: true
 html: true
 xhtmlOut: true
 breaks: true
 langPrefix:
 linkify: true
 typographer:
 quotes: “”‘’
 plugins:
 - plugin:
 name: markdown-it-katex
 enable: true
 - plugin:
 name: markdown-it-mark
 enable: false
</pre>

文章启用mathjax


<pre style="box-sizing: border-box; overflow: auto; font-family: monospace, monospace; font-size: 13px; background: rgb(250, 250, 250); margin: 0px; padding: 15px 10px; color: rgb(77, 77, 76); line-height: 1.5; border: none;">title: Hello World
mathjax: true
</pre>

Hexo博客主题pure使用说明
原文地址：https://blog.cofess.com/2017/11/01/hexo-blog-theme-p...
为Hexo 安装主题
继续前面的 GitHub搭建免费Hexo博客接下来我们为Blog安装主题，下面有一些不错的主题推荐: pure ...
Blogging On Github
使用Hexo+Github配置博客初步使用Hexo+Github配置博客进阶最详细的Hexo Next主题配置...
Hexo 博客从搭建部署到SEO优化等详细教程
本文主要包括以下内容: Hexo 博客搭建 Hexo 主题选择以及应用关于 Hexo Material 主题的相...
Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源
Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源代码本文简单介绍Hexo+GitHub 搭建博客...
使用 Hexo + GitHub 搭建个人博客
youtube 视频参考快速使用 Hexo 搭建个人博客 #001 - Hexo 博客主题的安装与推荐https:...
HEXO 搭建博客
Hexo搭建Github静态博客 hexo —— 简单、快速、强大的Node.js静态博客框架主题：https:...
github-hexo 如何添加自定义网页
Hexo自定义原理 Hexo 系列的博客中的文章都是经Hexo的主题渲染的静态网页。所以Hexo博客大部分都呈现出...
Hexo 新手记
准备使用 hexo 来写博客自定义主题 hexo-theme-3-hexo 是个很棒的主题,要使用它,可以按以下...
Hexo + GitHub Homepage 搭建个人博客
目录实现原理搭建本地博客网站2.1. 搭建Hexo博客网站2.2. 编辑博客2.3. 修改Hexo主题部署本地网...