Hexo+yilia主題網站進階教程

話不多說，下面的配置將會讓你的網站提高n個檔次！

【所有文章】按鈕安裝

你初始化的文章，所有文章按鈕點開是有問題的，主要是你配置文件裏面少了下面的內容

在博客根目錄找到_config.yml文件，然後打開文件，在其最下方添加下面代碼段：

jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

然後hexo d上傳項目，更新後再次點擊所有文章目錄，會神奇的發現，哇哦奧，所有文章都列出來了。

添加頭像，讚賞二維碼

打開你的項目根目錄中Blogthemeshexo-theme-yiliasource，在其中可添加一個 assets文件夾，裏面存放圖片資源即可，比如我的是創建了assets文件夾，然後在其中又創建img文件夾，意味把圖片放到Blogthemeshexo-theme-yiliasourceassetsimg目錄下。

然後打開Blogthemeshexo-theme-yilia下的_config.yml文件，在其中配置：

#你的頭像url
avatar: "/assets/img/mnn.jpg"

# 打賞
# 打賞type設定：0-關閉打賞； 1-文章對應的md文件裏有reward:true屬性，纔有打賞； 2-所有文章均有打賞
reward_type: 2
# 打賞wording
reward_wording: '謝謝你請我吃糖果'
# 支付寶二維碼圖片地址，跟你設置頭像的方式一樣。比如：/assets/img/alipay.jpg
alipay:
# 微信二維碼圖片地址
weixin: "/assets/img/wx.png"

字數統計和閱讀時長

安裝 hexo-wordcount

在博客根目錄下打開Git Bash Here 輸入命令下面命令：

npm i --save hexo-wordcount

配置文件

在themeshexo-theme-yilialayout_partialpost目錄下下創建word.ejs文件（具體爲什麼是ejs文件而不是js文件有待大家一起研究）：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字數統計: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  閱讀時長: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然後在themeshexo-theme-yilialayout_partial/article.ejs中添加

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
         <!-- 需要添加的位置 -->
         <!-- 開始添加字數統計-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
          <!-- 添加完成 -->
        <% } %>
      </header>

開啓功能

在項目根目錄的_config.yml中添加下面代碼：

#是否開啓字數統計
#不需要使用，直接設置值爲false，或註釋掉
word_count: true

一切配置完成就能看到項目中出現的文章字數以及建議閱讀時長。

網站訪問數量

引入不蒜子

在themeshexo-theme-yilia/_config.yml中添加屬性

本身yilia主題沒有在_config.yml保留busuanzi的屬性，所以在文件末端添加：

#開啓不算子訪問統計
busuanzi:
  enable: true

將下面代碼添加在 themeshexo-theme-yilialayout_partial/footer.ejs的末尾

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

添加不算子網站訪問量統計腳本

在themeshexo-theme-yilialayout_partial/footer.ejs末尾</footer>與其上面的</div>之間放入代碼：

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子統計 -->
        <span id="busuanzi_container_site_pv">
                本站總訪問量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站訪客數<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="/busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

根據不同的需求，你看你需要在不同的位置顯示你的文章閱讀量，此處以在右上角的日期區域添加文章閱讀量爲例：
在themeshexo-theme-yilialayout_partial/post/date.ejs 原有代碼的開頭(不需要把新代碼放入原代碼塊中，而是和原代碼獨立的兩塊）加入：

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <!-- 不蒜子統計 -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i> 閱讀數：<span id="busuanzi_value_page_pv"></span>次
        </span>
<% } %>

然後通過hex g生成新的文件，在進行hexo d提交到github平臺，刷新頁面就能看到你添加的效果了。

添加版權聲明

在themeshexo-theme-yilia/_partial/article.ejs文件標註處加入下面內容：

<%
        var sUrl = url.replace(/index\.html$/, '');
        sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
      %>
      <!--添加代碼開始-->
      <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
        <div class="declare">
          <strong>本文作者：</strong>
          <% if(config.author != undefined){ %>
            <%= config.author%>
          <% }else{%>
            <font color="#5b10b0"></font>
          <%}%>
          <br>
          <strong>本文鏈接：</strong>
          <%= sUrl%>
          <br>
          <strong>版權聲明：</strong>
          本作品採用
          <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
          進行許可。轉載請註明出處！
          <% if(theme.licensee_img != undefined){ %>
            <br>
            <a rel="license" href="<%= theme.licensee_url%>"><img alt="知識共享許可協議" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
          <% } %>
        </div>
      <% } else {%>
        <div class="declare" hidden="hidden"></div>
      <% } %>

然後修改themeshexo-theme-yilia/_config.yml配置文件，在配置文件中添加：

## 版權聲明
declare_type: 1  #版權基礎設定：0-關閉聲明； 1-文章對應的md文件裏有declare: true屬性，纔有版權聲明； 2-所有文章均有版權聲明
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/          # 當前應用的版權協議地址。
licensee_name: '知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議'  # 版權協議的名稱
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png      # 版權協議的Logo

在找到你項目根目錄下的_config.yml配置文件，填寫url地址：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mengniannian.cn

提交就ok了，效果圖如下：

增加gitalk評論插件

yilia主題中提供五種評論功能：

1、多說(關閉了) 2、網易雲跟帖（停更了） 3、暢言(需要網站的備案信息) 4、Disqus 5、Gitment。

