Posted on In Views:

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

一些特定的使用场景

我使用的主题是next，关于next的基本配置及用法可以参考文档,以下是我在使用hexo及next过程中碰到的特殊(文档中未找到描述)使用场景

自定义新建文章的默认基本信息

例如默认的categories几tags信息

可以修改{hexo}/scaffolds/post.md文件

自定义domain来访问博客

为达成这样的效果须要在对应git仓库下新建CNAME文件，而没有配置的情况下CNAME是会在新的发布中被删除的。

可以在{hexo}/source目录下简历CNAME文件（文件中写入你的domain），这样CNAME也会被发布

其他须要发布的东西理同上

修改主题layout中的模板文件

在next主题的目录下有一个layout目录，这是主题的模板文件。这些文件都是以swig结尾，SWIG是个帮助使用C或者C++编写的软件能与其它各种高级编程语言进行嵌入联接的开发工具。

如果需要修改主题的样式布局结构等，修改这些swig模板文件即可达到目的

在文章底部添加licence信息

我使用的是Creative Commons 知识共享许可协议，协议内容详见这里

找到${next}/layout/_macro/post.swig，将许可证官网复制的相关代码粘贴至文章指定位置即可

使用next与hexo的内置标签来书写markdown

next文档中的内置标签，更多内置标签参照hexo内置标签

开启首页的文章摘要

在主题配置中找到excerpt相关配置

处理摘要中的代码块

首页一般都会显示文章摘要，而摘要中如果包含一部分markdown的代码块，则可能出现一长串编码超出容器

这时可以修改swig模板，添加css的word-break属性来处理这种情况。

1
2
3
<div style="word-break:break-all;word-break:break-word;">
    {{ content.substring(0, theme.auto_excerpt.length) }}
</div>

开启多说评论的邮件提醒

参考这篇博客

修改文章字体相关属性

  1. 正文字体大小 _${next}/source/css/common/scaffolding/base.styl 中的body标签

添加页内链接

  1. 制作一个hash链接

    1
    <span id="hash">content</span>

  2. 在需要的地方链接到hash链

    1
    [hash](#hash)

添加网易云音乐播放器

如果只是加入单曲，只需要搜索歌曲，点开歌曲名，点击生成外链播放器，复制html代码（可以选择是否自动播放），将html代码无需任何修改放入markdown文章里就OK了。

如果想要加入歌单，就需要自己创建歌单，然后分享歌单，找到自己的分享动态，点进去可以看到有“生成外链播放器”这些字眼，其余操作就和上面一样了。不过，你的歌单有变化的话，这个外链的歌曲同样跟着变，这一点挺棒的。

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=578557134&auto=1&height=90"></iframe>

添加打赏功能

生成微信及支付宝付款二维码

主题配置文件中添加如下代码

1
2
3
# 打赏
wechatpay: http://img.willowspace.cn/hexo_reward_qrcode_img/wechatpay.jpeg
alipay: http://img.willowspace.cn/hexo_reward_qrcode_img/alipay.jpeg

打赏相关的模板为

{next}/layout/_macro/post.swig

1
2
3
4
5
6
7
8
<!-- 文章详情中打赏部分 -->
...
<div>
  {% if not is_index %}
    {% include 'reward.swig' %}
  {% endif %}
</div>
...

{next}/layout/_macro/reward.swig

1
2
3
4
<!-- 打赏 -->
{% if theme.alipay or theme.wechatpay %}
...
{% endif %}

关于next主题及hexo相关的问题，欢迎大家给我留言，一起讨论。