櫻花???
在簡書上看很別扭雾棺，建議在這網(wǎng)址看
目錄和文件分析
分析下themes/Sakura目錄結(jié)構(gòu)和文件
首先分析下目錄瞒窒，主要包括以下幾個
languages? 這個文件夾中存放的是語言文件斩例，主要是博客中的一些字符以簡體中文、繁體中文哩罪、英文顯示的定義
layout? 這個是布局文件夾讲衫，所有的博客頁面HTML和JavaScript以ejs模板存放在這
Search? 這里存放的是頁內(nèi)搜索的ejs文件
_partial? 這里的和下面的都是公共的頁面，可以引入到HTML的任意位置
_widget
source? 這個文件夾和博客根目錄下的source文件夾是一樣的性锭，但是為了存放主題相關(guān)的文件
css? 這里存放css文件
fonts? 字體文件
images? 圖片
js? js文件
代碼插入位置
再接著就是需要知道我們插入的文件和代碼應(yīng)該放到哪里
一般來說我們的js赠潦、css代碼一般以文件形式存放到j(luò)s、css文件夾中草冈，接著再引入HTML代碼中她奥，引入位置一般在<head></head>標(biāo)簽中，當(dāng)然啦css怎棱、js位置也不是固定的哩俭，你也可以直接放到HTML頁面結(jié)構(gòu)的中央和結(jié)尾，也就是<body></body>之間或者</body>之后拳恋、</head>之前
要是CSS或者JavaScript的代碼很少的話凡资，可以直接放到HTML中，不需要先存為文件再引入
具體參考：HTML中引入js、css的三種方式——行內(nèi)樣式隙赁、頁面中樣式垦藏、外部文件導(dǎo)入
就對應(yīng)我們現(xiàn)在要修改的文件中的_partial目錄下head.ejs——這個<html><head></head>就在這個文件中
footer.ejs是底部元素，一般個人伞访、企業(yè)版權(quán)寫在這里掂骏，因為一般大部分文件都會引入，因此js代碼也可以寫在這
layout.ejs這個也是所有頁面需要引入的厚掷，因為</body></html>標(biāo)簽在這里
要是想將功能單獨添加到某個頁面弟灼，那你就找到那個ejs文件放到里面就醒了
博客原有功能的修改
博客原有功能修改主要指的是博客根目錄配置文件和主題配置文件的修改
因為大部分的都已經(jīng)在上次的博客搭建文章中寫了
就不多說了吧
主要包括各種頁面結(jié)構(gòu)的修改：
首頁輪播圖
站點圖標(biāo)、頭像冒黑、贊賞等圖片的鏈接修改
個人化的站點標(biāo)題田绑、副標(biāo)題、描述抡爹、關(guān)鍵詞等
導(dǎo)航欄的修改掩驱、添加、刪除等
通知的修改
startdash的圖片豁延、鏈接修改
社交鏈接的修改等
這上面這些應(yīng)該都是不需要再講了的
導(dǎo)航欄中的關(guān)于
主要是關(guān)于>我昙篙？這個的修改
這個要修改的文件在Sakura/source/js目錄下腊状，名字為botui.js
主要修改content后面雙引號里的內(nèi)容诱咏，自行修改為自己的就行
導(dǎo)航欄中的客戶端
這個可以使用Fusion App把你自己的博客封裝成APP
然后放到藍奏云上，生成二維碼放上來
導(dǎo)航欄中的RSS
根目錄下的配置文件中已經(jīng)有了
#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
當(dāng)然啦缴挖，如果本來就能顯示內(nèi)容袋狞，那么就不需要安裝了
每個頁面中的頂部圖片
就比如關(guān)于>主題這個頁面
我們進入根目錄下，再進入source目錄找到theme-sakura映屋，進入該目錄點擊index.md苟鸯，修改photos后面的內(nèi)容，改為你想要的圖片鏈接
---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后面的圖片鏈接
這些都是這個主題支持的內(nèi)容早处，在上篇文章中寫過的文章模板
---
title: 文章標(biāo)題
author: 作者名
avatar: 作者頭像鏈接
authorLink: hojun.cn? #作者的域名
authorAbout: 一個好奇的人? #關(guān)于
authorDesc: 一個好奇的人? #作者描述
categories: 分類
date: 2018-12-12 22:16:01 #時間，這個一般都自動創(chuàng)建
comments: true? # 是否需要留言
tags: ? ? ?? # 下面可以寫多個標(biāo)簽
- web
- 悅讀
keywords: Sakura ? # 文章關(guān)鍵詞
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: 朝花夕誓——于離別之朝束起約定之花? # 番的中文標(biāo)題
?? status: 已追完? # 追番狀態(tài)
?? progress: 100 ? # 追番進度
?? jp: さよならの朝に約束の花をかざろう ? # 日文標(biāo)題
?? time: 2018-02-24 SUN.? # 這個是出版的時間
?? desc: 這里是你追的番的描述
---
清單下的歌單和左下角懸浮歌單
主要是修改你的id瘫析，歌單id的獲取方式：
進入網(wǎng)易云網(wǎng)頁版https://music.163.com/
登錄賬號砌梆，選擇一個歌單打開
瀏覽器的鏈接將會顯示id，就最后一個字段贬循，把那些數(shù)字復(fù)制到下面就行
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/cdn@1.4/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/cdn@1.4/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目錄下文件的應(yīng)該就這些了
接下來就直接按點添加功能和美化了
添加標(biāo)題惡搞
默認(rèn)的是離開時候還是現(xiàn)實自己的文字標(biāo)題
添加之后離開和回到這個頁面時顯示
為了達到上述效果,我們可以在head.ejs或者footer.ejs中加入代碼
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
例如加入到head.ejs的該位置
加入之后刷新就能生效了
鼠標(biāo)點擊特效
單擊特效有很多種咸包，這里給出三個吧
現(xiàn)在我們把這個代碼放到layout.ejs的``標(biāo)簽前
<!-- 點擊出現(xiàn)社會主義彩色文字 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script><!-- 點擊出現(xiàn)愛心 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script><!-- 點擊出現(xiàn)彩色氣球爆炸效果 --><canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/clickBom.js"></script>
可以分別添加一種，也可以多種混合杖虾，但是三種一起使用感覺效果不太好
下面是前兩者結(jié)合的效果：
最后一種：
這個有很多個烂瘫，這里展示一個
把代碼插入到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>
背景添加動態(tài)線條坟比，隨鼠標(biāo)動
仍是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調(diào)用開發(fā)者選項的用戶
還有禁用了鼠標(biāo)右鍵，可以開啟禁用鼠標(biāo)左鍵拖動選擇文字
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>
添加畫板娘
這次不用插件來添加温算，直接引入js代碼
<link rel="stylesheet" > <!-- 這條在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/
挑選樣式之后，復(fù)制相應(yīng)的代碼注竿，粘貼到合適的地方
加入預(yù)加載
sakura主題集成了圖片懶加載茄茁，可是頁面放到GitHub加載還是很慢，matery主題就加入了預(yù)加載巩割，從那里得到靈感裙顽，因此我們加入預(yù)加載
還是在layout.ejs中添加
<script src="http://instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
官網(wǎng)在這：預(yù)加載https://instant.page/
添加計數(shù)
主要使用的是不蒜子和LeanCloud
LeanCloud我使用起來并不理想，因此不講宣谈，想要了解自己去官網(wǎng)看
不蒜子的：
<script src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
再進入不蒜子官網(wǎng)查看訪問量pv愈犹、用戶訪問量uv使用
添加一言API、詩詞
今日詩詞 https://www.jinrishici.com/#
提供了詩詞的API
我們將這個詩詞放到以前的描述那里闻丑，社交圖標(biāo)的上方
修改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的可以前往這個網(wǎng)址查看使用：
一言開發(fā)者中心 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/whatwg-fetch@2.0.3/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>
添加底部的網(wǎng)站運行時間
在footer.ejs選擇合適位置添加代碼
<span id="timeDate">載入天數(shù)...</span><span id="times">載入時分秒...</span><script>
? var now = new Date();
? function createtime() {
? ? var grt= new Date("03/08/2020 16:44:00");//此處修改你的建站時間或者網(wǎng)站上線時間
? ? 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>
添加底部動態(tài)滾動文字
<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 = ["青青陵上柏，磊磊澗中石侥祭。", "人生天地間叁执，忽如遠(yuǎn)行客。","斗酒相娛樂矮冬，聊厚不為薄谈宛。", "驅(qū)車策駑馬，游戲宛與洛胎署。","洛中何郁郁吆录，冠帶自相索。","長衢羅夾巷琼牧，王侯多第宅恢筝。","兩宮遙相望，雙闕百余尺障陶。","極宴娛心意滋恬，戚戚何所迫？"].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
這個網(wǎng)址查看詳情
可以選用小視圖抱究，添加到link.ejs中
頂部加載條
這個sakura有恢氯，但是想記錄一下
head中加入
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><link 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>
修改鼠標(biāo)樣式
在style.css中添加,sakura已有，可不管，當(dāng)然啦勋拟，也可以去找一下其他好看的圖標(biāo)
// 鼠標(biāo)樣式
? * {
? ? ? 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
? }
評論系統(tǒng)
sakura自帶的系統(tǒng)為valine勋磕，我們可以自行替換成其他的
就比如來必力，前往
來必力官網(wǎng) https://www.livere.com/
注冊登錄后敢靡，點擊菜單欄的【安裝】挂滓，出現(xiàn)這個界面，直接點擊【現(xiàn)在安裝】
前往管理頁啸胧，點擊左邊的【代碼管理】
你將會看到這樣的代碼
data-uid后面的雙引號中的內(nèi)容剪切出來
然后到主題配置文件下修改赶站，找到最下面的valine
將valine改成false，添加最后兩行
# Valine
valine: false
v_appId: Cu2IPPUW8BnkmwzFa8WrS9VC-gzGzoHsz
v_appKey: kgcNfaHXq91mfCaAIcbjGChl
# livere
livere: true
? data_uid: 剛剛復(fù)制的uid
接著把下面的代碼復(fù)制到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
在線聯(lián)系
DaoVoice 在線聯(lián)系
前往網(wǎng)站
DaoVoice https://www.daovoice.io/
可以使用GitHub或者微信登錄纺念，也可以前往
這里注冊 http://dashboard.daovoice.io/get-started
進入之后點擊應(yīng)用設(shè)置贝椿，再點擊安裝到網(wǎng)站
再將第一個代碼復(fù)制到``之前，將下面兩個復(fù)制到layout.ejs
添加優(yōu)美的標(biāo)簽頁
這個標(biāo)簽頁和分類頁提取自matery陷谱，不得不說matery真的很漂亮
首先我們要創(chuàng)建幾個文件烙博，文件所在目錄如下
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> 文章標(biāo)簽
? ? ? ? ? ? </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" >
<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>
將這段代碼復(fù)制到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查看頁面
添加優(yōu)美的分類頁
接著創(chuàng)建幾個文件渣窜，文件所在目錄如下
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 : '文章分類數(shù)量'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }]
? ? };
? ? radarChart.setOption(option);
</script>
接著用命令hexo new page "categories"創(chuàng)建分類頁
修改博客根目錄下source/categories/index.md
---
title: categories
date: 2020-03-09 13:50:05
layout: categories
---
http://localhost:4000/categories
查看
接著就是把這兩個頁面放到導(dǎo)航欄上面去
修改主題配置文件宪躯，將這兩行代碼放到留言板之前
? ? 標(biāo)簽: {path: /tags/, fa: fa-tag }
? 分類: {path: /categories/, fa: fa-bookmark }
已經(jīng)集成的一些插件
emoji表情：
hexo-filter-github-emojis https://github.com/crimx/hexo-filter-github-emojis
正常插件安裝版畫板娘：
hexo-helper-live2d https://github.com/EYHN/hexo-helper-live2d
圖片懶加載(sakura已經(jīng)有了乔宿，但不是這種方式)：
hexo-lazyload-image https://www.npmjs.com/package/hexo-lazyload-image
hexo-lazyload-image-enhance https://github.com/barretlee/hexo-lazyload-image-enhance
字?jǐn)?shù)統(tǒng)計(好像沒裝)：
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
文章末尾版權(quán)信息添加
首先我們在_partial目錄下新建文件article_copyright.ejs
<div class="my_post_copyright">
? <script src="http://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>本文標(biāo)題:</span><%= post.title %></p>
? <p><span>文章字?jǐn)?shù):</span><span class="post-count"><%=wordcount(post.content) %></span></p>
? <p><span>文章作者:</span><a? title="<%=config.author%>"><%=config.author%></a></p>
? <p><span>發(fā)布時間:</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="點擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"? aria-label="復(fù)制成功！"></i></span>
? </p>
? <p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國際</a> 轉(zhuǎn)載請保留原文鏈接及作者眷唉。</p>
</div>
<script>
? ? var clipboard = new Clipboard('.fa-clipboard');
? ? $(".fa-clipboard").click(function(){
? ? ? clipboard.on('success', function(){
? ? ? ? swal({
? ? ? ? ? title: "",
? ? ? ? ? text: '復(fù)制成功',
? ? ? ? ? icon: "success",
? ? ? ? ? showConfirmButton: true
? ? ? ? ? });
? ? });
? ? });
</script>
需要文章字?jǐn)?shù)的予颤，一定要先安裝字?jǐn)?shù)統(tǒng)計插件囤官，上面列出了冬阳，不用就把那行注釋掉
接著將下面的代碼
? ? ? ? <% if (post.copyright) { %>
? ? ? ? ? <%- partial('../_partial/article_copyright') %>
? ? ? ? <% } %>
復(fù)制到common-article.ejs的這個位置
將CSS代碼復(fù)制到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文件，內(nèi)容為你的域名刑顺，例如我的
www.sakura521.cn
接著去GitHub pages更改域名氯窍，開啟SSL
前往阿里云的的域名解析頁面添加CANME解析
@ → 用戶名.github.io
之后就可以以新的域名訪問了 https://www.sakura521.cn
網(wǎng)站收錄
主要是向各大搜索引擎提交鏈接
谷歌收錄
360站長平臺 http://zhanzhang.so.com/sitetool/site_manage
百度搜索資源平臺 https://ziyuan.baidu.com/linksubmit/
百度的需要注意一下，由于GitHub將百度封了蹲堂，因此你需要把博客雙線部署到gitlab或coding才能收錄
搜狗站長平臺 http://zhanzhang.sogou.com/
網(wǎng)站分析
百度統(tǒng)計
前往百度統(tǒng)計官網(wǎng)
Baidu統(tǒng)計 https://#baidu.com/web/welcome/login
以百度賬號登錄后狼讨，點擊【管理】，在【網(wǎng)站列表】中新增網(wǎng)站
獲取代碼柒竞，將代碼復(fù)制到標(biāo)簽前政供，進行代碼檢測
以后就可以查看訪問情況了
cnzz
點擊
友盟+ https://passport.umeng.com/login?appId=cnzz
前往，注冊登錄后，添加站點
根據(jù)自己喜好獲取代碼
粘貼到前
之后就可以點擊查看信息了
小技巧
博客備份
有一個博客備份插件
hexo-git-backup https://github.com/coneycode/hexo-git-backup
能夠傳到backup分支
我們還可以把整個博客文件夾上傳到GitHub私有倉庫
本地預(yù)覽
使用命令換個端口預(yù)覽hexo s -p 5000
也可以添加下列代碼到博客配置文件中,使用hexo s時將會以5000端口運行
server:
? port: 5000
? compress: true
? header: true
快捷命令
alias設(shè)置命令別名布隔，將下面代碼復(fù)制到*.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命令就可以本地預(yù)覽离陶、hd部署、gp上傳到倉庫
靜態(tài)資源壓縮
博客使用了圖片懶加載和預(yù)加載雖然加快了一點速度衅檀，但訪問還是有點慢
那么直接把html招刨、css、js代碼中的空格去掉，進行壓縮
還有壓縮一下圖片脆栋，能夠一定程度上縮小public文件夾的大小
參考這篇文章：
Hexo博客使用gulp壓縮靜態(tài)資源
安裝全局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 babel-core@6.26.3 --save
npm install gulp-babel@7.0.1 --save
npm install babel-preset-es2015@6.24.1 --save
# gulp-babel 取消嚴(yán)格模式方法("use strict")
npm install babel-plugin-transform-remove-strict-mode --save
問題：如果安裝gulp-imagemin錯誤請執(zhí)行以下語句sudo npm i gulp-imagemin --unsafe-perms
博客根目錄創(chuàng)建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代碼轉(zhuǎn)譯為可執(zhí)行的JS代碼
? ? ? ? ? ? presets: ['es2015'] // es5檢查機制
? ? ? ? }))
? ? ? ? .pipe(uglify())
? ? ? ? .pipe(gulp.dest('./public'));
? ? done();
});// 壓縮 public/images 目錄內(nèi)圖片(Version<3)// gulp.task('minify-images', function () {//? ? gulp.src('./public/images/**/*.*')//? ? ? ? .pipe(imagemin({//? ? ? ? ? ? optimizationLevel: 5, //類型：Number? 默認(rèn)：3? 取值范圍：0-7（優(yōu)化等級）//? ? ? ? ? ? progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片//? ? ? ? ? ? interlaced: false, //類型：Boolean 默認(rèn)：false 隔行掃描gif進行渲染//? ? ? ? ? ? multipass: false, //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化//? ? ? ? }))//? ? ? ? .pipe(gulp.dest('./public/images'));// });// 壓縮 public/images 目錄內(nèi)圖片(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以后的寫法// 執(zhí)行 gulp 命令時執(zhí)行的任務(wù)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.});
根目錄下創(chuàng)建.babelrc
{
? ? 'presets': ['es2015'],
? ? "plugins": ["transform-remove-strict-mode"]
}
