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