部落格：固定位置增加二維碼

weixin_33861800發表於2017-04-24

如果您也是用 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屬性，分別有哪些值，什麼意思搞明白就好了。

實際效果


頁面上下滑動，這個二維碼始終固定在那裡不動。

相關連結

相關文章