常见操作:

1
语雀导出markdown然后在发布的时候!可以先不写标题!导出为markdown后在篇头就可以写标题了,不然无法写标题。
1
2
3
4
5
6
# 清除缓存文件
hexo clean
# 生成静态文件
hexo g
# 部署网站
hexo d
1
2
3
4
5
---
title: 文章标题
categories: [分类名称]
tags: [标签1, 标签2]
---

基础教程:

【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布_fluid文章页设置-CSDN博客
ps:想修改某些配置可以在_config.yml配置文件中根据想修改部位特征的关键字查询。

常见问题:

1.使用Valine评论无法正常评论:

原因:
1.修改Valine配置的时候没有注意appid和后面的值要有空格。
2.要在LeanCloud的数据储存中创建Comment类

image.png
LeanCloud

2.上传的md文档使用了外部图片链接导致博客页面加载不出来报403错误(特别是语雀导为md文档时照片报403):

原因:是语雀设置防盗链策略,不允许图片被其他域名引用。
解决方法:
方法一.在不能显示的md文档前添加

1
2
<meta name="referrer" content="no-referrer">

方法二:在全局CSS或者主题的某个样式表中(如layout/_partials/head.ejs)设置默认的referrer策略,也就是在layout/_partials/head.ejs中的head标签添加如下代码:

1
<meta name="referrer" content="no-referrer">

上面2种方法都需要执行hexo g命令启动后才能显示!直接是无法显示的!

3.代码高亮使用了highlightjs库,就不用开启行号的功能了,不然md文档中的代码无法正常换行,显示在一行。

4.在md中设置的文档标题无法在博客中显示的,需要在文章头部添加如下信息:

1
2
3
4
5
---
title: 文章标题
categories: [分类名称]
tags: [标签1, 标签2]
---

5.每次上传文章后,githubpage绑定的域名消失:

hexo 生成的博客的 source 目录下新建一个 CNAME 文件,然后在这个文件中填入你的域名

这里写图片描述

6.上传的长文章无法显示:

个人原因是上传的markdown文档中有一个表格!该表格hexo自带的markdown渲染器无法渲染导致该表格后的内容都无法显示!

进阶:

1.为了更好的管理博客可以安装:npm install --save hexo-admin;

2.添加网站运行时间:

页脚添加网站运行时间,只需要在主题配置中的 footer: content 添加:

1
2
3
4
5
6
7
8
footer:
content: '
<div>
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script src="/js/duration.js"></script>
</div>
'

之后在主题目录下创建 source/js/duration.js,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var now = new Date();
function createtime() {
var grt= new Date("03/03/2021 12:00: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);

3.添加一言:

修改_config.yml的slogan配置为如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
slogan:
enable: true

# 为空则按 hexo config.subtitle 显示
# If empty, text based on `subtitle` in hexo config
text: "太阳初升之时!你会回想起曾经的自己吗?"

# 通过 API 接口作为首页副标题的内容,必须返回的是 JSON 格式,如果请求失败则按 text 字段显示,该功能必须先开启 typing 打字机功能
# Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
api:
enable: true

# 请求地址
# Request url
url: "https://v1.hitokoto.cn/"

# 请求方法
# Request method
# Available: GET | POST | PUT
method: "GET"

# 请求头
# Request headers
headers: {}

# 从请求结果获取字符串的取值字段,最终必须是一个字符串,例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content'];如果返回是列表则自动选择第一项
# The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
keys: ['hitokoto']

4.视频背景:目前是静态托管,以后再说:

教程

1
#---------------------------# 首页# Home Page#---------------------------index:  # 首页 Banner 头图,可以是相对路径或绝对路径,以下相同  # Path of Banner image, can be a relative path or an absolute path, the same on other pages  banner_img: /img/default.png   # 首页 Banner 使用随机视频  # true 开启  false 关闭  banner_video: true

5.添加背景黑色线条:

1
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

将上面的代码复制,并在此目录下 themes/fluid/source/js/DynamicLine.js 创建文件,将代码全部粘贴进去。
然后在主题配置 _config.yml 中找到 custom_js 或者 custom_css,修改如下:

1
2
custom_js:
- /js/DynamicLine.js

6.Note美化:

7.固定背景:

魔改教程