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

发表于 | 分类于 | 阅读次数：

如果您也是用 hexo 搭建的个人博客，不妨一试。

博客主题选择

目前我的个人博客是基于GitHub Pages，用hexo搭建的，详细教程：《手把手教你建github技术博客by hexo》，主题用的NexT.Pisces，之所以选择这套主题是喜欢他的简洁。

我有个需求

一直我有一个需求，想把我的博客文章都带上公众号二维码，这样方便大家订阅。之前做法，写了个公共，在文章详情调用。我也想过要不要自己也制作个属于自己的主题，看完《从零开始制作 Hexo 主题》，感觉没那么简单，html，JS，CSS我都是略知一二，制作主题恐怕要花精力，还不如用现有的主题，那如何用NexT主题，满足我这个需求呢？hexo主题的文章详情页面是post.swig，我先写了个公用的ad.swig：

1
2
3
4
5
6
7
8
9
10
11
12
<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引用，放到文章详情内容的后面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!--省略前面代码-->
 <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代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--省略前面代码-->
<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属性，分别有哪些值，什么意思搞明白就好了。

实际效果


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

相关链接



联系作者

我的微信公众号：吴小龙同学，欢迎关注交流，公号回复关键字「1024」有惊喜哦。