hexo-theme-Books 使用说明

你好,我是悦创。

下面如果没有特殊说明, _config.yml 都指主题配置文件,即 hexo-Books-theme 目录下

一、初始化博客下_config.yml

1.1 国际化

language: zh-CN #支持 zh-CN、en

1.2 关掉 hexo 自带的代码高亮

主题内置了主题高亮,所以需要禁用 hexo 自带的高亮

highlight:
    enable: false

二、功能相关

2.1 自定义首页

今日将首页提到 md 文件中了,方便大家的更改。

首页文件位置 /layout/indexs.md ,既然是md格式,要怎么写大家应该都熟门熟路了,悦创就不赘述了。

如果需要使用以下信息,可以按照下面的方式使用(以下内容不限首页使用

2.1.1 文章数统计/字数统计

加入含有 class="article_number" 的html标签可显示文章数量。

加入含有 class="site_word_count" 的html标签可显示站点总字数。

<!-- 我这里是借用了code的样式,所以直接使用code标签。
自定义样式,可加入style属性设置-->
<code class="article_number"></code>
<code class="site_word_count"></code>

上面代码的效果:
文章: 篇;总字数: 字;

2.1.2 流量统计

日志: 2017-03-18改动,由原来的 id 改为现在的 class,可在页面添加多个同类标签

加入含有 class="site_uv" 的html标签可显示站点访问人次。

加入含有 class="site_pv" 的html标签可显示站点访问量。

<!-- 我这里是借用了code的样式,所以直接使用code标签。
自定义样式,可加入style属性设置-->
<code class="site_uv"></code>
<code class="site_pv"></code>

上面代码的效果:
访问人数: 人,访问量:次。

2.3 blog 快捷键

快捷键为 vim 风格的。按键可能与 vimium(chrome 插件)的快捷键有冲突,插件设置屏蔽掉此站的快捷键即可

如果有比较好的建议,欢迎骚扰。

2.3.1 说明

1、全局

Key Descption
s/S 全屏/取消全屏
w/W 打开/关闭文章目录
i/I 获取搜索框焦点
j/J 向下滑动
k/K 向上滑动
gg/GG 到最顶端
shift+G/g 到最下端

2、搜索框

Key Descption
ESC 1.如果输入框有内容,清除内容 2.如果输入框无内容,失去焦点
向下选择文章
向上选择文章
回车 打开当前选中的文章,若没有,则默认打开第一个

3、关闭快捷键

在主题下 _config.yml 中 找到 shortcutKey 设为 false

shortcutKey: false

2.4 多作者模式

尽管 hexo 是为个人 blog 而生的工具,但是有时也可能会有多作者需求,比如他人投稿等等,为此笔者在写 hexo-theme-Books 主题时,顺便添加了此功能 。

2.4.1 修改配置文件

修改 3-hexo/_config.yml,开启多作者模式,并添加 blog 中出现的作者,为搜索提供数据

author:
on: true #true:开启多作者模式
authors:
author1: AI悦创 #添加两个作者 AI悦创、AndersonHJB
author2: AndersonHJB

2.4.2 修改文章头部信息

添加 author: AI悦创 ,表示这篇文章的作者为:AI悦创

---
title: hexo-Books 快捷键说明
date: 2021-03-11 00:24:09
author: AI悦创
top: 2
tags:
- hexo-Books
categories:
- hexo-Books
---

2.4.3 搜索某个作者的所有文章

在搜索栏中输入@小马哥 就可以显示出所有小马哥的文章。
如果你在_config.xml 中配置了作者名,就可以出现 提示 ,具体看第一部分
效果如下:

https://gitee.com/huangjiabaoaiyc/image/raw/master/20210311101208.gif

2.5 开启关于页面

  1. hexo 根目录执行以下,创建 关于 页面
hexo new page "about"
  1. 位置: source/aoubt/index.md ,根据需要进行编辑

  2. 在主题中开启显示:修改主题根目录 _config.yml 中的 aboutontrue,如下所示

menu:
about:  # '关于' 按钮
 on: true # 是否显示
 url: /about  # 跳转链接
 type: 1 # 跳转类型 1:站内异步跳转 2:当前页面跳转 3:打开新的 tab 页

2.6 添加音乐插件

2.6.1 复制网易云音乐插件代码

前往网易云音乐官网,搜索一个作为背景音乐的歌曲,并进入播放页面,点击 生成外链播放器

生成外链播放器

设置好想要显示的样式后,复制 html 代码

img

最好外层在加一个 div,如下,可直接将上一步复制的 iframe 替换下方里面的 iframe

<div id="musicMouseDrag" style="position:fixed; z-index: 9999; bottom: 0; right: 0;">
    <div id="musicDragArea" style="position: absolute; top: 0; left: 0; width: 100%;height: 10px;cursor: move; z-index: 10;"></div>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=38592976&auto=1&height=66"></iframe>
</div>

2.6.2 将插件引入到主题中

将上一步加过 div 的代码粘贴到主题下 layout/_partial/footer.ejs 的最后面

image-20210311103841213

2.6.3 调整位置

默认给的样式是显示在右下角,可以通过调整上一步粘贴的 divstylebottomright 来调整位置。

2.6.4 自由拖动

如果需要自由拖动,在刚才添加的代码后面,再添加下面代码即可,鼠标就可以在音乐控件的 上边沿 点击拖动

<!--以下代码是为了支持随时拖动音乐控件的位置,如没有需求,可去掉下面代码-->
<script>
var $DOC = $(document)
$('#musicMouseDrag').on('mousedown', function (e) {
// 阻止文本选中
$DOC.bind("selectstart", function () {
return false;
});
$('#musicDragArea').css('height', '100%');
var $moveTarget = $('#musicMouseDrag');
$moveTarget.css('border', '1px dashed grey')
var div_x = e.pageX - $moveTarget.offset().left;
var div_y = e.pageY - $moveTarget.offset().top;
$DOC.on('mousemove', function (e) {
var targetX = e.pageX - div_x;
var targetY = e.pageY - div_y;
targetX = targetX < 0 ? 0 : (targetX + $moveTarget.outerWidth() >= window.innerWidth) ? window.innerWidth - $moveTarget.outerWidth() : targetX;
targetY = targetY < 0 ? 0 : (targetY + $moveTarget.outerHeight() >= window.innerHeight) ? window.innerHeight - $moveTarget.outerHeight() : targetY;
$moveTarget.css({'left': targetX + 'px', 'top': targetY + 'px', 'bottom': 'inherit', 'right': 'inherit'})
}).on('mouseup', function () {
$DOC.unbind("selectstart");
$DOC.off('mousemove')
$DOC.off('mouseup')
$moveTarget.css('border', 'none')
$('#musicDragArea').css('height', '10px');
})
})
</script>

2.7 配置评论系统

2.7.1 前言

目前 hexo-books 已经集成了评论系统有 gitalkgitmentdisqus来必力utteranc

2.7.2 gitalk

gitalk 是一款基于 Github Issue 和 Preact 开发的评论插件 官网: https://gitalk.github.io/

1. 登录 github ,注册应用

点击进行注册 ,如下

image-20210311105223393

image-20210311105250235

注册完后,可得到 Client IDClient Secret

2. 新建存放评论的仓库

因为 gitalk 是基于 Github 的 Issue 的,所以需要指定一个仓库,用来承接 gitalk 的评论,我们一般使用 Github Page 来做我们博客的评论,所以,新建仓库名为 xxx.github.io,其中 xxx 为你的 Github 用户名:

3. 配置主题

在主题下 _config.yml 中找到如下配置,启用评论,并使用 gitalk

##########评论设置#############
comment:
on: true
type: gitalk

在主题下 _config.yml 中找到 gitalk 配置,将 第1步 得到的 Client IDClient Secret 复制到如下位置:

gitalk:
  githubID:    # 填你的 github 用户名
  repo:  xxx.github.io     # 承载评论的仓库,一般使用 Github Page 仓库
  ClientID:   # 第1步获得 Client ID
  ClientSecret:  # 第1步获得 Client Secret
  adminUser:     # Github 用户名
  distractionFreeMode: true
  language: zh-CN
  perPage: 10

2.7.3 来必力

1. 创建来必力账号,并选择 City 免费版

官网 http://livere.com/ ,创建账号,点击上面的安装,选择 City 免费版

选择 city 免费版

复制获取到的代码中的 data-uid

复制 data-uid

2. 主题选择使用来必力评论

在主题下 _config.yml

在找到来必力配置如下,第一步中复制的 data-uid 粘贴到下面 data_uid

livere:
  data_uid: xxxxxx
yaml复制代码

找到以下代码, 开启并选择 livere (来必力)

##########评论设置#############
comment:
  on: true
  type: livere
yaml复制代码

2.7.4 utteranc

官网地址:https://utteranc.es/

1. 安装 utterances

点我进行安装

2. 配置主题

在主题下 _config.yml 中找到 utteranc 的配置 ,修改 repo 为自己的仓库名

utteranc:
  repo: xxx/xxx.github.io # 承载评论的仓库,填上自己的仓库
  issue_term: pathname    # Issue 与 博客文章 之间映射关系
  label: utteranc         # 创建的 Issue 添加的标签
  theme: github-light     # 主题,可选主题请查看官方文档 https://utteranc.es/#heading-theme
# 官方文档 https://utteranc.es/
# 使用说明 https://yelog.org//2020/05/23/3-hexo-comment/
yaml复制代码

在主题下 _config.yml 中找到如下配置,启用评论,并使用 utteranc

comment:
  on: true
  type: utteranc
yaml复制代码

三、样式设置

3.1 代码高亮

首先要关闭 hexo 根目录下_config.yml中的高亮设置:

highlight:
  enable: false

配置主题下_config.yml中的高亮设置:

可以根据提示,配置喜欢的高亮主题

highlight:
  on: true # true开启代码高亮
  lineNum: true # true显示行号
  theme: darcula
# 代码高亮主题,效果可以查看 https://highlightjs.org/static/demo/
# 支持主题:
# sublime : 参考sublime的高亮主题
# darcula : 参考idea中的darcula的主题
# atom-dark : 参考Atom的dark主题
# atom-light : 参考Atom的light主题
# github : 参考GitHub版的高亮主题
# github-gist : GitHub-Gist主题
# brown-paper : 牛皮纸效果
# gruvbox-light : gruvbox的light主题
# gruvbox-dark : gruvbox的dark主题
# rainbow :
# railscasts :
# sunburst :
# kimbie-dark :
# kimbie-light :
# school-book : 纸张效果

3.2 MathJax 数学公式

修改 _config.yml

# MathJax 数学公式支持
mathjax:
  on: true #是否启用
  per_page: false # 若只渲染单个页面,此选项设为false,页面内加入 mathjax: true

考虑到页面的加载速度,支持渲染单个页面。

设置 per_page: false ,在需要渲染的页面内 加入 mathjax: true

注意:

由于 hexo 的 MarkDown 渲染器与 MathJax 有冲突,可能会造成矩阵等使用不正常。所以在使用之前需要修改两个地方
编辑 node_modules\marked\lib\marked.js 脚本

  1. 将 451 行 ,这一步取消了对 \\,\{,\} 的转义(escape)
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,
改为
escape: /^\\([`*\[\]()# +\-.!_>])/,
  1. 将 459 行,这一步取消了对斜体标记 _ 的转义
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
改为
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

3.3 表格样式

目前提供了 3 中样式,修改 _config.yml

table: green_title
# table 的样式
# 为空时类似github的table样式
# green 绿色样式
# green_title 头部为青色的table样式

3.4 文章列表的 hover 样式

鼠标移入的背景色和文字颜色变动,设置 _config.yml

#文章列表 鼠标移上去的样式, 为空时使用默认效果
article_list:
  hover:
    background: '#e2e0e0'  # 背景色:提供几种:'#c1bfc1'  '#fbf4a8'
    color:     # 文字颜色 提供几种:'#ffffff'
# 注意:由于颜色如果包含#,使用单引号 ' 引起来

3.5 开启字数统计

  1. 开启此功能需先安装插件,在 hexo根目录 执行 npm i hexo-wordcount --save
  2. 修改 _config.yml
word_count: true

3.6 更换头像

两种方式:

  1. 替换 source/img/avatar.jpg 图片。
  2. 修改 _config.yml 中头像的配置记录
# 你的头像url
avatar: /img/avatar.jpg
favicon: /img/avatar.jpg

3.7 设置链接图标

1. 前言

鉴于许多人问过如何添加自定义图标,这里就详细说明一下,以备后人乘凉。

这篇文章主要讲解是从 iconfont 添加图标。

2. 添加彩色图标

2.1 登录并添加图标

访问 iconfont,点击如下图位置登录,可以使用 Github 账号登录。

image-20210311114025430

登录成功后,搜索合适的图标,然后点击添加到购物车,如下图所示。

img

添加了多个后,可以点击右上角的“购物车”,添加到项目,点击加号创建项目,如下图所示。

img

添加完成后回到项目页面,找到自己刚刚创建的项目。

如果没有到项目页面,可以点击上面菜单进入:资源管理 -> 我的项目

2.2 引入 3-hexo 中

点击下载到本地,解压并复制其中的 iconfont.js 到项目 hexo-books/source/js/ 下,并改名 custom-iconfont.js

img

在文件 hexo-books/layout/_partial/meta.ejs 最后追加下面一行。

<script src="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/js/custom-iconfont.js?v=<%=theme.version%>" ></script>

2.3 在配置文件中添加生效

修改 hexo-books/_config.yml 如下图所示

img

完成!

图标名如上面的 gitee 可以在 网站上修改,如下图所示

img

2.4 添加黑白图标

link.theme=white
2.4 同 2.1
2.4.1 引入 3-hexo 中

点击生成代码,如下图所示。

img

复制生成的代码,修改 font-family 的值为 custom-iconfont,添加到 3-hexo/source/css/_partial/font.styl 最后,并写入图标信息,content 可以移到图标上进行复制,注意前面斜杠转译和去掉后面的分号。

@font-face {
  font-family: 'custom-iconfont';  /* project id 2298064 */
  src: url('//at.alicdn.com/t/font_2298064_34vkk4c9945.eot');
  src: url('//at.alicdn.com/t/font_2298064_34vkk4c9945.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.woff') format('woff'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.svg#iconfont') format('svg');
}
.icon-gitee:before {
  content: "\e602";
}

.icon-youtubeautored:before {
  content: "\e649";
}
css复制代码
2.4.2 在配置文件中添加生效 同2.2

如下,如果没有连接,则不展示图标。

#链接图标,链接为空则不显示
link:
  rss: /atom.xml
  github: https://github.com/yelog
  facebook: https://www.facebook.com/faker.tops
  twitter:
  linkedin:
  instagram:
  reddit: https://www.reddit.com/user/yelog/
  weibo: http://weibo.com/u/2307534817
  email: jaytp@qq.com

四、排序及置顶

4.1 分类排序

默认按照首字母正序排序,由于中文在 nodejs 环境下不能按照拼音首字母排序,所以添加了自定义排序方式,在主题下 _config.yml 中找到如下配置,category.sort 则是定义分类顺序的。

规则:sort 中定义的 category 比 没有在 sort 中定义的更靠前

# 文章分类设置
category:
  num: true # 分类显示文章数
  sub: true # 开启多级分类
  sort:
    - 读书
    - 大前端
    - 后端
    - 数据库
    - 工具
    - 运维

4.2 文章排序

文章列表默认按照创建时间(如下文章内定义的 date )倒序。

使用 top 将会置顶文章,多个置顶文章时,top 定义的值越大,越靠前。

---
title: 每天一个linux命令
date: 2021-03-10 11:41:48
top: 1
categories:
- 运维
tags:
- linux命令
---

五、关于写文章

5.1 如何写

每篇文章最好写上文集和标签,方便筛选和查看。

一般推荐一篇文章设置一个文集,一个或多个标签

  • categories:文集,为左侧列表
  • tags:标签,通过 #来筛选

例如 本篇文章的设置

---
title: hexo-Books 使用说明
date: 2021-03-11 15:13:47
categories:
- 工具
tags:
- hexo
- hexo-books
---

5.2 写作

  1. 设置模板,blog 根目录 scaffolds/post.md
  2. 加入 categories, tags 等,这样以后通过 hexo new 生成的模板就不用写这两个单词了。
    当然,你也可以写入任何你每个文章中都会有的部分。
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

六、技巧

6.1 快捷命令

其实就通过 alias,触发一些命令的集合

~/.bashrc 文件中添加

alias hs='hexo clean && hexo g && hexo s'  #启动本地服务
alias hd='hexo clean && hexo g && hexo d'  #部署博客

甚至你也可以加入备份文章的命令,可以自由发挥。

6.3 博客备份(快捷命令升级版)

为了保证我们写的文章不丢失、快速迁移博客,都需要备份我们的 blog。

  1. 博客根目录,执行 git init 创建 git 仓库。
  2. 在 github(或其他托管平台、自建远程仓库等) 创建仓库并和本地仓库建立联系。
  3. ~/.bashrc 文件中添加
alias hs='hexo clean && hexo g && hexo s'
alias hd='hexo clean && hexo g && hexo d && git add . && git commit -m "update" && git push -f'

这样,我们在执行 hd 进行部署时,就一同将博客进行备份了。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 1432803776@qq.com

文章标题:hexo-theme-Books 使用说明

字数:4.1k

本文作者:AI悦创

发布时间:2021-03-11, 08:55:41

最后更新:2021-03-11, 15:49:48

原始链接:https://huangjiabaoaiyc.gitee.io/aiyc/6041ede5.html

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

×

喜欢就点赞,疼爱就打赏