本博客部分修改内容

注:原文的主题为 Next,现在在使用 Even,所以配置可能有些地方不一样。

小建议

hexo new "标题" 的时候尽量取英文标题,在文章中再用 title: 指定中文标题,这样未来改标题好改,相应文章的多说评论也不会消失。

Github Pages 中增加 README.md

很多朋友的 hexo 博客都是建在 Github 上的,作为一个项目,README.md文件能够在 Github 上介绍博客的一些信息,但是贸然把文件放到 source 文件夹中会被 hexo 检测并转为 html 文档,我们在站点配置文件中跳过即可。

1
2
skip_render:
- README.md

网站底部字数统计

安装 hexo-wordcount
npm install hexo-wordcount --save

(博客主目录)/themes/next/layout/_partials/footer.swig中最后加上

1
2
3
4
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

更多参考:hexo-wordcount

添加文章更新时间

修改(博客主目录)/themes/next/layout/_macro/post.swig文件,在<span class="post-time">...</span>标签后添加

1
2
3
4
5
6
7
8
{%if post.updated and post.updated > post.date%}
<span class="post-updated">
&nbsp; | &nbsp; {{ __('post.updated') }}
<time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
{{ date(post.updated, config.date_format) }}
</time>
</span>
{% endif %}

根据博客配置文件中的 language 参数修改对应的语言配置文件(博客主目录)/themes/next/languages/zh_Hans.yml

1
2
post:
updated: 更新于

修改主题配置文件(博客主目录)/themes/next/_config.yml,增加一行

1
display_updated: true

写文章的时候可以直接在文章开头设置更新时间

1
updated: 2016-10-14 10:53:09

没有这参数的话将会显示md文件的修改日期

本地搜索

安装 hexo-generator-search
npm install hexo-generator-search --save

编辑主目录下站点配置文件_config.yml加入

1
2
3
search:
path: search.xml
field: post

添加音乐

歌曲

在markdown文件中要添加音乐处加入iframe标签

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&auto=0&id=34578162&height=66"></iframe>

需要居中可以在外添加<center>标签

1
2
3
<center>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=34578162&auto=0&height=66"></iframe>
</center>

其中id后数字为网易云音乐歌曲id,可以从Music处搜索歌名,例如搜索memories,我选择了MEMORIES - 『MEMORIES』- ALAN WALKER之后到达 http://music.daoapp.io/player?song=34578162 ,song后数字便是歌曲id。另外高度宽度可以自己根据博客样式更改,auto = 0是不自动播放,需要自动播放请改为auto = 1

你也可以直接从网易云音乐官网中搜索到歌曲,再生成外链播放器。有些版权保护的歌曲或歌单不支持生成外链,可以直接像上面的方法一样查 id 改代码即可。

示例:

歌单

操作和上面一样,搜索后选择歌单,找到id再替换。

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="http://music.163.com/outchain/player?type=0&id=144236857&auto=0&height=430"></iframe>

示例:

其他高深玩法参考 163music-APlayer-you-get-docker

歌词

要带歌词的话需要用到适用于 Hexo 的 Aplayer
如果歌词、音乐文件、音乐图片保存到博客服务器中,请参考上面的链接进去设置 post asset folders,这里用外链做例子。

安装 Aplayer:
npm install --save hexo-tag-aplayer

使用:

参数:

  • title : 音乐标题
  • author : 歌手名
  • url: 音乐文件路径
  • picture_url: 可选,音乐图片路径
  • narrow: 可选,狭窄的样式
  • autoplay: 可选,自动播放,不支持移动浏览器
  • width:xxx : 可选,前缀 width:,播放器的宽度 (默认: 100%)
  • lrc:xxx : 可选,前缀 lrc:,LRC 文件路径

例子:

建议使用七牛云存文件,直接用文件外链来设置,其中歌词文件内容参照 lrc 格式填写。

[00:00.00]童话镇
[00:05.00]演唱:陈一发儿
[00:10.00]作曲 : 暗杠
[00:15.00]作词 : 竹君
[00:22.93]听说白雪公主在逃跑
[00:26.43]小红帽在担心大灰狼
[00:29.83]听说疯帽喜欢爱丽丝 
[00:33.17]丑小鸭会变成白天鹅
[00:36.34]听说彼得潘总长不大
[00:40.23]杰克他有竖琴和魔法
[00:43.56]听说森林里有糖果屋
[00:46.82]灰姑娘丢了心爱的玻璃鞋
[00:50.39]只有睿智的河水知道
[00:53.68]白雪是因为贪玩跑出了城堡
[00:57.31]小红帽有件抑制自己
[01:00.73]变成狼的大红袍
[01:03.80]总有一条蜿蜒在童话镇里七彩的河
[01:11.00]沾染魔法的乖张气息
[01:14.42]却又在爱里曲折
[01:17.76]川流不息扬起水花
[01:20.87]又卷入一帘时光入水
[01:24.68]让所有很久很久以前
[01:28.12]都走到幸福结局的时刻
[01:33.18]music....
[01:47.00]听说睡美人被埋藏
[01:50.44]小人鱼在眺望金殿堂
[01:53.79]听说阿波罗变成金乌
[01:57.12]草原有奔跑的剑齿虎
[02:00.73]听说匹诺曹总说着谎
[02:04.16]侏儒怪拥有宝石满箱
[02:07.57]听说悬崖有颗长生树
[02:10.80]红鞋子不知疲倦地在跳舞
[02:14.43]只有睿智的河水知道
[02:17.84]睡美人逃避了生活的煎熬
[02:21.14]小人鱼把阳光抹成眼影
[02:24.58]投进泡沫的怀抱
[02:27.77]总有一条蜿蜒在童话镇里七彩的河
[02:35.06]沾染魔法的乖张气息
[02:38.43]却又在爱里曲折
[02:41.82]川流不息扬起水花
[02:44.87]又卷入一帘时光入水
[02:48.69]让所有很久很久以前
[02:52.00]都走到幸福结局的时刻
[02:55.46]总有一条蜿蜒在童话镇里梦幻的河
[03:02.47]分隔了理想分隔现实
[03:05.82]又在前方的山口汇合
[03:09.22]川流不息扬起水花
[03:12.36]又卷入一帘时光入水
[03:16.23]让所有很久很久以前
[03:19.38]都走到幸福结局的时刻
[03:22.72]又陌生
[03:24.52]啊~~啊~~啊~~啊~~

添加思维导图

利用之前App store 限免过的iOS版 MindNode,制作完导图之后,选择在MyMindNode上共享。

IMG_0165

上传文件后得到网址,打开后选择右上角导出按钮->Embed。

这里选择宽度和高度,再如添加音乐一样添加iframe标签即可,示例参考:2016年书单、公开课

本博客动态背景

百度云 下载particle.js,并移动到(博客主目录)/themes/next/source/js/src 文件夹下。

然后在(博客主目录)/themes/next/source/layout/_layout.swig中的最后body标签上添加

1
<script type="text/javascript" src="/js/src/particle.js"></script>

控制首页中文章显示量

在要显示的文字后添加<!--more-->,例如本文章:

1
2
3
4
5
6
7
8
---
title: Hexo 博客补丁
date: 2016-09-30 22:46:29
tags: [hexo]
---
本博客大部分的修改都在这里找到喔!
<!--more-->