NexT 高級配置

前一篇文章介紹了NexT的基本配置，其主要涉及兩個配置文件第一個是主目錄下的_config.yml，另外一個是咱們的主題配置文件thems/next/_config.yml，接下來咱們繼續深刻。

添加社交網址

在thems/next/_config.yml查找 social，找到以下代碼：

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  #GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
複製代碼

去掉 social 的註釋並將你須要展現的信息網址註釋去掉，能夠修更名稱和網址。

效果如圖：

頁面底部添加訪問量

在thems/next/_config.yml查找 busuanzi

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye
複製代碼

效果如圖：

爲文章添加評論與閱讀次數

在leancloud上面註冊賬號，新建一個應用，找到應用對應的appid和appkey，而後在thems/next/_config.yml查找 valine，將填入appid和appkey如下代碼中，相應字段設爲true：

valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid:  # your leancloud application appid
  appid:  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitor: true # leancloud-counter-security is not supported for now. 
複製代碼

爲頁面添加搜索功能

在thems/next/_config.yml查找 local_search，並將enable設爲true。

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false
複製代碼

而後訪問註釋提供的網址，按它的步驟操做。

文章分享連接

在thems/next/_config.yml查找 needmoreshare，並將enable設爲true。

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

複製代碼

而後訪問註釋提供的網址，按它的步驟操做。

博客頁腳記時

打開 \themes\next\layout\_partials\footer.swig，在最下面添加以下代碼：

<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("12/03/2018 00:00:00");//此處修改你的建站時間或者網站上線時間
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "Running for "+dnum+" Days ";
        document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";
    }
    setInterval("createtime()",250);
</script>
複製代碼

並將如下代碼放在這個文件你喜歡的位置，而後查看效果。

<div>
<span id="timeDate"></span><span id="times"></span>
</div>
複製代碼

NexT高級配置就介紹這麼多，至此，咱們已搭建出一個比較完整的博客，而後接下來就能夠快樂的寫博客啦！