Hexo博客搭建及Material主题使用指南
更新于： A.D.2022.2.13
前端真好玩qvq
使用GitHub Pages搭建Hexo博客
博客出现问题首先可以阅读文档，其次可以Google解决.
建议搭建完成以后首先看这个文档
然后阅读主题的文档，这个主题的网页文档挂了，可以克隆repo的markdown源代码到本地查看
Step1 | 下载软件
1.安装Git
2.安装Node.js
Step2 | 创建GitHub账号
请参考Hexo文档
1.注册GitHub账号
2.创建Github Pages仓库
3.配置SSH密钥 Github 生成SSH秘钥（详细教程）
Step3 | 使用Git Bash进行搭建操作
请参考Hexo文档
hexo init
Step4 | 写作、美化及功能修改
见下文
Markdown相关问题
表格合并单元格
markdown表格支持功能很少，合并单元格只能用HTML
markdown可以直接插入HTML代码
用http://www.tablesgenerator.com/html_tables编辑可以直接生成HTML代码
插入视频
在Bilibili、Youtube等网站可以直接获取视频外链的HTML代码，在markdown中插入即可，长宽可能需要调整
Material主题配置及修改记录
这个主题一些好的教程
Aplayer
克隆<https://github.com/MoePlayer/APlayer>
参考Aplayer项目文档进行配置即可
我的music.js从cdn仓库里找就行，一中午用手肝了1.5h粘出来的=_=（不怎么好写脚本，只挑了一部分vocaloid的歌，大部分都是中v。如果你喜欢中文vocaloid的话，可以看看（
live2d看板娘
[blogの搭建之next——ctz’s blog(https://ctz45562.github.io/2019/03/21/blog%E3%81%AE%E6%90%AD%E5%BB%BA/)
有一些问题还参考了github-repo的README.
git clone https://github.com/stevenjoezhang/live2d-widget
文件夹live2d-widget放到\themes\主题名称\source下,
打开文件夹里的autoload.js修改为
const live2d_path = "/live2d-widget/";
这个文件夹的名字可以自行修改.
打开\themes\主题名称\layout\_layout.swig/ejs这个文件
在<body>内的开头添加
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
在</body>上方添加
<script src="/live2d-widget/autoload.js"></script>
不同之处可以自行修改layout.ejs文件
黑幕效果
添加CSS
//黑幕
.heimu,.heimu a{
background-color: #252525;
color:#252525;
text-shadow: none;
}::selection{
background:#9ab0c0;
color:#fff;
}
//鼠标悬停
.heimu:hover,.heimu:hover a{
transition:color .13s linear;
color:#fff;
}
使用直接插入HTML
<span class='heimu' title='你知道的太多了'>黑幕测试</span>
效果
黑幕测试
添加Gitalk评论
主题实现好了一些评论的配置，具体看主题的文档即可。
Gitalk 和 Gitment 一样都是一个基于 GitHub Issue 的评论系统。在完成 GitHub Oauth App 的申请并获取 key 后，在主题配置文件中填入
gitalk_repogitalk_ownergitalk_client_idgitalk_client_secret参数即可。
在主题配置文件里修改这几项即可，repo可以用博客的，后两项需要用到GitHub Oauth App的API，搜索引擎自行解决即可。
comment:
use: gitalk
gitalk_repo: # git repo of the hexo
gitalk_owner: # git repo's owner
gitalk_client_id: # github app client id
gitalk_client_secret: # github app client secret
GitHub限制label长度gitalk无法创建issue
对于全新安装有如下解决方案，解决方案如下：hexo根目录\themes\material\layout\_widget\comment\gitalk
在此目录下编辑main.ejs文件
在其中新增如下内容
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
在gittalk下增加id属性，增加后完整文件内容如下：
<!-- Gitalk 评论框 -->
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script>
var gitalk = new Gitalk({
clientID: '<%= theme.comment.gitalk_client_id %>',
clientSecret: '<%= theme.comment.gitalk_client_secret %>',
repo: '<%= theme.comment.gitalk_repo %>',
owner: '<%= theme.comment.gitalk_owner %>',
admin: ['<%= theme.comment.gitalk_owner %>'],
id: md5(window.location.pathname),
// facebook-like distraction free mode
distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
Blog内容搜索
安装hexo-generator-search插件
修改主题配置文件
search:
use: local
swiftype_key:
修改hexo配置文件：
search:
path: search.xml
field: all
markdown文件名大小写问题
问题：
当在本地改变md文件的大小写时，部署到GitHub 上后，改变了文件名的博客不能被访问。
原因：Hexo默认的git操作会忽略大小写。
解决：
- 修改根目录下
.deploy_git/.git/config文件，将ignorecase的值由true改为false - 删除
.deploy_git目录下除.git目录外的其他文件 cd到.deploy_git目录下，手动做一次推送git add . git commit -m "delete all hexo generated files" git push- 重新生成并部署
hexo g hexo d
CSS的修改
文章框体透明
打开Blog\themes\hexo-theme-material-1.5.6\source\css打开style.min.css搜索#scheme-Paradox .material-layout .mdl-card的第一项，在其中添加background-color: rgba(255,255,255,0.8) !important;
Tag颜色及悬停颜色
.material-tagscloud a{
background-color: rgba(255,255,255,.9);
text-decoration:none;
padding: 1px 9px;
margin: 9px 1px;
line-height: 40px;
white-space: nowrap;
transition: .6s;
opacity: .85;
}
.material-tagscloud a:hover{
transition: .6s;
opacity: 1;
background: rgba(156,241,150,.7) !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
copyright位置
#scheme-Paradox .mdl-mini-footer--right-section {
margin-right: 25px;
}
#scheme-Paradox #copyright {
margin-left: auto;
margin-right: 25px;
text-align: center;
}
MathJax
主题配置文件中的mathjax 引用cdnhttps://cdn.bootcss.com/mathjax/2.7.0/MathJax.js
$\LaTeX$换行因为某些网页渲染的原因把\\换为\\\\即可.
修改hexo的渲染规则可以避免LaTex代码出现问题：
https://docs.nexmoe.com/hexo/math.html#%E4%BD%BF%E7%94%A8kramed%E4%BB%A3%E6%9B%BF-marked
MathJax测试
自定义页脚sns链接
svg图标如果在CSS里写实在还有问题放一个文件直接引用也可以.
sns换到右边把ejs文件里的left改为right即可.
License
license: ‘本文由 Name 原创，采用保留署名-非商业性使用-禁止演绎 4.0-国际许可协议‘
鼠标点击烟花特效
themes/主题名称/source/js/src新建fireworks.js文件
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
在themes/主题名称/layout/_layout.swig/ejs的</body>上方添加
<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 type="text/javascript" src="/js/src/fireworks.js"></script>
一些主题的小问题
独立页面toc不是默认为true的，需要手动开
toc: true
独立页面的license会在最后加上index.html，点击这个链接会导致gitalk再次创建issue，目前没有去解决.
页脚时间统计与动态效果
直接找出来我的博客页面上的js插入项，然后使用即可
RSS订阅
参考博客文档在_config.yml中打开选项即可
jsDelivr加速js、css文件
1.博客内部的文件：参考博客文档配置jsdelivr选项即可
2.手动添加的文件：手动上传至cdn仓库，并修改链接
天坑
咕了很久以后就会全忘了，再改Blog就凉了，有空就填一些。
修改后没记录
代码高亮
功能页面 | 独立页面
material图标
想修改的功能
插入pdf
代码复制功能
鼠标特效fireworks遮挡部分组件
文章头图自定义
hexo-addlink
文章置顶
字体，代码字体
背景js动态效果
Site Information
npm install hexo-math —save
Git指令
常用指令
克隆
git clone repo
克隆分支
git clone -b branch_name repo
上传文件
git add .
git commit -m 'update_name'
git push origin branch_name
Hexo指令
hexo init
hexo clean g d
hexo s
hexo new name categories
分支
https://zdran.com/20180326.html
创建源文件git目录
git init
git remote add origin https://github.com/xx/xx.github.io // 填入你的repo地址
创建分支
git checkout -b branch_name
git add .
git commit -m 'add branch_name'
git push origin branch_name
切换分支
git checkout branch_name
本文由 落影汐雾 原创，采用 保留署名-非商业性使用-禁止演绎 4.0-国际许可协议
本文链接：https://x.lyxw.xyz/2019/blog/