Hugenye的个人博客

Hexo archer主题配置

Hexo主题配置
字数统计: 852阅读时长: 3 min
2020/07/21 Share

我使用的主题hexo-theme-archer

添加github评论功能

新建仓库

在Github上新建一个仓库

创建OAuth Application

Gitalk需要一个Github Application，点击申请https://github.com/settings/applications/new

完成后会生成相应clientId和clientSecret

配置_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
gitalk_client_id: 'clientId'
gitalk_client_secret: 'clientSecret'
gitalk_admin: hugenye 
gitalk_owner: hugenye
#你要存放的项目名
gitalk_repo: gitalk
#每页多少个评论
gitalk_perPage: 15
#last #排序方式是从旧到新（first）还是从新到旧（last）
gitalk_pagerDirection: last
#如果当前页面没有相应的 isssue ，且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
gitalk_createIssueManually: false 
#是否启用快捷键(cmd|ctrl + enter) 提交评论.
gitalk_distractionFreeMode: true

就配置完成了。

添加utterance评论系统

配置步骤

创建Github仓库

上面提到，utterance使用Github保存评论，那我们就需要创建一个repository专门保存评论。

repository名称可以根据自己喜好取，这个后面会用到。

授权

用户在博客页面上输入评论，utterance拿到这个评论后，自动的提交到上面刚创建仓库的Issues里。

所以我们需要授权utterance应用能访问仓库的Issues。

点击链接： https://github.com/apps/utterances

主题配置

一，在主题的配置文件_config.yml文件中，加入如下配置：

位置可以放到其它评论配置的后面

1
2
3
4
5
6
7
#仓库名  用户名/仓库名
utteranc_repo:  hugenye/gitalk
utteranc_label: utteranc
#主题
utteranc_theme: github-light
#映射配置
utteranc_issue_term: pathname

hexo g &hexo d 配置完成

博客中插入音乐

使用Aplayer播放器，需要用到插件

切换到hexo目录，运行

1
npm install --save hexo-tag-aplayer

安装完成后，在需要添加的音乐的地方加上

1
{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

注意这个在MarkDown文件中插入要看一下这段文字是不是在Paragraph中设置的是Code Fences，要改成普通字段

举例网易云的音乐外部链接获取，一般获取到的是这个样子https://music.163.com/#/song?id=21311956，要把它改成http://music.163.com/song/media/outer/url?加上之前链接获取的id值+.mp3就是这样

1
http://music.163.com/song/media/outer/url?id=21311956.mp3

获取图片直接按F12获取图片链接就可以了

之后

hexo d –g就可以了

如果要加入歌单可以这样写

1
{% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [{"title": "轮回","author": "杭盖","url": "http://music.163.com/song/media/outer/url?id=31654650.mp3","pic": "http://p1.music.126.net/7LWp6SH2v2rcad5X8rubbg==/1385384662120695.jpg?param=130y130","lrc": "lyric.txt"},{"title": "She Is My Sin","author": "nightwish","url": "http://music.163.com/song/media/outer/url?id=4209157.mp3","pic": "http://p1.music.126.net/TK4eehKaatnOgvkUFW8AkQ==/1743825441666319.jpg","lrc":"She Is My Sin.txt"}]}{% endaplayerlist %}

歌词链接的获取需要检查代码，查看歌词对应位置的对应id值是什么然后拼接成字符串：http://music.163.com/api/song/lyric?id=4209157&lv=1&kv=1&tv=-1，之后打开网页另存为成.txt的文件，存放到hexo的资源目录中。

示例如我博客里的自我介绍（about）的使用。

原文作者：Hugenye

原文链接：http://hugenye.github.io/2020/07/21/hexo-deploy/

发表日期：July 21st 2020, 3:21:25 pm

更新日期：July 21st 2020, 6:26:24 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 添加github评论功能
    1. 1.1. 新建仓库
    2. 1.2. 配置_config.yml
  2. 2. 添加utterance评论系统
    1. 2.0.1. 创建Github仓库
    2. 2.0.2. 授权
    3. 2.0.3. 主题配置
  • 3. 博客中插入音乐
    • Total : 18
    2020
    2019
    python 阿里云服务器部署 面试题 Hexo Hexo主题配置 http 前端 JDK8新特性 工作 Bootstrap Python 面试
    Hexo JAVA sql