前三種基本不能使用了，後兩種不太熟悉，所以就選擇了適合大衆的gitalk，方便，快捷，用着舒服。

OAuth application註冊

首先使用之前要先註冊一個賬號，登錄自己的github賬戶，點擊頭像-->Settings-->Developer settings-->OAuth App-->New OAuth App，或點擊註冊

Application name：可以隨意填寫
Homepage URL：個人博客地址（域名）
Application description：可填可不填，不是關鍵，若填，可填個人博客的相關描述
Authorization callback URL：個人博客地址（域名）
一切設置完成之後點擊Register application，註冊完成後，會出現兩個關鍵信息（個人博客配置評論功能之關鍵，就不放圖了）

點擊Register application註冊完成後會出現兩個關鍵信息，Client ID和Client Secret，至關重要。

然後在yilia主題下的_config.yml文件中配置代碼：

#6、配置gitalk
gitalk:
  enable: true
  client_id: OAuth application #註冊成功獲得
  client_secret: OAuth application #註冊成功獲得
  repo: mengnn.github.io #存儲博客評論的倉庫地址，可以是存儲博客的倉庫
  owner: mengnn #github賬戶名
  admin: mengnn #github賬戶名
  distractionFreeMode: true

配置文件

首先在yilia主題下的layout-->_partial-->post目錄下新增gitalk.ejs文件：

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
var gitalk = new Gitalk({
  clientID: '<%=theme.gitalk.clientID%>',
  clientSecret: '<%=theme.gitalk.clientSecret%>',
  repo: '<%=theme.gitalk.repo%>',
  owner: '<%=theme.gitalk.owner%>',
  admin: ['<%=theme.gitalk.admin%>'],
  id: md5(window.location.pathname),
  distractionFreeMode: <%=theme.gitalk.distractionFreeMode%>
})

gitalk.render('gitalk-container')
</script>

然後修改yilia主題下source-src-->css目錄下comment.scss文件：

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
    padding: 0 30px !important;
    min-height: 20px;
}

#SOHUCS {
    #SOHU_MAIN .module-cmt-list .block-cont-gw {
        border-bottom: 1px dashed #c8c8c8 !important;
    }
}

最後在layout-->_partial目錄下的article.ejs`文件內新增gitalk相關的配置代碼：

<% if (theme.gitalk.enable){ %>
       <div id="gitalk-container"></div>
       <%- include post/gitalk.ejs %>
  <% } %>

到這裏，gitalk就已經全部配置完成，然後hexo g -->hexo d提交代碼，打開你的網站，在下面看到如下圖所示，就說明你已經配置成功，第一次評論需要登錄github賬號，登錄一次就OK了。

增加RSS

RSS（簡易信息聚合（也叫聚合內容）是一種RSS基於XML標準，在互聯網上被廣泛採用的內容包裝和投遞協議。RSS(Really Simple Syndication)是一種描述和同步網站內容的格式，是使用最廣泛的XML應用。RSS搭建了信息迅速傳播的一個技術平臺，使得每個人都成爲潛在的信息提供者。發佈一個RSS文件後，這個RSS Feed中包含的信息就能直接被其他站點調用，而且由於這些數據都是標準的XML格式，所以也能在其他的終端和服務中使用，是一種描述和同步網站內容的格式。

在 Hexo 根目錄打開命令行工具，執行以下命令：

npm install hexo-generator-feed --sava
hexo clean
hexo g

命令運行完成後，會在你根目錄下面的public文件夾裏面看到一個atom.xml文件。

依次打開項目根目錄下的themeshexo-theme-yiliaconfig.yml，在subnav項目下添加 RSS 配置信息：

#SubNav
subnav:
  rss: /atom.xml

重新生成並構建頁面，就可以看到 RSS 的信息了。

搜索引擎

添加sitemap

在 Hexo 根目錄打開命令行工具，執行以下命令：

npm install hexo-generator-sitemap --save
hexo clean
hexo g

查看根目錄下的public文件夾，可以看到 sitmap.xml文件。
sitemap 的初衷是給搜索引擎看的，爲了提高搜索引擎對自己站點的收錄效果，我們最好手動到 google 和百度等搜索引擎提交 sitemap.xml。

百度搜索引擎提交

註冊百度站長號，註冊完成後進入站點管理，添加自己的網站，然後按照步驟完成網站認證即可。

網站認證完成後，進入網站管理界面，點擊鏈接提交-->自動提交-->sitemap,然後在填寫框內填寫自己的文件地址，比如我的是https://www.mengniannian.cn/s...，如下圖：

按照提示信息，填寫完成提交就ok了！！！

Hexo+yilia主題網站進階教程

【所有文章】按鈕安裝

添加頭像，讚賞二維碼

字數統計和閱讀時長

安裝 hexo-wordcount

配置文件

開啓功能

網站訪問數量

引入不蒜子

添加不算子網站訪問量統計腳本

添加版權聲明

增加gitalk評論插件

OAuth application註冊

配置文件

增加RSS

搜索引擎

添加sitemap

百度搜索引擎提交

今天！通義靈碼在北京、成都、杭州三城開講啦

【BI 可視化插件】怎麼做？手把手教你實現

Hexo+yilia主題網站進階教程

Hexo+yilia主題網站綁定個性域名

手把手教你使用Hexo和github搭建免費個人博客網站

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結