字數(shù)統(tǒng)計和閱讀時長(網(wǎng)站底部/文章內(nèi))

效果如圖

文章內(nèi)

post-wordcount.png

網(wǎng)頁頂部

page-wordcount.png

安裝插件

npm install hexo-symbols-count-time --save

修改 站點配置文件

symbols_count_time:
 #文章內(nèi)是否顯示
  symbols: true
  time: true
 # 網(wǎng)頁底部是否顯示
  total_symbols: true
  total_time: true

修改 主題配置文件

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  #文章中的顯示是否顯示文字（本文字數(shù)|閱讀時長） 
  item_text_post: true
  #網(wǎng)頁底部的顯示是否顯示文字（站點總字數(shù)|站點閱讀時長） 
  item_text_total: false
  # Average Word Length (chars count in word)
  awl: 4
  # Words Per Minute
  wpm: 275

文章底部添加版權信息

效果如圖

copyright.png

修改 主題配置文件

# 把 enable: 設為true
post_copyright:
  enable: true
  license: <a  rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

網(wǎng)頁底部信息隱藏

只需要把 主題配置文件的相關數(shù)據(jù)改為false就行

footer:
  since: 2018
  # Icon between year and copyright info.
  icon:
    name: user
    animated: false
    color: "#808080"
  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true
theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

給文章增加陰影效果

效果如圖

post-shadow.png

修改custom.styl 文件，具體為themes/next/source/css/_custom/custom.styl

// 為文章添加陰影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

為博客添加寵物

效果如圖

live2d.png

安裝依賴包,在站點根目錄，打開Git Bash ，安裝hexo-helper-live2d

npm install --save hexo-helper-live2d

在站點配置文件或者主題配置文件添加以下內(nèi)容

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

安裝需要的寵物文件

npm install {packagename} 

如效果圖所示的寵物名為haruto， 則為 npm install live2d-widget-model-haruto,其他寵物包點擊live2d-widget-models。如果需要修改寵物的位置，可以在display下添加

# 水平位置
hOffset: 0
# 垂直位置
vOffset: -20

詳細內(nèi)容可參考hexo-helper-live2d

添加網(wǎng)站已運行時間

效果如圖

counttime.png

在themes/layout/_parrials/footer.swing 中添加

<span id="sitetime"></span>
<script language=javascript>
  function siteTime(){
    window.setTimeout("siteTime()", 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth()+1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    var t1 = Date.UTC(2018,06,07,12,00,00); // 設置建立網(wǎng)站的時間
    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = t2-t1;
    var diffYears = Math.floor(diff/years);
    var diffDays = Math.floor((diff/days)-diffYears*365);
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
    document.getElementById("sitetime").innerHTML=" 已運行"+diffYears+" 年 "diffDays+" 天 "+diffHours+" 小時 "+diffMinutes+" 分鐘 "+diffSeconds+" 秒";
  }
  siteTime();
</script>

把代碼放在你想要的位置，插入位置不同，效果顯示的位置也會不同。若想要顯示為簡體或者英文，只要把對應的文字修改就行。

添加標簽云

效果如圖

tag-cloud.png

在next/layout/page.swig中，找到

<div class="tag-cloud-tags">
              {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
            </div>
          

如果你想卷標頁先顯示標簽云，再顯示基本的卷標頁，可以在這段代碼之前添加

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

如果是先顯示默認的卷標頁，再顯示標簽云，則把上面代碼添加到后面。

如果你只想顯示標簽云就行，可以把

<div class="tag-cloud-tags">
              {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
            </div>

刪掉就行。

修改界面內(nèi)容顯示區(qū)域寬度

Next主題默認的設置，兩邊留白的區(qū)域很大。當然我們可以修改設置
在themes\next\source\css\_custom的custom.styl添加下面參數(shù)

// 屏幕寬度小于1600px
$content-desktop = 700px

// 屏幕寬度大于或等于 1600px
$content-desktop-large = 900px

修改對應的參數(shù)就行，此方法不適用于Pisces主題。

添加文章時，自動打開markdown編輯器

找到博客根目錄，打開scripts活頁夾(沒有的話，自己創(chuàng)建一個)。

創(chuàng)建一個JavaScript文件，可任意命名。

打開所創(chuàng)建的JavaScript文件，輸入以下內(nèi)容

var spawn = require('child_process').exec;

//根據(jù)自己安裝的hexo版本選擇
// Hexo 2.x 復制這段
hexo.on('new', function(path){
spawn('start "" "markdown編輯器絕對路徑" ' + path);
});

// Hexo 3 復制這段
hexo.on('new', function(data){
  spawn('start "" "markdown編輯器絕對路徑" ' + data.path);
});

注意: markdown編輯器絕對路徑 格式為(例如打開Typora)

C:\\Program Files\\Typora\\Typora.exe   

添加在線聯(lián)系功能

一個在線的聯(lián)系功能:DaoVoice

注冊DaoVoice , 獲取app_id

點擊 http://www.daovoice.io/ ,并點擊注冊。可以填入邀請碼：98657237

得到 app_id

daovoice_id.png

修改head.swig

修改next\layout_partials\head\head.swig 文件, 添加以下內(nèi)容

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "http://widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

修改_config.yml

在主題配置文件中，添加以下內(nèi)容

# daovoice 配置
daovoice: true
daovoice_app_id:   # 填入剛才的app_id

部署到網(wǎng)站

hexo clean && hexo g && hexo d 就能看到效果了，網(wǎng)頁右下角多了個 圖標

具體修改圖表的樣式，位置?？梢栽赿aovoice網(wǎng)頁中 應用設置-聊天設置 中配置

daovoice2.png