如果您也是用 hexo 搭建的个人博客，不妨一试。
博客主题选择
目前我的个人博客是基于GitHub Pages，用hexo搭建的，详细教程：《手把手教你建github技术博客by hexo》，主题用的NexT.Pisces，之所以选择这套主题是喜欢他的简洁。
我有个需求
一直我有一个需求，想把我的博客文章都带上公众号二维码，这样方便大家订阅。之前做法，写了个公共，在文章详情调用。我也想过要不要自己也制作个属于自己的主题，看完《从零开始制作 Hexo 主题》，感觉没那么简单，html，JS，CSS我都是略知一二，制作主题恐怕要花精力，还不如用现有的主题，那如何用NexT主题，满足我这个需求呢？hexo主题的文章详情页面是post.swig，我先写了个公用的ad.swig：
<div>
<h1><b>联系我</b></h1>
1、Android技术交流剩者为王④群：331553260。
<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=d129018d31e801e676743da4b05a1063f88ae52ca0407579666545596bdb7a52"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="剩者为王④群" title="剩者为王④群"></a>
<img src="https://user-gold-cdn.xitu.io/2017/4/24/ebb002fe754241b1115c6a46d1493121.png" style="margin-top: 20px; width: 40%; height: 40%"/>
<br>
2、我的小密圈：更多分享只对你公开，￥99/永久。
<img src="https://user-gold-cdn.xitu.io/2017/4/20/d0c6c0fac33f8e624260032e0158c06c.png" style="margin-top: 20px; width: 40%; height: 40%"/>
<br>
</div>
然后在post.swig引用，放到文章详情内容的后面：
<!--省略前面代码-->
<div class="post-body" itemprop="articleBody">
{# Gallery support #}
{% if post.photos and post.photos.length %}
<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{% set COLUMN_NUMBER = 3 %}
{% for photo in post.photos %}
{% if loop.index0 % COLUMN_NUMBER === 0 %}<div class="post-gallery-row">{% endif %}
<a class="post-gallery-img fancybox"
href="{{ url_for(photo) }}" rel="gallery_{{ post._id }}"
itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
<img src="{{ url_for(photo) }}" itemprop="contentUrl"/>
</a>
{% if loop.index0 % COLUMN_NUMBER === 2 %}</div>{% endif %}
{% endfor %}
{# Append end tag for `post-gallery-row` when (photos size mod COLUMN_NUMBER) is less than COLUMN_NUMBER #}
{% if post.photos.length % COLUMN_NUMBER > 0 %}</div>{% endif %}
</div>
{% endif %}
{% if is_index %}
{% if post.description and theme.excerpt_description %}
{{ post.description }}
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}">
{{ __('post.read_more') }} »
</a>
</div>
<!--/noindex-->
{% elif post.excerpt %}
{{ post.excerpt }}
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
{{ __('post.read_more') }} »
</a>
</div>
<!--/noindex-->
{% elif theme.auto_excerpt.enable %}
{% set content = post.content | striptags %}
{{ content.substring(0, theme.auto_excerpt.length) }}
{% if content.length > theme.auto_excerpt.length %}...{% endif %}
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
{{ __('post.read_more') }} »
</a>
</div>
<!--/noindex-->
{% else %}
{% if post.type === 'picture' %}
<a href="{{ url_for(post.path) }}">{{ post.content }}</a>
{% else %}
{{ post.content }}
{% endif %}
{% endif %}
{% else %}
{{ post.content }}
<!--广告-->
{% include 'ad.swig' %}
{% endif %}
</div>
<!--省略后面代码-->
这样就能随便加什么，每天文章都有了，这样的做法基本解决了我的这个需求。
最初想法
其实我最初的想法把二维码固定在一个位置，前端不怎么会，一直没去弄，最终我还是花点时间去看了。_layout.swig是页面模板文件，固定二维码应该写在这个文件，于是我网上找了如何写固定内容，找到一个放在右下角代码，但与置顶按钮冲突，又想放到左下角，改改代码，看了效果，似乎不太搭，又改到右上角，页面两边平衡了，还是感觉那里不对劲，想了想，干脆放右边且垂直居中，改改代码，搞定，_layout.swig代码：
<!--省略前面代码-->
<head>
<!--省略部分代码-->
<style type="text/css">
.div_right_bottom {
width: 200px;
top: 50%;
right: 0px;
position: fixed;
margin-top: -100px;
_position: absolute;
}
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
<div class="div_right_bottom" align="center">
<img src="http://open.weixin.qq.com/qr/code/?username=MrWuXiaolong"/>
微信公众号
</div>
<!--省略前面代码-->
</body>
</html>
这些代码并不难，就把他当成Android xml属性，分别有哪些值，什么意思搞明白就好了。
实际效果
页面上下滑动，这个二维码始终固定在那里不动。
相关链接
手把手教你建github技术博客by hexo： http://wuxiaolong.me/2015/07/31/build-blog-by-hexo/
NexT主题： https://github.com/iissnan/hexo-theme-next
从零开始制作 Hexo 主题： http://www.ahonn.me/2016/12/15/create-a-hexo-theme-from-scratch/
我的博客： http://wuxiaolong.me/