安装nodejs
访问 nodejs官网 下载并安装nodejs
cd /soft/bak
wget https://nodejs.org/dist/v12.19.0/node-v12.19.0-linux-x64.tar.xz
tar xvf node-v12.19.0-linux-x64.tar.xz
添加环境变量
vi /etc/profile
PATH=$PATH:/soft/nodejs/bin
source /etc/profile
node -v
npm -v
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
安装gulp
npm install gulp -g
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save
npm install hexo-neat --save
安装hexo
cd /www/hexo
cnpm install -g hexo-cli
hexo -v
hexo init
安装git支持
cnpm install --save fill-range@^7.0
cnpm install --save hexo-deployer-git
deploy:
type: git
repo: https://github.com/powerglq/powerglq.github.io
branch: master
message: [message]
代码高亮
highlight:
enable: false
line_number: false
auto_detect: true
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: false
tab_replace: ''
安装matery主题
git clone https://github.com/blinkfox/hexo-theme-matery.git hexo-theme-matery
配置github
vi _config.yml
deploy:
type: git
repo: https://github.com/powerglq/powerglq.github.io.git
branch: master
发布github
hexo clean
hexo g
hexo d
本地预览
hexo s
localhost:4000 预览
收藏的主题
git clone https://gitee.com/songofseven/hexo-theme-next.git themes/next
git clone git://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet
npm install eslint@^4.12
npm install ajv@^6.9
TypeError: Cannot read property 'enable' of undefined 删除modouls
文章头设置
首先为了新建文章方便，建议将/scaffolds/post.md修改为如下代码：
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
toc: true
mathjax: true
summary:
tags:
categories:
这样新建文章后不用你自己补充了，修改信息就行
添加404页面
在主题配置文件\themes\matery_config.yml中的menu设置添加一个
404:
url: /404
icon: fas fa-heartbeat
原来的主题没有404页面，加一个也不是什么难事。首先在/source/404目录下新建一个index.md，内容如下：
title: 404
date: 2020-07-19 16:41:10
type: "404"
layout: "404"
description: "你来到了没有知识的荒原 :("
然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：
<style type="text/css">
/* don't remove. */
.about-cover { height: 75vh; }
</style>
<div class="bg-cover pd-header about-cover">
<div class="container">
<div class="row">
<div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
<div class="brand">
<div class="title center-align"> 404 </div>
<div class="description center-align">
<%= page.description %>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 每天切换 banner 图. Switch banner image every day. $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
添加动漫人物
其实三步就行了，不用像网上有些教程那么复杂。
第一步：
npm install --save hexo-helper-live2d第二步：
npm install live2d-widget-model-shizuku第三步：
在根目录配置文件中添加如下代码：
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7
然后hexo g再hexo s就能预览出效果了，但是有个注意的地方，我发现这个动漫人物最好不要和不蒜子同时使用，不然不蒜子会显示不出来。
图片添加水印
为了防止别人抄袭你文章，可以把所有的图片都加上水印，方法很简单。
首先在博客根目录下新建一个watermark.py，代码如下：
# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont
def watermark(post_name):
if post_name == 'all':
post_name = '*'
dir_name = 'source/_posts/' + post_name + '/*'
for files in glob.glob(dir_name):
im = Image.open(files)
if len(im.getbands()) < 3:
im = im.convert('RGB')
print(files)
font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
draw = ImageDraw.Draw(im)
draw.text((im.size[0] / 2, im.size[1] / 2),
u'@yourname', fill=(0, 0, 0), font=font)
im.save(files)
if __name__ == '__main__':
if len(sys.argv) == 2:
watermark(sys.argv[1])
else:
print('[usage] <input>')
字体也放根目录下，自己找字体。然后每次写完一篇文章可以运行python3 watermark.py postname添加水印，如果第一次运行要给所有文章添加水印，可以运行python3 watermark.py all。
添加百度统计和谷歌统计代码
首先打开百度站长平台，然后点击添加网站，输入网址并选择领域。
接下来要验证网站所有权，有三种方式，推荐采用HTML标签验证，最简单，将代码复制出来。
打开themes/matery/layout/_partial/head.ejs，修改下面两行：
<meta name="baidu-site-verification" content="xxx" />
<meta name="google-site-verification" content="xxx" />
其中content内容改成你自己刚刚复制出来的就行了。
添加雪花特效
首先在themes/matery/source/libs/others下新建文件snow.js，并插入如下代码：
/*样式一*/ (function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */ }, options = $.extend({}, defaults, options); var interval= setInterval( function(){ var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,'linear',function(){ $(this).remove() }); }, options.newOn); }; })(jQuery); $(function(){ $.fn.snow({ minSize: 5, /* 定义雪花最小尺寸 */ maxSize: 50,/* 定义雪花最大尺寸 */ newOn: 300 /* 定义密集程度，数字越小越密集 */ }); }); /*样式二*/ /* 控制下雪 */ function snowFall(snow) { /* 可配置属性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 最多片数 */ this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */ this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */ } /* 兼容写法 */ requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame; /* 开始下雪 */ snowFall.prototype.start = function(){ /* 创建画布 */ snowCanvas.apply(this); /* 创建雪花形状 */ createFlakes.apply(this); /* 画雪 */ drawSnow.apply(this) } /* 创建画布 */ function snowCanvas() { /* 添加Dom结点 */ var snowcanvas = document.createElement("canvas"); snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"); document.getElementsByTagName("body")[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext("2d"); /* 窗口大小改变的处理 */ window.onresize = function() { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ } } /* 雪运动对象 */ function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */ this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */ this.size = Math.random() * flakeSize + 2; /* 形状 */ this.maxSize = flakeSize; /* 最大形状 */ this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */ this.fallSpeed = fallSpeed; /* 坠落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random() / 30; /* 步长 */ this.step = 0 /* 步数 */ } flakeMove.prototype.update = function() { var x = this.x, y = this.y; /* 左右摆动(余弦) */ this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飞出边界的处理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) { this.reset(canvas.width, canvas.height) } }; /* 飞出边界-放置最顶端继续坠落 */ flakeMove.prototype.reset = function(width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.maxSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0; }; // 渲染雪花-随机形状（此处可修改雪花颜色！！！） flakeMove.prototype.render = function(ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */ snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */ snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */ ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }; /* 创建雪花-定义形状 */ function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)) } } /* 画雪 */ function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect(0, 0, canvas.width, canvas.height); for (var e = 0; e < maxFlake; e++) { flakes[e].update(); flakes[e].render(ctx); } /* 一帧一帧的画 */ this.loop = requestAnimationFrame(function() { drawSnow.apply(that); }); } /* 调用及控制方法 */ var snow = new snowFall({maxFlake:60}); snow.start();
然后在主题配置文件里libs.js里添加一行snow: /libs/others/snow.js
在themes/matery/layout/layout.ejs里添加如下代码：
<!-- 雪花特效 --> <% if (theme.snow.enable) { %> <script type="text/javascript" src="<%- theme.libs.js.snow %>"></script> <% } %>
最后在主题配置文件最后添加：
# 雪花特效
snow:
enable: true
这个特效和动漫一样，有点花里胡哨，并且可能会造成卡顿，所以我并没有开启，还是给大家一个最干净的阅读体验吧。
动态标签栏
在theme/matery/layout/layout.ejs下添加如下代码：
<script type="text/javascript"> var OriginTitile = document.title, st; document.addEventListener("visibilitychange", function () { document.hidden ? (document.title = "Σ(っ °Д °;)っ喔哟，崩溃啦！", clearTimeout(st)) : (document.title = "φ(゜▽゜*)♪咦，又好了！", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) }) </script>
顶部导航半透明
在themes\hexo-theme-matery\source\css\matery.css的第250行左右：
.bg-color {
background-image: linear-gradient(to right, #FF7F00 0%, #8B00FF 100%);
opacity: 0.7;
}
这是导航栏颜色以及透明效果，随你喜好来改。除此之外，本主题大部分的css都可以在matery.css里面进行个性化修改，我就不一一赘述了。当然，前提是你得具备css基础知识以及浏览器开发者工具的基本使用。
添加 RSS 订阅支持
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下设置：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了
二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2.在children下创建二级菜单的 名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式
图标icon 可以在Font Awesome 中查找
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
新建友情链接 friends 页
friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬，只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]
新建留言板 contact 页
contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "contact"
编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。
新建关于我 about 页
about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
新建分类 categories 页
categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
新建标签 tags 页
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
