hexo博客yilia主題深度設置

本文轉載自查看原文 2019-12-16 21:29 1091 博客/ blog

轉載：Shuyan

http://dongshuyan.com/2019/05/24/hexo博客注意事項/

1、微信分享異常

這里是themes\yilia\layout\ _partial\post\share.ejs出了問題。
而且是兩個問題：

1.1 首先是百度網盤取消了生成二維碼的功能。

解決方法是修改themes\yilia\layout_partial\post\share.ejs
文件中的

1	//pan.baidu.com/share/qrcode?url=

修改為

1	//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

1.2 我這里分享的網址有問題。方法一

直接在根目錄的配置文件中添加你網站的url信息。

1.3 我這里分享的網址有問題。方法二

解決方法是在文件中的

1 2	var sUrl = url.replace(/index\.html$/, ''); sUrl = /^(http:\|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;

下面加一行（這里的20是根據自己網址長度計算得到的）

1	test=sUrl.substring(20);

然后上面就變成了：

<%
 var sUrl = url.replace(/index\.html$/, '');
 sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;
 test=sUrl.substring(20);
%>

然后將上一步中的

1	'//api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl

改為

1	'//api.qrserver.com/v1/create-qr-code/?size=150x150&data=你的主頁網址' + test

舉例，我的網址是（dongshuyan.github.io）那么就改為：

<div class="page-modal wx-share js-wx-box">
 <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
 <p>掃一掃，分享到微信</p>
 <div class="wx-qrcode">
 <img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://dongshuyan.github.io/' + test %>" alt="微信分享二維碼">
 </div>
</div>

2.點擊“所有文章”無顯示

themes\yilia\ _config.yml文件里面

1	mathjax: true

改成

1	mathjax: false

3.在左側顯示總文章數

將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>

后面加上

1
2
3

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

4.怎么置頂文章

4.1安裝插件

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

4.2配置置頂標准

打開：/themes/*/layout（/_macro）/post.ejs
直接在最前面加入以下代碼即可

<% if (page.top) { %>
 <i class="fa fa-thumb-tack"></i>
 <font color=7D26CD>置頂</font>
 <span class="post-meta-divider">|</span>
<% } %>

4.3配置文章

然后在需要置頂的文章的Front-matter中加上top選項即可
top后面的數字越大，優先級越高

---
title: 2019
date: 2019-02-14 16:10:03
top: 5
---

4.4優先級配置

修改根目錄配置文件/_config.yml,top值-1標示根據top值倒序（正序設置為1即可），同樣date也是根據創建日期倒序。

index_generator:
 path: ''
 per_page: 10
 order_by:
 top: -1
 date: -1

5.Hexo 實現私密文章加密

cd /Hexo
npm install hexo-blog-encrypt

vim /Hexo/_config.yml 添加如下內容

# Security
## 文章加密 hexo-blog-encrypt
encrypt:
 enable: true

然后在想加密的文章頭部添加上對應字段，如

---
title: hello world
date: 2016-03-30 21:18:02 
tags: 
password: 12345 （密碼）
abstract: Welcome to my blog, enter password to read. 
message: Welcome to my blog, enter password to read. 
---

password: 是該博客加密使用的密碼
abstract: 是該博客的摘要，會顯示在博客的列表頁
message: 這個是博客查看時，密碼輸入框上面的描述性文字

6.增加不蒜子統計

利用這個統計，可以知道你博客的訪問量

6.1安裝不蒜子腳本

在 themes\yilia\layout\ _partial\after-footer.ejs最后添加

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

6.2單篇文章點擊量

在themes/yilia/layout/_partial/article.ejs中在

1	<%- partial('post/title', {class_name: 'article-title'}) %>

后面插入如下代碼

<!--顯示閱讀次數-->
<% if (!index && post.comments){ %>
 <br/>
 <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
 <span class="icon-sort"></span>
 <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
 閱讀數: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
 </span>
 </a>
<% } %>
<!--顯示閱讀次數完畢-->

7.增加版權聲明

7.1配置yilia

在

1	themes/yilia/layout/_partial/article.ejs

中標注的位置添加代碼

<div class="article-entry" itemprop="articleBody">
 <% if (post.excerpt && index){ %>
 <%- post.excerpt %>
 <% if (theme.excerpt_link) { %>
 <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
 <% } %>
 <% } else { %>
 <%- post.content %>
 <% } %>
 <-- 在此處添加代碼-->
 <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
 <div class="page-reward">
 <a href="javascript:;" class="page-reward-btn tooltip-top">
 <div class="tooltip tooltip-east">

添加的代碼如下

<!-- 增加版權聲明 -->

<%
 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="red">請在博客根目錄“_config.yml”中填入正確的“author”</font>
 <%}%>
 <br>
 <strong>本文鏈接：</strong>
 <a rel="license" href="<%=sUrl%>"><%=sUrl%></a>
 <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>
<% } %>

<!-- 增加版權聲明結束 -->

創建新文件

1	themes/yilia/source-src/css/declare.scss

並添加如下CSS代碼。

.declare {
 
 margin-top: 2em;
 border-left: 3px solid #ff1700;
 padding: .5em 1em;
}

為

1	themes/yilia/source-src/css/main.scss

添加如下代碼：

1	@import "./declare";

7.2配置顯示

修改為

1	themes/yilia/_config.yml

在里面加入：

#版權基礎設定：0-關閉聲明； 1-文章對應的md文件里有declare: true屬性，才有版權聲明； 2-所有文章均有版權聲明
#當前應用的版權協議地址。
#版權協議的名稱
#版權協議的Logo

declare_type: 1
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

1	declare:true

即可。

8.字數、閱讀時長添加(失敗)

8.1 安裝hexo-wordcount 安裝完就報錯了 pass

在博客目錄下打開terminal，輸入命令

1	npm i --save hexo-wordcount

9.鼠標點擊小紅心的設置

在

1	hexo/themes/yilia/source

文件目錄下添加

love.js

文件。

!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);

在

1	hexo/themes/yilia/layout/_partial/footer.ejs

文件的最后，添加以下代碼：

1 2	<!--頁面點擊小紅心--> <script type="text/javascript" src="/love.js"></script>

10.文本結束並且與more無沖突

打開

1	yourblog\themes\yilia\layout\_partial

文件夾，並編輯

1	article.ejs

文件

並在這段代碼：

<% if (!post.noDate){ %>
 <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
 <% } %>
 </header>
 <% } %>
 <div class="article-entry" itemprop="articleBody">
 <% if (post.excerpt && index){ %>
 <%- post.excerpt %>
 <% if (theme.excerpt_link) { %>
 <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
 <% } %>
 <% } else { %>
 <%- post.content %>
 <% } %>

的下面添加：

<% if ((theme.essayending_type === 2 || (theme.essayending_type === 1 && post.essayending)) && !index){ %>
 <% if (!index){ %>
 <div class="essayending">
 <div>
 <div style="text-align:center;color: #ccc;font-size:22px;">
 <br/>
 <br/>
 -------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------
 <br/>
 <br/>
 <br/>
 <br/>
 </div>
 </div>
 </div>
 <% } else {%>
 <div class="essayending" hidden="hidden"></div>
 <% } %>

 <% } %>

然后在

1	\theme\yilia\_config.yml

文件中找到合適位置添加

1 2	#文章結束 essayending_type: 1 #0關閉文章結束提示 2全開 1需要在文章開頭加上 essayending: true

這里
0表示關閉文章結束提示
2表示全開
1表示需要在文章開頭加上 essayending: true 才會開啟文章結束提示

11. 404 頁面

直接在hexo/source文件夾里面加一個404.html

12. Sitemap方式提交網頁

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

1
2
3

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

查看

1	{your_hexo_path}/public

文件夾，可以看到

1	sitmap.xml

文件。
sitemap 的初衷是給搜索引擎看的，為了提高搜索引擎對自己站點的收錄效果，我們最好手動到 google 和百度等搜索引擎提交 sitemap.xml。

baidu提交網址：https://ziyuan.baidu.com/?castk=LTE%3D

13.百度自動推送方式提交網頁

在本機

1	<博客根目錄>/themes/yilia/layout/_partial

目錄下打開article.ejs文件，定位到如下這段代碼：

<%
 var sUrl = url.replace(/index\.html$/, '');
 sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
 %>

在它前面加上：

<!- 百度自動推送方式提交 -->
<% if (1){ %>
 <script>
 (function(){
 var bp = document.createElement('script');
 var curProtocol = window.location.protocol.split(':')[0];
 if (curProtocol === 'https') {
 bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
 }
 else {
 bp.src = 'http://push.zhanzhang.baidu.com/push.js';
 }
 var s = document.getElementsByTagName("script")[0];
 s.parentNode.insertBefore(bp, s);
 })();
 </script>
<% } %>
<!- 百度自動推送方式提交結束 -->

即完成了新增博客文章頁面（不包括其他頁面）的自動推送方式提交。

14.Hexo添加百度統計

打開

1	themes/yilia/layout/_partial/baidu-analytics.ejs

將你在百度統計里面得到的代碼粘進去

然后打開

1	themes/yilia/_config.yml

里面

1	baidu_analytics: ''

改為

1	baidu_analytics: 'true'

15鏈接提交

百度站長平台的鏈接提交方式分為自動提交和手動提交兩種，此處只講自動提交，手動提交按照要求操作即可。

15.1 主動推送

主動推送最為快速的提交方式，是被百度收錄最快的推送方式。主動推送可以通過安裝插件實現：

15.1.1首先安裝插件：

1	npm install hexo-baidu-url-submit --save

修改站點根目錄下的配置文件_config.yml，添加以下內容：

baidu_url_submit:
 count: 20 ## 提交最新的20個鏈接
 host: www.dongshuyan.com ## 百度站長平台中注冊的域名
 token: ## 16位准入秘鑰
 path: baidu_urls.txt ## 文本文檔的地址， 新鏈接會保存在此文本文檔里

15.1.2准入秘鑰獲取

在如下圖的網址中：

下拉，找到這里：

點擊進去就是准入秘鑰。

15.1.3 檢查

其次，記得查看根目錄下的_config.yml文件中url的值，必須包含是百度站長平台注冊的域名，比如:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://dongshuyan.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

最后，加入新的deployer

最后，加入新的deployer:

deploy:
- type: git ## 這是我原來的deployer
 repo:
 branch:
- type: baidu_url_submitter ## 添加這里內容即可

這里的”-“,必不可少！否則報錯。

使用

其主動推送的實現原理如下：
新鏈接的產生， hexo generate 會產生一個文本文件，里面包含最新的鏈接
新鏈接的提交， hexo deploy 會從上述文件中讀取鏈接，提交至百度搜索引擎

15.2 自動推送

安裝自動推送JS代碼的網頁，在頁面被訪問時，頁面URL將立即被推送給百度。

修改主題目錄下的layout/post.ejs文件，末尾添加自動推送代碼，代碼如下：

<script>
(function(){
 var bp = document.createElement('script');
 var curProtocol = window.location.protocol.split(':')[0];
 if (curProtocol === 'https') {
 bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
 }
 else {
 bp.src = 'http://push.zhanzhang.baidu.com/push.js';
 }
 var s = document.getElementsByTagName("script")[0];
 s.parentNode.insertBefore(bp, s);
})();
</script>

16 google收錄

網址
這里我選擇的是右邊的里面的html方式，把下載下來的網頁放進根目錄下的source文件夾里，然后

1
2
3

hexo clean
hexo g
hexo d

不過google驗證非常慢，我等了好幾天，才驗證成功。

驗證成功之后，進去提交sitemap即可：

17 Valine評論系統進階

17.0 添加Valine評論

1.注冊
點擊這里登錄或注冊Leancloud
2.創建評論項目
點這里創建應用，應用名看個人喜好
3.找到key
選擇剛剛創建的應用>設置>選擇應用 Key，然后你就能看到你的APP ID和APP KEY了
4設置中的Web 安全域名
為了您的數據安全，請填寫應用>設置>安全設置中的Web安全域名，例如：

http://dongshuyan.com
http://dongshuyan.github.io
https://dongshuyan.com
https://dongshuyan.github.io

5.修改主題配置
5.1首先在

1	theme/yilia/_partial/article.ejs

的最末尾加上

<% if ((theme.valine_type === 2 || (theme.valine_type === 1 && post.valineenbale)) && !index){ %>
 <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
 <section id="comments" class="comments">
 <style>
 .comments{margin:30px;padding:10px;background:#fff}
 @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
 </style>
 <%- partial('post/valine', {
 key: post.slug,
 title: post.title,
 url: config.url+url_for(post.path)
 }) %>
 </section>
 <% } %>
<% } %>

5.2然后在

1	theme/yilia/_config.yml

中找位置加入

#6、Valine https://valine.js.org
valine_type: 1 #0 關閉評論 2全開評論 1需要再文章md開頭加入valineenbale:true
valine: 
 enable: true
 appid: 你在注冊時候得到的id
 appkey: 你在注冊時候得到的key
 verify: true #驗證碼
 notify: true #評論回復提醒
 avatar: identicon #評論列表頭像樣式：''/mm/identicon/monsterid/wavatar/retro/hide

 placeholder: ヾﾉ≧∀≦)o來啊，快活啊! 
 guest_info: nick,mail,link # custom comment header
 pageSize: 10 # pagination size

如果你的valine_type: 也是1，那么然后就需要在你文章抬頭加上

1	valineenbale:true

17.1 管理評論系統

Valine管理界面
選擇你的項目-存儲-數據-Comment
在這里你就可以盡情地管理你的評論數據了。

據說有進階版，不過我暫時還沒有嘗試，有興趣的可以去看看教程：
Valine: 獨立博客評論系統
 Valine Admin 配置手冊
 github_Valine

17.2 評論郵件通知（測試失敗不知道為什么😂）

如果要開啟email通知要將LeanCloud -> 設置 -> 郵件模板 -> 用於重置密碼的郵件主題進行修改
原來的是這樣：

用於重置密碼的郵件主題
1
重設 {{appname}} 的密碼

內容

<p>Hi, {{username}}</p>
<p>
您請求重設應用 {{appname}} 的密碼。點擊下列鏈接來重設您的帳號密碼（鏈接在 48 小時內有效）：
</p>
<p>
<a href="{{link}}" target="_blank">{{link}}</a>
</p>

自定義重置密碼頁面

1	https://leancloud.cn/reset.html

我們把它改成這樣：

用於重置密碼的郵件主題
1
你在{{appname}} 的評論收到了新的回復

內容

<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的評論收到了新的回復，請點擊查看：
</p>
<p><a href="你的網址首頁鏈接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; color: #fff; text-decoration: none;">馬上查看</a></p>

最后在你本地博客 themes/yilia/_config.yml里面進行修改：把驗證碼和評論回復打開即可

1 2	verify: true #驗證碼 notify: true #評論回復提醒

17.3 CDN修改

建議將自帶的CDN改成第三方CDN，為啥？？？10+s的加載那酸爽是在是過癮。
文件目錄：themes/yilia/layout/_partial/post/valine.ejs

1	//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js

官方的CDN是

1	//unpkg.com/valine/dist/Valine.min.js

17.4 雲引擎

1.首先要在github上面新建一個項目，可以起名”Valine-Admin”
2.在leancloud中雲引擎 -> 設置中找
2.1把你的github鏈接帖進去,例如：

1	https://github.com/dongshuyan/Valine-Admin.git

2.2復制出來Deploy Key
2.3在你github的這個項目里面的“settings”里面的“Deploy keys”添加這個Deploy key。
3.部署
剩下的有時間再搞吧，參考鏈接：
DesertsP/Valine-Admin
Valine Admin 配置手冊

18添加板娘(有點占地方還是不要了)

雖然我沒有成功不過從Ziven的主頁來看，板娘在yilia是可以成功的。
可以參考:
Hexo博客yilia主題首頁添加helper-live2d模型插件
 hexo模版yilia添加可愛的看板娘
1.博客根目錄下安裝（還是看上面的文檔吧）

1	npm install hexo-helper-live2d --save

2.配置
打開根目錄下的_config.yml文件,添加以下代碼：

live2d:
 enable: true
 scriptFrom: local
 pluginRootPath: live2dw/
 pluginJsPath: lib/
 pluginModelPath: assets/
 tagMode: false
 log: false
 model:
 use: live2d-widget-model-z16
 display:
 position: left
 width: 100
 height: 200
 hOffset: -10
 vOffset: 40
 mobile:
 show: false

下載更多模型

更多模型

把github模型下載到本地，解壓后將assets目錄拷貝到博客根目錄中的live2d_models（自己新建，文件名不可改）里，再修改_config.yml 里的live2d中model.use即可（改為live2d_models中的模型名字就行）。

19剛發現一個標簽的bug

如果我一個標簽A是B的前綴，那么搜索標簽A的時候，屬於標簽B的文章也會被搜索出來。
舉例，我有一個標簽叫“Mac”還有一個標簽叫“machine learning”
搜索“Mac”的時候屬於“machine learning”的文章也會被搜出來。😂

20文章頂部轉載說明（原創）

20.1配置yilia主題文件

在

1	themes/yilia/layout/_partial/article.ejs

中下面標注的位置添加代碼

<% if (!post.noDate){ %>
 <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
 <% } %>
 </header>
 <% } %>
 <div class="article-entry" itemprop="articleBody">


 <!--在這里添加新代碼-->

添加的代碼如下

<!-- 文章頭增加轉載聲明 -->

 <%
 var sUrl = url.replace(/index\.html$/, '');
 sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
 %>
 <% if ((theme.topdeclare_type === 2 || (theme.topdeclare_type === 1 && post.topdeclare)) && !index){ %>
 <div class="topdeclare">

 <hr>
 <strong>如需轉載，請根據</strong>
 <a rel="license" href="<%= theme.toplicensee_url%>"><%= theme.toplicensee_name%></a>
 許可，附上本文作者及鏈接。
 <br>

 <strong>本文作者：</strong>
 <% if(config.author != undefined){ %>
 <%= config.author%>
 <% }else{%>
 <font color="red">請在博客根目錄“_config.yml”中填入正確的“author”</font>
 <%}%>
 <br>
 <strong>作者昵稱：</strong>
 <% if(theme.topnickname!= undefined){ %>
 <%= theme.topnickname%>
 <% }else{%>
 <font color="red">請在博客主題目錄“_config.yml”中填入正確的“昵稱”</font>
 <%}%>
 <br>

 <strong>本文鏈接：</strong>
 <a rel="license" href="<%=sUrl%>"><%=sUrl%></a>
 <br>
 <hr>

 </div>
 <% } else {%>
 <div class="topdeclare" hidden="hidden"></div>
 <% } %>
 
 <!-- 文章頭增加轉載聲明結束 -->

創建新文件

1	themes/yilia/source-src/css/topdeclare.scss

並添加如下CSS代碼。

.declare {
 
 margin-top: 2em;
 border-left: 3px solid #ff1700;
 padding: .5em 1em;
}

為

1	themes/yilia/source-src/css/main.scss

添加如下代碼：

1	@import "./topdeclare";

20.2配置顯示

修改為

1	themes/yilia/_config.yml

在里面加入：

#頂部版權基礎設定：0-關閉聲明； 1-文章對應的md文件里有topdeclare: true屬性，才有版權聲明； 2-所有文章均有版權聲明
#當前應用的版權協議地址。
#昵稱
#版權協議的名稱

topdeclare_type: 1
toplicensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
topnickname: 莫與 #你的昵稱
toplicensee_name: '知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議'

1	topdeclare:true

即可。

21 google廣告

21.1 前提條件

1.首先你得有個網站
2.然后你得有幾篇文章最好是原創的
3.有一個google賬戶
4.你的google賬戶必須設置過生日，沒設置的趕緊先把生日設置好（我估計可能是限制未成年人吧）

如果你達成以上條件那么我們可以開始了

去google Adsense官網即可，鏈接如下：
google Adsense官網

ps.這個網站打開是真的慢

打開網站之后就可以開始注冊了（即使你有google賬戶也要注冊！）
1.官網點擊注冊（sign up）,進入注冊頁面
2.在注冊頁面填寫你的信息（網站地址不可以是二級域名）
3.在之后填寫你的地址信息
4.地址信息填完畢之后會給你一串代碼，類似如下：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({
 google_ad_client: "ca-pub-8955547868703063",
 enable_page_level_ads: true
 });
</script>

5.把這一串代碼放在

1	博客目錄\themes\yilia\layout\_partial\head.ejs

文件的

1	<head>與</head>

之間,然后在命令行里

1
2
3

hexo clean
hexo g
hexo d

將網站同步好
6.同步好之后返回Google Adsense點擊已經粘貼代碼。
google從網站檢測到這段代碼即可，等待啟動即可。

21.3 審核通過

稍等一天時間，如果沒有問題，即可審核通過。
有問題就改問題，然后在申請。

21.4 添加展示廣告

1.在網頁上找到“廣告” -> “廣告單元” -> “創建新的廣告單元” -> “展示廣告”
2.然后再界面里面先填寫一個名字(例如ad_google_1)
3.點擊創建
4.將生成的代碼添加到

1	博客目錄\themes\yilia\layout\_partial\article.ejs

中對應適當位置即可，注意別讓廣告擾亂了頁面布局，影響全局美感。
添加代碼如下：

可以在文章開頭添加：
 <!--文章頭google圖片-->
 <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %>
 <hr>
 <strong>⬇️下面這個看起來像廣告的東西，其實是只個圖片，根本打不開的。不過聽說有時候⬇️</strong>
 <br>
 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <!-- googlead1 -->
 <ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-8955547868703063"
 data-ad-slot="3853918361"
 data-ad-format="auto"
 data-full-width-responsive="true"></ins>
 <script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 </script>
 <% } %>
 <!--文章頭google圖片結束-->


可以在結尾處添加：
<!-- 尾google廣告 -->
 <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %>
 <hr>
 <strong>⬇️下面這個才是真正的廣告哦，如果感覺真的從文章中有帶走新東西的話，可以幫我點一下哦⬇️</strong>
 <br>
 這里是google網頁生成的代碼
 <% } %>
<!-- 尾google廣告 -->

然后還需要再

1	/theme/yilia/_config.yml

中合適位置添加

1 2	#google廣告基礎設定：0-關閉廣告； 1-文章對應的md文件里有googlead: true屬性，才有廣告； 2-所有文章均有廣告 googlead_type: 1

使用教程如上面提示：
0-關閉廣告；
1-文章對應的md文件里有googlead: true屬性，才有廣告；
2-所有文章均有廣告

5.添加完畢
在網頁中點擊“大功告成”
6.想網頁上傳
hexo clean
hexo g
hexo d
7.等待一小時左右大約會出現廣告

22 Gitment/Gitalk評論系統

感覺gitment 和 gitalk也不錯
可以參考
Hexo主題yilia增加gitalk評論插件
 Hexo-yilia使用gitment/gitalk評論系統
 Gitment給基於hexo的yilia主題的博客搭建免費評論系統

自己配置了一下gitalk

22.1 注冊 OAuth Application

注冊網址：https://github.com/settings/applications/new

Application name
DongBlogComments
Something users will recognize and trust.

Homepage URL
https://dongshuyan.github.io/
The full URL to your application homepage.

Application description
Shuyan's Blog
This is displayed to all users of your application.

Authorization callback URL
http://dongshuyan.com/

注冊成功后，會獲取到 Client ID/scerct 。

22.2配置

1	layout/_partial/post目錄下新增gitalk.ejs文件

<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></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 type="text/javascript">

if(<%=theme.gitalk.enable%>){
 var gitalk = new Gitalk({
 clientID: '<%=theme.gitalk.ClientID%>',
 clientSecret: '<%=theme.gitalk.ClientSecret%>',
 repo: '<%=theme.gitalk.repo%>',
 owner: '<%=theme.gitalk.githubID%>',
 admin: ['<%=theme.gitalk.adminUser%>'],
 id: '<%= page.date %>',
 distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container') 
}
</script>

修改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;
 }
}

在

1	layout/_partial

目錄下的article.ejs文件內新增gitalk相關的配置代碼：

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

最后在yilia主題配置文件中新增gitalk相關的配置：

gitalk:
 enable: true
 githubID: 'dongshuyan' 
 repo: 'DongBlogComments' #這里可以另開一個也可以就用你博客的那個repo
 ClientID: '剛才得到的code'
 ClientSecret: '剛才得到的code'
 adminUser: 'dongshuyan' 
 distractionFreeMode: true

踩坑教程：
Gitment評論功能接入踩坑教程
 [gitalk] 解決配置gitalk插件后初始化登錄時跳轉回首頁
 登錄報錯/?error=redirect_uri_mismatch& #162

23.tag中含有大寫字母的bug

總之tag別用大寫字母！！！

24 hexo d上傳失敗

顯示：

INFO  Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
Enumerating objects: 396, done.
Counting objects: 100% (396/396), done.
Delta compression using up to 8 threads
Compressing objects: 100% (144/144), done.
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 60
fatal: the remote end hung up unexpectedly
Writing objects: 100% (235/235), 2.31 MiB | 14.00 KiB/s, done.
Total 235 (delta 104), reused 0 (delta 0)
fatal: the remote end hung up unexpectedly
Everything up-to-date
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: Spawn failed
 at ChildProcess.<anonymous> (/Users/moyu/Desktop/learn/blog_new/node_modules/hexo-util/lib/spawn.js:52:19)
 at emitTwo (events.js:126:13)
 at ChildProcess.emit (events.js:214:7)
 at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)

我這里是網絡代理問題。

25 跳轉到指定位置

html里面加上

1	<a name="printcenter1"></a>

然后跳轉xx.html#printcenter1

參考

Hexo文章置頂的方法
 Hexo增加置頂屬性
 Hexo 基於yilia主題及其它插件優化
 Hexo yilia 主題一攬子使用方案
 在Hexo中自動為Yilia主題增加版權聲明
 Hexo-Yilia進階筆記
 Hexo+yilia主題實現文章目錄和添加視頻
 hexo的next主題個性化教程:打造炫酷網站
 Hexo博客Yilia主題修改記錄
 Hexo Yilia 主題進階配置
 Hexo博客提交百度和Google收錄
 DesertsP/Valine-Admin
Valine Admin 配置手冊
 Valine: 獨立博客評論系統
 github_Valine
動態版娘
 Hexo-添加看板娘(進階版)
hexo yilia 主題添加 google 廣告
 Google AdSense 申請日志及教程
 Hexo-yilia使用gitment/gitalk評論系統
 Gitment給基於hexo的yilia主題的博客搭建免費評論系統
 Hexo博客yilia主題首頁添加helper-live2d模型插件
 hexo模版yilia添加可愛的看板娘
 Gitment評論功能接入踩坑教程
 [gitalk] 解決配置gitalk插件后初始化登錄時跳轉回首頁
 登錄報錯/?error=redirect_uri_mismatch& #162
Hexo主題yilia增加gitalk評論插件

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Hexo yilia 主題啟用及相關設置 github+hexo搭建自己的博客網站（二）更換主題yilia hexo+yilia主題博客如何添加圖標icon Hexo-博客yilia主題創建分類（categories）和標簽（tags）首頁添加 hexo yilia 主題的文章閱讀量 Hexo+yilia博客添加背景音樂 hexo主題hexo-theme-yilia文章太長，截斷按鈕文字的實現 2019Hexo博客Next主題深度美化打造一個炫酷博客(2)-奧怪的小棧 Hexo博客主題安裝和優化（二） Hexo博客主題安裝和優化（一）