【轉】hexo博客yili主題個性化自定義教程（1） ——借鑑中學習，初認yili主題

時間  2020-01-14
標籤 hexo 博客 yili 主題 個性化 自定義 教程 借鑑 學習 简体版
原文   原文鏈接

文章轉載於：hexo博客yili主題個性化自定義教程（1） ——借鑑中學習，初認yili主題

這個博客跌跌撞撞也弄了好多天了，因爲Next主題不知道什麼狀況，被我玩壞了。因此換了一個主題。
大名鼎鼎的yilia主題，崇尚簡約優雅，以及極致的性能，符合個人性格。之後很長一段時間都用這個主題啦。
接下來來講一下一些yili主題個性化自定義的方法和本身走過的坑。css

本教程適用於yilia主題html

<!--more-->node

前言

因爲yilia已經不維護了，坑還挺多的，因此下面這些方法都是我試過了纔敢拿出來的。
若是有錯誤，請原步驟返回檢查錯誤，或者參考官方教程↓
yilia主題github開源地址git

本篇收集了全網目前最全的攻略啦，各位湊活着看。
這是一個系列，第一步先借鑑一下別人的代碼，哈哈哈哈嗝。github

如何正確使用yilia主題

安裝

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yiliaweb

配置

修改hexo根目錄下的_config.yml ： theme: yilianpm

自定義配置

主題配置文件在主目錄下的_config.yml，請根據本身須要修改使用。 完整配置例子，能夠參考做者的博客json

主題配置詳細介紹

接下來我來講一下主題配置中的基本配置有哪些能夠自定義的地方，詳細看下面的備註
部分代碼我會用我本身的配置來說解具體用法segmentfault

# Header
// 這段代碼是左側欄的相關展現內容，後期能夠加上分類，關於等。每一個頁面後面是它的存放路徑
menu:
  主頁: /
  隨筆: /tags/隨筆/

# SubNav // 這段代碼是左側欄的相關聯繫方式圖標，後期能夠修改圖標等。
subnav:
  github: "#" //不須要就改爲 "#"這個是github
  weibo: "#" //微博
  rss: "#" //RSS
  zhihu: "#" //知乎
  #qq: "#" //QQ
  #weixin: "#" //微信
  #jianshu: "#" //簡書
  #douban: "#" //豆瓣
  #segmentfault: "#" //思否segmentfault
  #bilibili: "#" //嗶哩嗶哩
  #acfun: "#" //acfun
  #mail: "mailto:litten225@qq.com" //好比你想展現郵箱，就把這裏的地址改爲你本身的郵箱便可。前面的 mailto: 不要去掉
  #facebook: "#" //facebook
  #google: "#" //google
  #twitter: "#" //twitter
  #linkedin: "#" //linkedin

rss: /atom.xml

# 是否須要修改 root 路徑
# 若是您的網站存放在子目錄中，例如 http://yoursite.com/blog，
# 請將您的 url 設爲 http://yoursite.com/blog 並把 root 設爲 /blog/。
root: 

# Content

# 文章太長，截斷按鈕文字
excerpt_link: more //這個文字是能夠本身修改的，好比個人就改爲了展開全文
# 文章卡片右下角常駐連接，不須要請設置爲false，若是上面改爲了展開全文，這個建議改成false
show_all_link: '展開全文'
# 數學公式
mathjax: false
# 是否在新窗口打開連接
open_in_new: false

# 打賞
# 打賞type設定：0-關閉打賞； 1-文章對應的md文件裏有reward:true屬性，纔有打賞； 2-全部文章均有打賞
reward_type: 2
# 打賞wording
reward_wording: '謝謝你請我吃糖果' //這個是打賞時候顯示的文字，能夠修改
# 支付寶二維碼圖片地址，跟你設置頭像的方式同樣。好比：/assets/img/alipay.jpg ，網絡圖片直接用 https://xxx.png 便可
alipay: 
# 微信二維碼圖片地址
weixin: 

# 目錄
# 目錄設定：0-不顯示目錄； 1-文章對應的md文件裏有toc:true屬性，纔有目錄； 2-全部文章均顯示目錄
toc: 1
# 根據本身的習慣來設置，若是你的目錄標題習慣有標號，置爲true便可隱藏hexo重複的序號；不然置爲false
toc_hide_index: true
# 目錄爲空時的提示
toc_empty_wording: '目錄，不存在的…'

# 是否有快速回到頂部的按鈕
top: true

# Miscellaneous
baidu_analytics: '' # 百度分析
google_analytics: '' # 谷歌分析
favicon: /favicon.png # 站點logo

