1.動態背景

開啟 next/layout/_layout.swig 在 < /body>之前新增程式碼 然後開啟 /next/_config.yml檔案：（修改如下）

2.實現點擊出現桃心效果

實現方法： 在網址輸入如下：http://7u2ss1.com1.z0.glb.clouddn.com/love.js 將裡面程式碼copy一下，進入/themes/next/source/js/src建立love.js檔案並將程式碼複製進love.js，然後開啟\themes\next\layout_layout.swig檔案,在末尾（在前面引用會出現找不到的bug）新增以下程式碼：

<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
 

3. 修改文章內連結文字樣式

修改檔案 themes\next\source\css_common\components\post\post.styl，在末尾新增如下css樣式，：

// 文章內連結文字樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
 

其中選擇.post-body 是為了不影響標題，選擇 p 是為了不影響首頁“閱讀全文”的顯示樣式,顏色可以自己定義

4.在每篇文章末尾統一新增“本文結束”標記

在路徑 \themes\next\layout_macro 中新建 passage-end-tag.swig 檔案,並新增以下內容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>
 

接著開啟\themes\next\layout_macro\post.swig檔案，在post-body 之後， post-footer 之前新增如下畫程式碼（post-footer之前兩個DIV）：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然後開啟主題配置檔案（_config.yml),在末尾新增:

# 文章末尾新增“本文結束”標記
passage_end_tag:
  enabled: true

5.修改作者頭像並旋轉

開啟\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在裡面新增如下程式碼：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 設定迴圈動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束 
    (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite為迴圈播放) ]*/


  /* 滑鼠經過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 滑鼠經過停止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 滑鼠經過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

6.在網站底部加上訪問量

開啟\themes\next\layout_partials\footer.swig檔案,在copyright前加上畫紅線這句話：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然後再合適的位置新增顯示統計的程式碼，如圖： 程式碼：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在這裡有兩中不同計算方式的統計程式碼：

1. pv的方式，單個使用者連續點選n篇文章，記錄n次訪問量

<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>

2.uv的方式，單個使用者連續點選n篇文章，只記錄1次訪客數

<span id="busuanzi_container_site_uv">
  本站總訪問量<span id="busuanzi_value_site_uv"></span>次
</span>

7.網站底部字數統計

切換到根目錄下，然後執行如下程式碼：

$ npm install hexo-wordcount --save

然後在/themes/next/layout/_partials/footer.swig檔案尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">部落格全站共{{ totalcount(site) }}字</span>
</div>