微信公众号

博客:固定位置增加二维码

如果您也是用 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') }} &raquo;
</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') }} &raquo;
</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') }} &raquo;
</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属性,分别有哪些值,什么意思搞明白就好了。

实际效果


页面上下滑动,这个二维码始终固定在那里不动。

相关链接