#你的頭像url
avatar:

#是否開啓分享
share_jia: true

#評論：一、多說；二、網易雲跟帖；三、暢言；四、Disqus；五、Gitment
#不須要使用某項，直接設置值爲false，或註釋掉
#具體請參考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#一、多說
duoshuo: false

#二、網易雲跟帖
wangyiyun: false

#三、暢言
changyan_appid: false
changyan_conf: false

#四、Disqus 在hexo根目錄的config裏也有disqus_shortname字段，優先使用yilia的
disqus: false

#五、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存儲評論的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 樣式定製 - 通常不須要修改，除非有很強的定製慾望…
style:
  # 左側欄頭像上面的背景顏色
  header: '#4d4d4d'
  # 右滑板塊背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的設置
slider:
  # 是否默認展開tags板塊
  showTags: false

# 智能菜單
# 如不須要，將該對應項置爲false
# 好比
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '全部文章'
  friends: '友鏈'
  aboutme: '關於我'

friends:
  友情連接1: http://localhost:4000/
  友情連接2: http://localhost:4000/
  友情連接3: http://localhost:4000/
  友情連接4: http://localhost:4000/
  友情連接5: http://localhost:4000/
  友情連接6: http://localhost:4000/

aboutme: 很慚愧<br><br>只作了一點微小的工做<br>謝謝你們 //這個是出如今 關於我 頁面的一句話 <br> 是換行的意思。

請照着上面的備註，一條一條修改看看效果，就能大概掌握最基礎的主題自定義啦。api

主題BUG修復

參考

1.運行服務器，發現出現錯誤提示

<%- partial('_partial/head') %>
<%- partial('_partial/header') %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> <%- partial('_partial/sidebar') %> <% } %>
<%- partial('_partial/footer') %>
<%- partial('_partial/mobile-nav') %> <%- partial('_partial/after-footer') %>

若是出現上述錯誤提示，說明少裝了插件，逐條執行如下命令安裝插件：

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

而後hexo clean清除清除緩存文件和已生成的靜態文件再次運行便可。

2.左滑塊「全部文章」按鈕的安裝

首先確保使用版本是否是大於6.2.
使用命令node -v檢查
而後在hexo的配置文件_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

重啓服務器便可

2.頭像不顯示

進入文章後，頭像就不顯示。
修改themesyilialayout_partialleft-col.ejs的第六行，改成
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
同時，還要修改themesyilialayout_partialmobile-nav.ejs
裏面的第10行，修改成
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">

3.打賞二維碼不顯示

修改themesyilialayout_partialarticle.ejs
找到<img class=」reward-img」`這個標籤，改後面src的值
支付寶的改爲這個
<%=theme.root%><%= theme.alipay%>
微信的改爲這個
<%=theme.root%><%= theme.weixin%>

4.微信分享不成功

由於百度網盤取消了生成二維碼的功能，致使以前的連接不可用了。
修改themesyilialayout_partialpostshare.ejs
把第49行中的//pan.baidu.com/share/qrcode?url=修改成
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
便可

5.在左側顯示總文章數

修改themes\yilia\layout\_partial\left-col.ejs
在

<nav class="header-menu">
    <ul>
    <% for (var i in theme.menu){ %>
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
    <%}%>
    </ul>
</nav>

後面加入

<nav>
    <a>總文章數 <%=site.posts.length%></a>
</nav>

效果以下
總文章數

6.添加來必力評論系統

yilia默認帶了幾個系統，但我是從next這個主題轉過來的，以前用的是來必力(livere)，不想換了，就得手動在yilia裏面加。
按網上的方法我試了很久才成功.....緣由就是他們的教程不夠詳細。
首先是去註冊livere，而後獲取到本身的id
查看ID方法，右上角頭像-管理頁面-代碼管理獲取
來必力得到ID
新建\themes\yilia\layout\_partial\post\livere.ejs
內容直接複製代碼管理裏面的內容
來必力_內容
而後編輯themes\yilia\layout\_partial\article.ejs
找到<% if (!index && post.comments){ %> 在它的下方加入如下代碼

<% if (theme.livere){ %>
  <%- partial('post/livere', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
    }) %>
  <% } %>

接下來須要在主題配置文件_config.yml中添加如下內容：

#7.來必力
livere: 這裏填你的ID

並把其餘的評論系統代碼屏蔽
屏蔽其餘評論系統代碼
而後hexo clean和hexo d從新部署便可。
效果如圖
來必力評論效果

7.添加字數統計

安裝hexo-wordcount
npm i --save hexo-wordcount

!!Node 版本7.6.0以前,請安裝 2.x 版本 (Node.js v7.6.0 and previous)!!
npm install hexo-wordcount@2 --save

而後打開themes\yilia\layout\_partial\left-col.ejs
若是須要在左側添加的話，在以前顯示總文章數的代碼位置下添加代碼
<a>總字數 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
即

<nav>
    <a>總文章數 <%=site.posts.length%></a>
    <a>總字數 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
</nav>

顯示單篇字數和預計閱讀時長的話
編輯themes\yilia\layout\_partial\article.ejs`
在第一個</header>下，添加代碼

