個人博客 網站
目錄和文件分析
分析下themes/Sakura目錄結構和文件
首先分析下目錄，主要包括以下幾個
-
languages 這個文件夾中存放的是語言文件，主要是博客中的一些字符以簡體中文、繁體中文、英文顯示的定義
-
layout 這個是佈局文件夾，所有的博客頁面HTML和JavaScript以ejs模板存放在這
-
- Search 這裏存放的是頁內搜索的ejs文件
- _partial 這裏的和下面的都是公共的頁面，可以引入到HTML的任意位置
- _widget
-
source 這個文件夾和博客根目錄下的source文件夾是一樣的，但是爲了存放主題相關的文件
-
- css 這裏存放css文件
- fonts 字體文件
- images 圖片
- js js文件
代碼插入位置
再接着就是需要知道我們插入的文件和代碼應該放到哪裏
一般來說我們的js、css代碼一般以文件形式存放到js、css文件夾中，接着再引入HTML代碼中，引入位置一般在<head></head>標籤中，當然啦css、js位置也不是固定的，你也可以直接放到HTML頁面結構的中央和結尾，也就是<body></body>之間或者</body>之後、</head>之前
要是CSS或者JavaScript的代碼很少的話，可以直接放到HTML中，不需要先存爲文件再引入
具體參考：HTML中引入js、css的三種方式——行內樣式、頁面中樣式、外部文件導入
就對應我們現在要修改的文件中的_partial目錄下head.ejs——這個<html><head></head>就在這個文件中
footer.ejs是底部元素，一般個人、企業版權寫在這裏，因爲一般大部分文件都會引入，因此js代碼也可以寫在這
layout.ejs這個也是所有頁面需要引入的，因爲</body></html>標籤在這裏
要是想將功能單獨添加到某個頁面，那你就找到那個ejs文件放到裏面就醒了
博客原有功能的修改
博客原有功能修改主要指的是博客根目錄配置文件和主題配置文件的修改
因爲大部分的都已經在上次的博客搭建文章中寫了
就不多說了吧
主要包括各種頁面結構的修改：
- 首頁輪播圖
- 站點圖標、頭像、讚賞等圖片的鏈接修改
- 個人化的站點標題、副標題、描述、關鍵詞等
- 導航欄的修改、添加、刪除等
- 通知的修改
- startdash的圖片、鏈接修改
- 社交鏈接的修改等
這上面這些應該都是不需要再講了的
導航欄中的關於
主要是關於>我？這個的修改
這個要修改的文件在Sakura/source/js目錄下，名字爲botui.js
主要修改content後面雙引號裏的內容，自行修改爲自己的就行
導航欄中的客戶端
這個可以使用Fusion App把你自己的博客封裝成APP
然後放到藍奏雲上，生成二維碼放上來
導航欄中的RSS
根目錄下的配置文件中已經有了
#RSS
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
這些代碼
因此我們只需要安裝好插件就行了
npm install hexo-generator-feed
當然啦，如果本來就能顯示內容，那麼就不需要安裝了
每個頁面中的頂部圖片
就比如關於>主題這個頁面
我們進入根目錄下，再進入source目錄找到theme-sakura，進入該目錄點擊index.md，修改photos後面的內容，改爲你想要的圖片鏈接
---title: theme-sakura
comments: false
date: 2019-01-04 22:53:25
keywords: Hexo 主題 Sakura 🌸
description:photos: https://static.2heng.xin/wp-content/uploads//2018/05/sakura2.jpeg
---Hexo主題Sakura修改自WordPress主題[Sakura](https://github.com/mashirozx/Sakura/)，感謝原作者[Mashiro](https://2heng.xin/)
文章上面和首頁文章列表的圖片
也是修改的你新建的文章中的photos後面的圖片鏈接
這些都是這個主題支持的內容，在上篇文章中寫過的文章模板
---
title: 文章標題
author: 作者名
avatar: 作者頭像鏈接
authorLink: hojun.cn #作者的域名
authorAbout: 一個好奇的人 #關於
authorDesc: 一個好奇的人 #作者描述
categories: 分類
date: 2018-12-12 22:16:01 #時間，這個一般都自動創建
comments: true # 是否需要留言
tags: # 下面可以寫多個標籤
- web
- 悅讀
keywords: Sakura # 文章關鍵詞
description: hexo-sakura主題使用教程 #文章描述
photos: https://static.2heng.xin/wp-content/uploads//2019/02/wallhaven-672007-1-1024x576.png
---
清單下的番組
這個是在source下bangumi下的index.md中修改的
---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
description:
bangumis:
- img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg # 番的圖片
title: 朝花夕誓——於離別之朝束起約定之花 # 番的中文標題
status: 已追完 # 追番狀態
progress: 100 # 追番進度
jp: さよならの朝に約束の花をかざろう # 日文標題
time: 2018-02-24 SUN. # 這個是出版的時間
desc: 這裏是你追的番的描述
---
清單下的歌單和左下角懸浮歌單
主要是修改你的id，歌單id的獲取方式：
進入網易雲網頁版https://music.163.com/
登錄賬號，選擇一個歌單打開
瀏覽器的鏈接將會顯示id，就最後一個字段，把那些數字複製到下面就行
https://music.163.com/?from=infinity#/playlist?id=2162711186
清單下的歌單文件是source/music/index.md
---
title: music
date: 2018-12-20 23:14:28
keywords: 喜歡的音樂
description:
comments: false
photos: https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/banner/music.jpg
---
{% raw %}
修改這裏就可以
{% endraw %}
懸浮音樂的代碼在主題配置文件中
aplayer:
id: 2660651585
server: netease
type: playlist
fixed: true
autoplay: false
loop: all
order: random
preload: auto
volume: 0.7
mutex: true
友鏈添加
友鏈修改文件在source/links/index.md
---
layout: links
title: links
date: 2018-12-19 23:11:06
keywords: 友人帳
description:
comments: true
photos: https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/banner/links.jpg
links:
- group: 個人項目
desc: 充分說明這傢伙是條鹹魚 < (￣︶￣)>
items:
- url: https://shino.cc/fgvf
img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
name: Google
desc: Google 鏡像
- url: https://shino.cc/fgvf
img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
name: Google
desc: Google 鏡像
- group: 小夥伴們
desc: 歡迎交換友鏈 ꉂ(ˊᗜˋ)
items: ## 友鏈添加主要是在這裏
- url: https://shino.cc/fgvf # 他的鏈接
img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg # 他的頭像
name: Google # 他的博客名
desc: Google 鏡像 # 博客描述
- url: https://shino.cc/fgvf
img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
name: Google
desc: Google 鏡像
---
不需要修改layout目錄下文件的應該就這些了
接下來就直接按點添加功能和美化了
添加標題惡搞
默認的是離開時候還是現實自己的文字標題
添加之後離開和回到這個頁面時顯示
爲了達到上述效果,我們可以在head.ejs或者footer.ejs中加入代碼
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
例如加入到head.ejs的該位置
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Jym0JNsC-1584078269292)(https://s1.ax1x.com/2020/03/13/8n0PDe.png)]
加入之後刷新就能生效了
鼠標點擊特效
單擊特效有很多種，這裏給出三個吧
現在我們把這個代碼放到layout.ejs的``標籤前
<!-- 點擊出現社會主義彩色文字 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script><!-- 點擊出現愛心 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script><!-- 點擊出現彩色氣球爆炸效果 --><canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/clickBom.js"></script>
可以分別添加一種，也可以多種混合，但是三種一起使用感覺效果不太好
下面是前兩者結合的效果：
最後一種：
這個有很多個，這裏展示一個
把代碼插入到layout.ejs中
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/xuehua.js"></script>
效果如下：
背景顯示飄動的綵帶
在需要的頁面添加，我們還是在所有頁面都加上，layout.ejs中加入代碼
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/piao.js"></script>
背景添加動態線條，隨鼠標動
仍是layout.ejs中
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
櫻花飄落或雪花飄落
仍是layout.ejs中
櫻花飄落：
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/sakura.js"></script>
雪花飄落：
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/xuehuapiaoluo.js"></script>或者<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/snow.js"></script>
選擇一個就行了
禁用一些按鍵
爲了阻止某些使用F12、Ctrl+Alt+I調用開發者選項的用戶
還有禁用了鼠標右鍵，可以開啓禁用鼠標左鍵拖動選擇文字
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>
添加畫板娘
這次不用插件來添加，直接引入js代碼
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <!-- 這條在sakura中已有，可不添加 --><script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
倉庫鏈接在這：
live2d-widget https://github.com/stevenjoezhang/live2d-widget
添加前往GitHub的綵帶
前往
GitHub Ribbons https://github.blog/2008-12-19-github-ribbons/
挑選樣式之後，複製相應的代碼，粘貼到合適的地方
加入預加載
sakura主題集成了圖片懶加載，可是頁面放到GitHub加載還是很慢，matery主題就加入了預加載，從那裏得到靈感，因此我們加入預加載
還是在layout.ejs中添加
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
官網在這：預加載https://instant.page/
添加計數
主要使用的是不蒜子和LeanCloud
LeanCloud我使用起來並不理想，因此不講，想要了解自己去官網看
不蒜子的：
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
再進入不蒜子官網查看訪問量pv、用戶訪問量uv使用
添加一言API、詩詞
今日詩詞 https://www.jinrishici.com/#
提供了詩詞的API
我們將這個詩詞放到以前的描述那裏，社交圖標的上方
修改headertop.ejs，找到下面的代碼
<div class="header-info"> <!-- 找到這個位置 -->
<!-- <p><%= theme.description %></p> --> 把這句註釋掉 <p id="jinrishici-sentence">正在加載今日詩詞....</p>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<!-- 添加上面的兩句 -->
<div class="top-social_v2">
一言API的可以前往這個網址查看使用：
一言開發者中心 https://developer.hitokoto.cn/sentence/
正好通知也沒有啥用，把他換掉
進入index.ejs，查找<%= theme.notice%>，將其替換爲下面的
<span id="hitokoto" style="margin-left:5px;"> :D 獲取中...</span>
<p align="right" id="afrom"></p>
<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/fetch.min.js"></script>
<script>
fetch('https://v1.hitokoto.cn/?c=h')
.then(function (res){
return res.json();
})
.then(function (data) {
var hitokoto = document.getElementById('hitokoto');
var afrom = document.getElementById('afrom');
hitokoto.innerText = data.hitokoto;
afrom.innerText = '——【' + data.from + ' ' + data.from_who + '】';
})
.catch(function (err) {
console.error(err);
})
</script>
添加底部的網站運行時間
在footer.ejs選擇合適位置添加代碼
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span><script>
var now = new Date();
function createtime() {
var grt= new Date("03/08/2020 16:44: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 = "本站已安全運行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);</script>
添加底部動態滾動文字
<div id="binft"></div>
<script>
var binft = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
var l = "",
o = ["青青陵上柏，磊磊澗中石。", "人生天地間，忽如遠行客。","斗酒相娛樂，聊厚不爲薄。", "驅車策駑馬，遊戲宛與洛。","洛中何鬱郁，冠帶自相索。","長衢羅夾巷，王侯多第宅。","兩宮遙相望，雙闕百餘尺。","極宴娛心意，慼慼何所迫？"].map(function (r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
binft(document.getElementById('binft'));
</script>
加入天氣插件
前往
中國天氣 https://cj.weather.com.cn/plugin/pc
這個網址查看詳情
可以選用小視圖，添加到link.ejs中
頂部加載條
這個sakura有，但是想記錄一下
head中加入
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet"><style>
.pace .pace-progress { background: #1E92FB; /*進度條顏色*/
height: 3px; }
.pace .pace-progress-inner { box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*陰影顏色*/
}
.pace .pace-activity { border-top-color: #1E92FB; /*上邊框顏色*/
border-left-color: #1E92FB; /*左邊框顏色*/
}</style>
修改鼠標樣式
在style.css中添加,sakura已有，可不管，當然啦，也可以去找一下其他好看的圖標
// 鼠標樣式
* {
cursor: url("https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/cursor/normal.cur"),auto!important
}
:active {
cursor: url("https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/cursor/No_Disponible.cur"),auto!important
}
評論系統
sakura自帶的系統爲valine，我們可以自行替換成其他的
就比如來必力，前往
來必力官網 https://www.livere.com/
註冊登錄後，點擊菜單欄的【安裝】，出現這個界面，直接點擊【現在安裝】
前往管理頁，點擊左邊的【代碼管理】
你將會看到這樣的代碼
data-uid後面的雙引號中的內容剪切出來
然後到主題配置文件下修改，找到最下面的valine
將valine改成false，添加最後兩行
# Valine
valine: false
v_appId: Cu2IPPUW8BnkmwzFa8WrS9VC-gzGzoHsz
v_appKey: kgcNfaHXq91mfCaAIcbjGChl
# livere
livere: true
data_uid: 剛剛複製的uid
接着把下面的代碼複製到comment.ejs中
<% if (theme.livere && post.comments) { %><!-- 來必力City版安裝代碼 --><div id="lv-container" data-id="city" data-uid="<%= theme.livere.data_uid %>"><script type="text/javascript">
(function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');</script><noscript>爲正常使用來必力評論功能請激活JavaScript</noscript></div><!-- Ci
在線聯繫
DaoVoice 在線聯繫
前往網站
DaoVoice https://www.daovoice.io/
可以使用GitHub或者微信登錄，也可以前往
這裏註冊 http://dashboard.daovoice.io/get-started
進入之後點擊應用設置，再點擊安裝到網站
再將第一個代碼複製到``之前，將下面兩個複製到layout.ejs
添加優美的標籤頁
這個標籤頁和分類頁提取自matery，不得不說matery真的很漂亮
首先我們要創建幾個文件，文件所在目錄如下
-
layout
tags.ejs
-
-
_widget
tag-cloud.ejs
tag-wordcloud.ejs
-
也就是tags.ejs放在layout根目錄下，下面兩個文件放在layout子目錄_widget下
tags.ejs
<%- partial('_partial/header') %>
<main class="content">
<%- partial('_widget/tag-cloud') %>
<%- partial('_widget/tag-wordcloud') %>
</main>
_widget/tag-cloud.ejs
<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
'#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
if (!str && str.length === 0) {
return 0;
}
var hash = 0;
for (var i = 0, len = str.length; i < len; i++) {
hash = ((hash << 5) - hash) + str.charCodeAt(i);
hash |= 0;
}
return hash;
};
var i = 0;
var isTag = is_tag();
%>
<div id="tags" class="container chip-container">
<div class="card">
<div class="card-content">
<div class="tag-title center-align">
<i class="fa fa-tags"></i> 文章標籤
</div>
<div class="tag-chips">
<% site.tags.map(function(tag) { %>
<%
i++;
var color = i >= colorCount ? colorArr[Math.abs(hashCode(tag.name) % colorCount)]
: colorArr[i - 1];
%>
<a href="<%- url_for(tag.path) %>" title="<%- tag.name %>: <%- tag.length %>">
<span class="chip center-align waves-effect waves-light
<% if (isTag && tag.name == page.tag) { %> chip-active <% } else { %> chip-default <% } %>"
data-tagname="<%- tag.name %>" style="background-color: <%- color %>;"><%- tag.name %>
<span class="tag-length"><%- tag.length %></span>
</span>
</a>
<% }); %>
</div>
</div>
</div>
</div>
_widget/tag-wordcloud.ejs
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/wallleap/cdn/css/jqcloud.css">
<style type="text/css">
#tag-wordcloud {
width: 100%;
height: 300px;
}
</style>
<div class="container" data-aos="fade-up">
<div class="card">
<div id="tag-wordcloud" class="card-content"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/jqcloud-1.0.4.js"></script>
<script type="text/javascript">
<%
let tagWordArr = [];
site.tags.map(function(tag) {
tagWordArr.push({'text': tag.name, 'weight': tag.length, 'link': tag.permalink});
});
let tagWords = JSON.stringify(tagWordArr);
%>
$('#tag-wordcloud').jQCloud(<%- tagWords %>, {
autoResize: true
});
</script>
將這段代碼複製到style.css末尾
.chip-container { margin-top: 60px;}.chip-container .tag-title { margin-bottom: 10px; color: #3C4858; font-size: 1.75rem; font-weight: 400;}.chip-container .tag-chips { margin: 1rem auto 0.5rem; max-width: 850px; text-align: center;}.chip-container .tags-posts { margin-top: 20px;}.chip-container .chip-default { color: #34495e;}.chip-container .chip-active { color: #FFF !important; background: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%) !important; box-shadow: 2px 5px 10px #aaa !important;}.chip-container .chip { margin: 10px 10px; padding: 19px 14px; display: inline-flex; line-height: 0; font-size: 1rem; font-weight: 500; border-radius: 5px; cursor: pointer; box-shadow: 0 3px 5px rgba(0, 0, 0, .12);}.chip-container .chip:hover { color: #fff; background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%) !important;}.chip .tag-length { margin-left: 5px; margin-right: -2px; font-size: 0.5rem;}.chip-default .tag-length { color: #e91e63; margin-top: 1px;}.chip-active .tag-length { color: #fff;}.tag-title.center-align{ margin-top: 100px; text-align : center;}
使用命令hexo new page "tags"，修改博客根目錄下source/tags/index.md
---
title: tags
date: 2020-03-09 13:50:05
layout: tags
---
在 http://localhost:4000/tags查看頁面
添加優美的分類頁
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HNUGHXNy-1584078269301)(https://s1.ax1x.com/2020/03/13/8ndoeH.png)]
接着創建幾個文件，文件所在目錄如下
-
layout
categories.ejs
-
-
_widget
category-cloud.ejs
category-radar.ejs
-
也就是categories.ejs放在layout根目錄下，下面兩個文件放在layout子目錄_widget下
添加代碼
categories.ejs
<%- partial('_partial/header') %>
<main class="content">
<%- partial('_widget/category-cloud') %>
<% if (site.categories && site.categories.length > 0) { %>
<%- partial('_widget/category-radar') %>
<% } %>
</main>
category-cloud.ejs
<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
'#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
if (!str && str.length === 0) {
return 0;
}
var hash = 0;
for (var i = 0, len = str.length; i < len; i++) {
hash = ((hash << 5) - hash) + str.charCodeAt(i);
hash |= 0;
}
return hash;
};
var i = 0;
var isCategory = is_category();
%>
<div id="category-cloud" class="container chip-container">
<div class="card">
<div class="card-content">
<div class="tag-title center-align">
<i class="fa fa-bookmark"></i> 文章分類
</div>
<div class="tag-chips">
<% if (site.categories && site.categories.length > 0) { %>
<% site.categories.map(function(category) { %>
<%
i++;
var color = i >= colorCount ? colorArr[Math.abs(hashCode(category.name) % colorCount)]
: colorArr[i - 1];
%>
<a href="<%- url_for(category.path) %>" title="<%- category.name %>: <%- category.length %>">
<span class="chip center-align waves-effect waves-light
<% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
style="background-color: <%- color %>;"><%- category.name %>
<span class="tag-length"><%- category.length %></span>
</span>
</a>
<% }); %>
<% } else { %>
<%= __('categoryEmptyTip') %>
<% } %>
</div>
</div>
</div>
</div>
category-radar.ejs
<style type="text/css">
#category-radar {
margin-top: 50px;
width: 100%;
height: 360px;
}
</style>
<div class="container" data-aos="fade-up">
<div class="card">
<div id="category-radar" class="card-content"></div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/echarts.min.js"></script>
<script type="text/javascript">
let radarChart = echarts.init(document.getElementById('category-radar'));
<%
var categories = site.categories;
// Find the maximum and average values of the post categories.
var radarValueArr = [];
categories.some(function(category) {
radarValueArr.push(category.length);
});
var max = Math.max.apply(null, radarValueArr) + Math.min.apply(null, radarValueArr);
// Calculate the data needed for the radar chart.
var indicatorArr = [];
categories.map(function(category) {
indicatorArr.push({'name': category.name, 'max': max});
});
var indicatorData = JSON.stringify(indicatorArr);
var radarValueData = JSON.stringify(radarValueArr);
%>
let option = {
title: {
left: 'center',
text: '文章分類雷達圖',
textStyle: {
fontWeight: 500,
fontSize: 22
}
},
tooltip: {},
radar: {
name: {
textStyle: {
color: '#3C4858'
}
},
indicator: <%- indicatorData %>,
nameGap: 5,
center: ['50%','55%'],
radius: '66%'
},
series: [{
type: 'radar',
color: ['#3ecf8e'],
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data : [
{
value : <%- radarValueData %>,
name : '文章分類數量'
}
]
}]
};
radarChart.setOption(option);
</script>
接着用命令hexo new page "categories"創建分類頁
修改博客根目錄下source/categories/index.md
---
title: categories
date: 2020-03-09 13:50:05
layout: categories
---
http://localhost:4000/categories
查看
接着就是把這兩個頁面放到導航欄上面去
修改主題配置文件，將這兩行代碼放到留言板之前
標籤: {path: /tags/, fa: fa-tag }
分類: {path: /categories/, fa: fa-bookmark }
已經集成的一些插件
emoji表情：
hexo-filter-github-emojis https://github.com/crimx/hexo-filter-github-emojis
正常插件安裝版畫板娘：
hexo-helper-live2d https://github.com/EYHN/hexo-helper-live2d
圖片懶加載(sakura已經有了，但不是這種方式)：
hexo-lazyload-image https://www.npmjs.com/package/hexo-lazyload-image
hexo-lazyload-image-enhance https://github.com/barretlee/hexo-lazyload-image-enhance
字數統計(好像沒裝)：
hexo-wordcount https://github.com/willin/hexo-wordcount
fancybox：
hexo-tag-fancybox_img https://github.com/honjun/hexo-tag-fancybox_img
bilibili：
hexo-tag-bili https://github.com/honjun/hexo-tag-bili
文章末尾版權信息添加
首先我們在_partial目錄下新建文件article_copyright.ejs
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS庫 sweetalert 可修改路徑 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文標題:</span><%= post.title %></p>
<p><span>文章字數:</span><span class="post-count"><%=wordcount(post.content) %></span></p>
<p><span>文章作者:</span><a title="<%=config.author%>"><%=config.author%></a></p>
<p><span>發佈時間:</span><%= post.date.format("YYYY-MM-DD, HH:mm:ss") %></p>
<p><span>最後更新:</span><%= post.updated.format("YYYY-MM-DD, HH:mm:ss") %></p>
<p><span>原始鏈接:</span></span><a class="post-url" href="<%- url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a>
<span class="copy-path" title="點擊複製文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="複製成功！"></i></span>
</p>
<p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文鏈接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '複製成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
需要文章字數的，一定要先安裝字數統計插件，上面列出了，不用就把那行註釋掉
接着將下面的代碼
<% if (post.copyright) { %>
<%- partial('../_partial/article_copyright') %>
<% } %>
複製到common-article.ejs的這個位置
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qmxPnRc4-1584078269302)(https://s1.ax1x.com/2020/03/13/8nwlfx.png)]
將CSS代碼複製到style.css中
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
添加404頁面
在博客根目錄的source目錄下新建404.html
隨便找個模板，在開頭加入代碼
---
layout: false
---
例如
---
layout: false
---<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><title>404</title></head><body>
<p>404頁面</p>
<a>返回主頁</a></body></html>
部署到GitHub之後，訪問不存在的頁面就會跳出來了
域名綁定
在博客根目錄下的source目錄下新建CNAME文件，如果主題source目錄下有這個文件請刪除
修改CNAME文件，內容爲你的域名，例如我的
www.sakura521.cn
接着去GitHub pages更改域名，開啓SSL
前往阿里雲的的域名解析頁面添加CANME解析
@ → 用戶名.github.io
之後就可以以新的域名訪問了 https://www.sakura521.cn
網站收錄
主要是向各大搜索引擎提交鏈接
谷歌收錄
360站長平臺 http://zhanzhang.so.com/sitetool/site_manage
百度搜索資源平臺 https://ziyuan.baidu.com/linksubmit/
百度的需要注意一下，由於GitHub將百度封了，因此你需要把博客雙線部署到gitlab或coding才能收錄
搜狗站長平臺 http://zhanzhang.sogou.com/
網站分析
百度統計
前往百度統計官網
Baidu統計 https://tongji.baidu.com/web/welcome/login
以百度賬號登錄後，點擊【管理】，在【網站列表】中新增網站
獲取代碼，將代碼複製到標籤前，進行代碼檢測
以後就可以查看訪問情況了
cnzz
點擊
友盟+ https://passport.umeng.com/login?appId=cnzz
前往，註冊登錄後，添加站點
根據自己喜好獲取代碼
粘貼到前
之後就可以點擊查看信息了
小技巧
博客備份
有一個博客備份插件
hexo-git-backup https://github.com/coneycode/hexo-git-backup
能夠傳到backup分支
我們還可以把整個博客文件夾上傳到GitHub私有倉庫
本地預覽
使用命令換個端口預覽hexo s -p 5000
也可以添加下列代碼到博客配置文件中,使用hexo s時將會以5000端口運行
server:
port: 5000
compress: true
header: true
快捷命令
alias設置命令別名，將下面代碼複製到***.bashrc***文件中
alias hs='hexo clean && hexo g && hexo s'
alias hd='hexo clean && hexo g && hexo d'
alias gp='git add . && git commit -m "update" && git push -f'
以後輸入hs命令就可以本地預覽、hd部署、gp上傳到倉庫
靜態資源壓縮
博客使用了圖片懶加載和預加載雖然加快了一點速度，但訪問還是有點慢
那麼直接把html、css、js代碼中的空格去掉，進行壓縮
還有壓縮一下圖片，能夠一定程度上縮小public文件夾的大小
參考這篇文章：
Hexo博客使用gulp壓縮靜態資源
安裝全局gulp
npm install gulp -g
安裝插件
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp gulp-imagemin --save
# 解決【Gulp打包問題】 GulpUglifyError: unable to minify JavaScript
# 解決 gulp-uglify 壓縮JavaScript 不兼容 es5 語法的問題
npm install [email protected] --save
npm install [email protected] --save
npm install [email protected] --save
# gulp-babel 取消嚴格模式方法("use strict")
npm install babel-plugin-transform-remove-strict-mode --save
問題：如果安裝gulp-imagemin錯誤請執行以下語句
sudo npm i gulp-imagemin --unsafe-perms
博客根目錄創建gulpfile.js
上面文章中有一句在這個版本會報錯，已修改
var gulp = require('gulp');var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');var imagemin = require('gulp-imagemin');var babel = require('gulp-babel');// 壓縮css文件gulp.task('minify-css', function (done) { return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
done();
});// 壓縮html文件gulp.task('minify-html', function (done) { return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'));
done();
});// 壓縮js文件gulp.task('minify-js', function (done) { return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({ //將ES6代碼轉譯爲可執行的JS代碼
presets: ['es2015'] // es5檢查機制
}))
.pipe(uglify())
.pipe(gulp.dest('./public'));
done();
});// 壓縮 public/images 目錄內圖片(Version<3)// gulp.task('minify-images', function () {// gulp.src('./public/images/**/*.*')// .pipe(imagemin({// optimizationLevel: 5, //類型：Number 默認：3 取值範圍：0-7（優化等級）// progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片// interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染// multipass: false, //類型：Boolean 默認：false 多次優化svg直到完全優化// }))// .pipe(gulp.dest('./public/images'));// });// 壓縮 public/images 目錄內圖片(Version>3)gulp.task('minify-images', function (done) {
gulp.src('./public/images/**/*.*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}), // imagemin.jpegtran({progressive: true}), // 版本升級，改用下面這個
imagemin.mozjpeg({progressive: true,}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('./public/images'));
done();
});//4.0以前的寫法 //gulp.task('default', [// 'minify-html', 'minify-css', 'minify-js', 'minify-images'//]);//4.0以後的寫法// 執行 gulp 命令時執行的任務gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () { console.log("----------gulp Finished----------"); // Do something after a, b, and c are finished.});
根目錄下創建.babelrc
{
'presets': ['es2015'],
"plugins": ["transform-remove-strict-mode"]
}
轉載源地址
https://mp.weixin.qq.com/s/OAyOA28-bTJLE6aKtzpoqg