Hexo+yilia主題網站進階教程

時間  2019-11-16
標籤 hexo+yilia hexo yilia 主題 網站 進階 教程 欄目 網站開發 简体版
原文   原文鏈接

話很少說，下面的配置將會讓你的網站提升n個檔次！css

【全部文章】按鈕安裝

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

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

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上傳項目，更新後再次點擊全部文章目錄，會神奇的發現，哇哦奧，全部文章都列出來了。github

添加頭像，讚揚二維碼

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

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

#你的頭像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文件有待你們一塊兒研究）：hexo

<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中添加app

<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中添加下面代碼：async

#是否開啓字數統計
#不須要使用，直接設置值爲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主題中提供五種評論功能：

一、多說(關閉了) 二、網易雲跟帖（停更了） 三、暢言(須要網站的備案信息) 四、Disqus 五、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文件中配置代碼：

#六、配置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了！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程