Sakura主题美化
接上次的文章
0、前言
做hexo的美化工作，主要是：
修改布局文件(HTML模板ejs文件)，添加功能
做好CSS
还是得对HTML(结构)、CSS(表现)、Javascript(行为)有一定的了解
目录和文件分析
现在我们来分析一下thems/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文件放到里面就醒了
好了，下面就正式开始添加功能和修改样式了
1、博客原有功能修改
博客原有功能修改主要指的是博客根目录配置文件和主题配置文件的修改
因为大部分的都已经在上次的博客搭建文章中写了
就不多说了吧
不讲了的
主要包括各种页面结构的修改：
首页轮播图
站点图标、头像、赞赏等图片的链接修改
个人化的站点标题、副标题、描述、关键词等
导航栏的修改、添加、删除等
通知的修改
startdash的图片、链接修改
社交链接的修改等
这上面这些应该都是不需要再讲了的
导航栏中的关于
主要是关于>我？这个的修改
这个要修改的文件在Sakura/source/js目录下，名字为botui.js
主要修改content后面双引号里的内容，自行修改为自己的就行
function bot_ui_ini() { var botui = new BotUI("hello-mashiro")
botui.message.add({
delay: 800,
content: "Hi, there👋"
}).then(function () {
botui.message.add({
delay: 1100,
content: "这里是 Mashiro"
}).then(function () {
botui.message.add({
delay: 1100,
content: "一个可爱的蓝孩子~"
}).then(function () {
botui.action.button({
delay: 1600,
action: [{
text: "然后呢？😃",
value: "sure"
}, {
text: "少废话！🙄",
value: "skip"
}]
}).then(function (a) { "sure" == a.value && sure(); "skip" == a.value && end()
})
})
})
}); var sure = function () {
botui.message.add({
delay: 600,
content: "😘"
}).then(function () {
secondpart()
})
},
end = function () {
botui.message.add({
delay: 600,
content: ""
})
},
secondpart = function () {
botui.message.add({
delay: 1500,
content: "目前就读于上海财经大学"
}).then(function () {
botui.message.add({
delay: 1500,
content: "向往技术却误入商科，但后来喜欢上了经济学…"
}).then(function () {
botui.message.add({
delay: 1200,
content: "因为数据分析也需要Coder嘛"
}).then(function () {
botui.message.add({
delay: 1500,
content: "主攻 R 语言和 Python，略懂 STATA，偶尔也折腾 HTML/CSS/JavaScript/PHP"
}).then(function () {
botui.message.add({
delay: 1500,
content: "研究的方向，是经济/金融方向的数据分析（data science）以及机器学习（machine learning）"
}).then(function () {
botui.message.add({
delay: 1800,
content: "喜欢画画，希望有一天能够被称为画师"
}).then(function () {
botui.action.button({
delay: 1100,
action: [{
text: "为什么叫Mashiro呢？🤔",
value: "why-mashiro"
}]
}).then(function (a) {
thirdpart()
})
})
})
})
})
})
})
},
thirdpart = function () {
botui.message.add({
delay: 1E3,
content: "Mashiro以及站名都来自一部动画，因为和主角有一样的爱好~ 如果有兴趣可以找找首页上的视频~"
}).then(function () {
botui.action.button({
delay: 1500,
action: [{
text: "为什么是白猫呢？🤔",
value: "why-cat"
}]
}).then(function (a) {
fourthpart()
})
})
},
fourthpart = function () {
botui.message.add({
delay: 1E3,
content: "因为对GitHub有种执念… "
}).then(function () {
botui.message.add({
delay: 1100,
content: "而且我真的是猫控！"
}).then(function () {
botui.action.button({
delay: 1500,
action: [{
text: "域名有什么含意吗？(ง •_•)ง",
value: "why-domain"
}]
}).then(function (a) {
fifthpart()
})
})
})
},
fifthpart = function () {
botui.message.add({
delay: 1E3,
content: "emmmm，看备案信息你就知道了=.= 本来想要zheng.xin的，但50万真买不起。。"
}).then(function () {
botui.message.add({
delay: 1600,
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/cdn@1.4/img/banner/music.jpg
---
{% raw %}
<meting-js
server="netease"
type="playlist"
id="2731690811"
mutex="true">
</meting-js>
<meting-js
server="netease"
type="playlist"
id="419239189"
mutex="true">
</meting-js>
{% 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目录下文件的应该就这些了
接下来就直接按点添加功能和美化了
2、添加标题恶搞
默认的是离开时候还是现实自己的文字标题
添加之后离开和回到这个页面时显示
挺多的js都直接集合到我的cdn中了，大部分都是网上到处搜查的
为了达到上述效果,我们可以在head.ejs或者footer.ejs中加入代码
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>例如加入到head.ejs的该位置
加入之后刷新就能生效了
3、添加鼠标单击特效
单击特效有很多种，这里给出三个吧
现在我们把这个代码放到layout.ejs的</body>标签前
<!-- 点击出现社会主义彩色文字 --><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>可以分别添加一种，也可以多种混合，但是三种一起使用感觉效果不太好
下面是前两者结合的效果：
最后一种：
4、鼠标滑过的特效
这个有很多个，这里展示一个
把代码插入到layout.ejs中
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/xuehua.js"></script>效果如下：
5、背景显示飘动的彩带
在需要的页面添加，我们还是在所有页面都加上，layout.ejs中加入代码
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/piao.js"></script>6、背景添加动态线条，随鼠标动
仍是layout.ejs中
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>7、樱花飘落或雪花飘落
仍是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>选择一个就行了
8、禁用一些按键
为了阻止某些使用F12、Ctrl+Alt+I调用开发者选项的用户
还有禁用了鼠标右键，可以开启禁用鼠标左键拖动选择文字
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>9、添加画板娘
这次不用插件来添加，直接引入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
10、添加前往GitHub的彩带
前往
GitHub Ribbons https://github.blog/2008-12-19-github-ribbons/
挑选样式之后，复制相应的代码，粘贴到合适的地方
11、加入预加载
sakura主题集成了图片懒加载，可是页面放到GitHub加载还是很慢，matery主题就加入了预加载，从那里得到灵感，因此我们加入预加载
还是在layout.ejs中添加
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>官网在这：预加载https://instant.page/
12、添加计数
主要使用的是不蒜子和LeanCloud
LeanCloud我使用起来并不理想，因此不讲，想要了解自己去官网看
不蒜子的：
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>再进入不蒜子官网查看访问量pv、用户访问量uv使用
13、添加一言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/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>14、添加底部的网站运行时间
在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>15、添加底部动态滚动文字
<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>16、加入天气插件
前往
中国天气 https://cj.weather.com.cn/plugin/pc
这个网址查看详情
可以选用小视图，添加到link.ejs中
17、顶部加载条
这个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>18、修改鼠标样式
在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
}19、评论系统
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><!-- City版安装代码已完成 --><% } %>20、在线联系
DaoVoice 在线联系
前往网站
DaoVoice https://www.daovoice.io/
可以使用GitHub或者微信登录，也可以前往
这里注册 http://dashboard.daovoice.io/get-started?invite_code=da070d64
邀请码填：da070d64
进入之后点击应用设置，再点击安装到网站
再将第一个代码复制到</head>之前，将下面两个复制到layout.ejs
21、添加优美的标签页
这个标签页和分类页提取自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查看页面
22、添加优美的分类页
接着创建几个文件，文件所在目录如下
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 }23、已经集成的一些插件
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
24、文章末尾版权信息添加
首先我们在_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的这个位置
将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;
}25、添加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之后，访问不存在的页面就会跳出来了
26、域名绑定
在博客根目录下的source目录下新建CNAME文件，如果主题source目录下有这个文件请删除
修改CNAME文件，内容为你的域名，例如我的
wallleap.cn接着去GitHub pages更改域名，开启SSL
前往阿里云的的域名解析页面添加CANME解析
@ → 用户名.github.io
之后就可以以新的域名访问了 https://wallleap.cn
27、网站收录
主要是向各大搜索引擎提交链接
谷歌收录
360站长平台 http://zhanzhang.so.com/sitetool/site_manage
百度搜索资源平台 https://ziyuan.baidu.com/linksubmit/
百度的需要注意一下，由于GitHub将百度封了，因此你需要把博客双线部署到gitlab或coding才能收录
搜狗站长平台 http://zhanzhang.sogou.com/
28、网站分析
百度统计
前往百度统计官网
Baidu统计 https://tongji.baidu.com/web/welcome/login
以百度账号登录后，点击【管理】，在【网站列表】中新增网站
获取代码，将代码复制到标签前，进行代码检测
以后就可以查看访问情况了
cnzz
点击
友盟+ https://passport.umeng.com/login?appId=cnzz
前往，注册登录后，添加站点
根据自己喜好获取代码
粘贴到前
之后就可以点击查看信息了
29、小技巧
博客备份
有一个博客备份插件
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上传到仓库
30、静态资源压缩
博客使用了图片懒加载和预加载虽然加快了一点速度，但访问还是有点慢
那么直接把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 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 取消严格模式方法("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"]
}好的呢，这篇文章就到这里啦
可以点击左下角的【阅读原文】前往博客查看哦
这么多，可算是累死我了
再见~