1.安装 Node.js
打开官方网站
安装步骤非常简单,一直next,下一步就可以了,默认安装就行(也可以自定义目录,但需要配置环境变量)。
2.安装 Git
打开官方网站
https://git-scm.com/downloads
然后我们选择windows版本的下载
安装也是一直点下一步,安装官方默认的就行,之后,在开始菜单可以看到
3.安装hexo
如果是windows环境下,以管理员的方式打开git bash(开始菜单中);
1)安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2)cnpm install -g hexo-cli
3)hexo -v
4.在合适的位置创建一个新的文件夹blog,比如桌面上
tip:windows环境下,一直以管理员身份在git bash操作即可。
5.hexo init
通过git bash操作,完成对项目的初始化;
看到提示:start blogging with hexo! 即表示成功;
ls -l 查看hexo自动生成的内容
6.hexo s/hexo server 启动
至此,启动成功
8.访问
地址: localhost:4000
至此,搭建完成!
可能出现的问题
ERROR Local hexo not found in ~\Desktop\blog
解决方案:npm install
hexo基本操作
生成文章:hexo n "my first blog..."
在_posts目录下(文章目录)
编辑文章
清理:hexo clean
生成:hexo g
所处目录:cd /c/Users/ASUS/Desktop/blog
重新启动:hexo s
部署到github
安装部署插件:cnpm install --save hexo-deployer-git
打开配置文件:vim _config.yml
大G模式下进入最末行:
复制仓库地址:
deploy:
type: git
repo: https://github.com/atkgc2019wxd/atkgc2019wxd.github.io.git
branch: master
部署到远端:hexo d
GitHub Pages提供了免费的域名搭建
免费域名 xxx.github.io xxx是你的GitHub的用户名
现在可以直接通过远端地址访问,比如我的:atkgc2019wxd.github.io
当然,还可以对搭建好的博客做一些优化,具体优化过程如下:
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
然后修改_config.yml配置文件中的theme属性(指定拥有的主题目录即可):
theme: yilia
重新清理:hexo clean
重新生成:hexo g
重新启动:hexo s
访问应用新主题的地址:localhost:4000
推送到远端,完成同步:hexo d
- 其它细节
在public/medias/下添加自己的图片,不要使用hexo clean命令,图片会自动删除,因为hexo clean会删除hexo g生成的public目录。所以可以把自己的图片放到一直存在的目录即可,比如hexo的source/下,注意路径。其实,只要把自己的图片放到themes\主题文件夹名称\source\medias下就行,hexo g会自动生成到hexo的public\medias下,引用时注意路径。
编辑友情链接页(hexo source/_data/)
[{
"avatar": "/medias/1.jpg",
"name": "Loser.",
"introduction": "人生需要一次说走就走的旅行",
"url": "https://blog.csdn.net/wxd772113786",
"title": "let's go"
}, {
"avatar": "/medias/2.jpg",
"name": "Loser2.",
"introduction": "完美的理想主义者,喜欢coding",
"url": "https://blog.csdn.net/wxd772113786",
"title": "click me"
}, {
"avatar": "/medias/3.jpg",
"name": "Loser3.",
"introduction": "人生就像是坐着公车旅行,我们可以不必在乎车会停在哪儿,要在乎的是
经过的景色和看这些景色时的心情。",
"url": "https://blog.csdn.net/wxd772113786",
"title": "don't worry"
}]
代码高亮显示
由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:
npm i -S hexo-prism-plugin
然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:
highlight:
enable: false
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
search:
path: search.xml
field: post
修改页脚
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在应用的主题目录的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。
config.url和config.author的信息都在hexo的_config.xml中
tip: theme.time.year在相应主题的_config.xml中。
hexo d 出现的问题
ERROR Deployer not found: git
npm install --save hexo-deployer-git
文章 Front-matter 介绍
Front-matter 选项详解
Front-matter 选项中的所有内容均为非必填的。建议至少填写 title 和 date 的值。Front-matter就是在---和---之间的定义。比如下面:
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
以文章目录为例:
完整配置示例:
---
title: Hello World
date: 2020-02-02 10:10:10
author: Loser.
img: /images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password:
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会
自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
修改首页用户名(博主名)
hexo _config.yml文件
设置浏览器主页图标
删除首页导航条关键词链接
修改导航条关键词链接的名称
文章显示作者
找到post-detail.ejs文件
新增如下配置:
<% if (theme.postInfo.author && page.author.length > 0 ) { %>
<div class="post-date info-break-policy">
<% if (page.author && page.author.length > 0) { %>
<i class="far fa-calendar-check fa-fw"></i>作者: <%- page.author %>
<% } %>
</div>
<% } %>
去除歌词的显示
找到相应元素对应的样式文件
去除轮播图上的阴影
找到相应主题下的matery.css文件(../source/css/matery.css),把width和height对应的值改为0%即可
.bg-cover:before,
.bg-cover:after {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
添加雪花特效
找到相应的位置操作即可,在主题文件夹的js目录中新建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 /* 定义密集程度,数字越小越密集 */
});
});
找到合适的位置,一定要确保引用,比如以下位置
效果:
代码雨实现
在一个会被加载的css文件中,实现画布
实现画布后,在js目录中新建文件放入相关js代码
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 12;
//计算列
var colunms = Math.floor(W /fontSize);
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
//运动的文字
var str ="Youth means limitless possibilities.-Loser.";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "600 "+fontSize+"px Georgia";
//给字体添加颜色
context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色,十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间,肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
};
function randColor(){//随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
draw();
setInterval(draw,35);
};
引入js实现即可
安装萌妹子
插件地址:https://github.com/xiazeyu/live2d-widget-models/tree/master/packages
部分对应人物图:https://huaji8.top/post/live2d-plugin-2.0/
npm install --save hexo-helper-live2d
复制模型名称(即对应的包名):live2d-widget-model-z16
配置到hexo的_config.yml中:
live2d:
enable: true
scriptFrom: local #源于
model:
use: live2d-widget-model-z16 #模型名称
display:
position: right #模型位置
width: 150 #模型宽度
height: 300 #模型高度
hOffset: 50 #水平坐标
vOffset: 0 #垂直坐标
mobile:
show: false #是否在手机端显示
常用命令
hexo clean:清除缓存文件(db.json)和已生成的静态文件(public)
hexo g:生成静态文件
hexo d:部署到远端
hexo s:启动服务
hexo s &:后台运行
ps:查看进程任务
hexo new page "tags":表示新建页面,会在source目录下生成相应的目录和文件;
后台启动方式,正确关闭姿势: