Hexo博客搭建全解

[原创，转载请附网址:http://dongshuyan.top]

欢迎来到莫与的博客，第一篇记录了一下怎么写一篇博客，以方便之后写博客~

#从配置说起
下载安装Git与Node.js略过

1.安装hexo

1	npm install hexo -g #-g表示全局安装, npm默认为当前项目安装

2.Hexo使用命令:

1 2 3

hexo init <folder> #执行init命令初始化hexo到你指定的目录 没有"<"和">"!!! hexo generate #自动根据当前目录下文件,生成静态网页 hexo server #运行本地服务

更改主题

1. 安装

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

2. 配置

修改hexo根目录下的 _config.yml ： theme: yilia

3. 更新

1 2	cd themes/yilia git pull

怎么建立标题？

建立一个1级标题：

1	# 建立一个1级标题：

建立一个2级标题：

1	## 建立一个2级标题

建立一个3级标题：

1	### 建立一个3级标题

建立一个超链接：

效果:More info: Writing

代码如下：

1	More info: [Writing](https://hexo.io/docs/writing.html)

建立目录：

代码如下：

1 2	categories: 动漫 （写在头上） 效果看题头

建立标签：ategories: 动漫 #文章分類目錄 可以省略

代码如下：

1 2 3 4 5 6 7 8

tags: 自学记录 (写在头上） 若多个标签，则： tags: - first - essay - picture 效果看题头

写代码：

代码如下：

1 2	先写三个“`”带一个空格，后面写语言类型例如C++ 再写三个“`”

注意！

1	写markdown的时候，用txt打开，一定要用UTF-8保存。否则中文乱码。

怎么加音乐：（具体功能百度htmlaudio标签）

1 2 3

<audio id="audio" autoplay="autoplay"> <source src="http://qzone.haoduoge.com/music1/2015-04-23/1429774382.mp3" type="audio/mp3"></source> </audio>

怎么改字体加颜色：

1	<font color="red" face="宋体">摘要：</font>

怎么加空格：

1	    

这几天输入hexo s之后浏览器打不开啊，网上各种搜发现是4000端口被占用，于是我还改成了5000：

1	$ hexo server -p 5000

如何改鼠标样式！

在yilia文件夹下的source文件夹下的css文件夹下的style.styl文件（\themes\yilia\source\css\style.styl）
首先找到body

1 2 3 4 5 6

body font-family: "微软雅黑","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; background:#fff; color: rgba(0,0,0,0.6); -webkit-overflow-scrolling: touch

然后在这个后面加上

1	cursor: url('http://hexo.yuedongxu.cn/2016/05/04/Fr0WBCCu1AIN2flM_FWhscVDSePu626.cur'),auto

就变成了：

1 2 3 4 5 6 7

body font-family: "微软雅黑","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; background:#fff; color: rgba(0,0,0,0.6); -webkit-overflow-scrolling: touch cursor: url('http://hexo.yuedongxu.cn/2016/05/04/Fr0WBCCu1AIN2flM_FWhscVDSePu626.cur'),auto

大功告成！

在yilia主题头像上方添加背景

第一步，将要使用的图片放入/themes/yilia/source/img路径下
第二步，更改yilia主题的css文件样式/themes/yilia/source/css/_partial/main.styl
更改内容如下：
注意是是修改.left-col 里面的background！！！

1 2 3 4 5 6 7 8

.overlay{ width: 100%; height: 180px; background-image: url("../img/flower.jpg"); background-size:cover; position: absolute; opacity: 0.7; }

一切有关多说的操作

多说
感觉已经相当全了~

最后加一幅图：

代码如下：

1