博客：固定位置增長二維碼

時間 2019-11-24

標籤博客固定位置增長二維简体版

原文原文鏈接

若是您也是用 hexo 搭建的我的博客，不妨一試。css

博客主題選擇

目前個人我的博客是基於GitHub Pages，用hexo搭建的，詳細教程：《手把手教你建github技術博客by hexo》，主題用的NexT.Pisces，之因此選擇這套主題是喜歡他的簡潔。html

我有個需求

一直我有一個需求，想把個人博客文章都帶上公衆號二維碼，這樣方便你們訂閱。以前作法，寫了個公共，在文章詳情調用。我也想過要不要本身也製做個屬於本身的主題，看完《從零開始製做 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>

二、個人小密圈：更多分享只對你公開，￥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引用，放到文章詳情內容的後面：git

<!--省略前面代碼-->
 <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>
<!--省略後面代碼-->複製代碼

這樣就能隨便加什麼，天天文章都有了，這樣的作法基本解決了個人這個需求。github

最初想法

其實我最初的想法把二維碼固定在一個位置，前端不怎麼會，一直沒去弄，最終我仍是花點時間去看了。_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屬性，分別有哪些值，什麼意思搞明白就行了。hexo

實際效果

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

博客：固定位置增長二維碼

博客主題選擇

我有個需求

最初想法

實際效果

相關連接