<div align="center" class="post-count">
    字數：<%= wordcount(post.content) %>字 | 預計閱讀時長：<%= min2read(post.content) %>分鐘
</div>

便可
效果以下
顯示單篇字數和預計閱讀時長

8.取消訪問litten.me:9005

關於訪問litten.me:9005的問題，這個主題的做者以前爲了更好地完善這個主題，有時候會收集用戶的客戶端信息，詳情請見這裏，若是不想被統計，就將themes\yilia\source-src\js\report.js裏面的內容清空便可

主題簡單美化與完善

參考：
Yilia個性設置- CSDN博客

1.添加百度統計

先打開百度統計 ，添加站點，複製得到的代碼，粘貼到
\themes\yilia\layout\_partial\footer.ejs中以下代碼塊<div>和</div>便可（若是沒有能夠本身寫上去。）
添加百度統計代碼

<div>
      這裏粘貼代碼
  </div>

便可
注意：代碼塊<div>和</div>必定要在<footer>和</fotter>之間

2.修改文章標題樣式

打開\themes\yilia\source-src\css\article.scss添加以下樣式（喜歡什麼樣式能夠本身修改）：

.article-title_code_ant {
  color: black;
  margin-left: 0px;
  font-weight: 50;
  line-height: 1em;
  margin-bottom: 1em;
  font-size: 27px;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
  &:hover{
    color: #B0A0AA;
  }
}

再打開\themes\yilia\layout\_partial\article.ejs，
搜索<%- partial('post/title', {class_name: 'article-title'}) %>
修改成

<%# 註釋掉-partial('post/title', {class_name: 'article-title'}) %>
<%# 修改模板 %>
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>

如圖所示
修改文章標題樣式代碼

便可，可是如今發現標題的顏色爲a標籤設置顏色，讓咱們繼續來解決。
繼續修改文件，找到\themes\yilia\source\main.0cf68a.css，打開編輯，添加以下代碼：

.article-inner h1.article-title_code_ant, .article-title_code_ant {
    color: #000000;
    margin-left: 0;
    font-weight: 50;
    line-height: 1em;
    margin-bottom: 1em;
    font-size: 27px;
    transition: color .3s
}

解決√
效果以下
修改文章標題樣式效果

3.刪除或修改博客底部Hexo Theme Yilia by Litten

打開\themes\yilia\layout\_partial\footer.ejs修改以下：

<div class="footer-right">
</div>

固然也能夠改爲其餘內容。其餘內容怎麼修改之後再慢慢說(好比建站時間什麼的。)
固然各位也能夠先本身嘗試一下。

4.文章添加版權聲明

在\themes\yilia\layout\_partial\article.ejs中以下的位置添加代碼

<% } %>
    
    <-- 在此處添加代碼-->
    
    <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

添加的代碼以下

<%# 添加文章版權 %>
        <%
          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>
            <blockquote>
                <strong>本文做者：</strong>
                <% if(config.author != undefined){ %>
                  <%= config.author%>
                <% }else{%>
                  <font color="red">請在博客根目錄「_config.yml」中填入正確的「author」</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>
                <% } %>
            </blockquote>
            
            <%# 添加文章底部標語 %>
            <hr>
                <center><strong><%= theme.licensee_slogan%></strong></center>
            <hr>
          </div>
        <% } else {%>
          <div hidden="hidden"></div>
        <% } %>

具體如圖
文章添加版權聲明代碼
繼續修改yilia主題配置文件_config.yml，添加以下代碼

#版權
# 版權基礎設定：0-關閉聲明； 1-文章對應的md文件裏有declare: true屬性，纔有版權聲明； 2-全部文章均有版權聲明
declare_type: 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
licensee_slogan: 樂於分享,專一互聯網生活.  # 標語

若是須要章對應的md文件裏有declare: true屬性，纔有版權聲明的話，在須要進行版權聲明的文章的md文件頭部，設置屬性declare: true便可。

未完待續......

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