Hexo博客搭建全解

文章目录
  1. 1. 更改主题
    1. 1.1. 1. 安装
    2. 1.2. 2. 配置
    3. 1.3. 3. 更新
  2. 2. 怎么建立标题?
  3. 3. 建立一个1级标题:
    1. 3.1. 建立一个2级标题:
      1. 3.1.1. 建立一个3级标题:
  4. 4. 建立一个超链接:
    1. 4.1. 代码如下:
  5. 5. 建立目录:
    1. 5.1. 代码如下:
  6. 6. 建立标签:ategories: 动漫 #文章分類目錄 可以省略
    1. 6.1. 代码如下:
  7. 7. 写代码:
    1. 7.1. 代码如下:
    2. 7.2. 注意!
    3. 7.3. 怎么加音乐:(具体功能百度htmlaudio标签)
    4. 7.4. 怎么改字体加颜色:
    5. 7.5. 怎么加空格:
    6. 7.6. 这几天输入hexo s之后浏览器打不开啊,网上各种搜发现是4000端口被占用,于是我还改成了5000:
    7. 7.7. 如何改鼠标样式!
    8. 7.8. 在yilia主题头像上方添加背景
    9. 7.9. 一切有关多说的操作
  8. 8. 最后加一幅图:
    1. 8.1. 代码如下:


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

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

#从配置说起
下载安装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
&nbsp;&nbsp;&nbsp;&nbsp;

这几天输入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

代码如下:

1
![1](Hexo博客搭建全解/1.jpg)