1. 程式人生 > >使用Hexo的搭建一個簡單的博客(一步兩個坑)

使用Hexo的搭建一個簡單的博客(一步兩個坑)

iss 正文 博文 修改配置 默認 save pic adding 就是

搭建好簡潔的博客框架後,回看時發現,簡潔之中透露著一絲絲簡陋,好的,網上關於豐富hexo的文章也很多

記錄一下自己的一些瞎操作。

在你的hexo目錄下,你可以看到themes文件夾裏有個默認的landscape主題,網上一般的建議是使用next主題

關於NexT的下載與使用見以下鏈接:http://theme-next.iissnan.com/getting-started.html

記得,這個next主題文件夾也應該放在themes文件夾裏面,就是這樣

技術分享圖片

然後一般的修改配置無非就是hexo本身配置文件上和對應主題的配置文件上修改。

具體的配置就看個人需求,一般google或者百度都有一大堆比較大眾化的修改,小眾化的就要自己看hexo和對應主題的文檔來操作了。大同小異。

當博客的樣式勉強看得過去的時候,我嘗試使用markdown的語法寫點東西試做提交,哈哈哈哈,發現markdown確實是個好玩的東西,比如我寫標題時 #後面沒有空格,馬上就翻車了

然後就是在markdown裏插入本地圖片的操作 : hexo生成博文插入圖片

首先 把主頁配置文件_config.yml 裏的post_asset_folder:這個選項設置為true;

然後在你的hexo目錄下 操作一下以下的命令 npm install hexo-asset-image --save

上述操作成功後,當你使用 hexo n "xxxx"來生成md博文時,/source/_posts

文件夾內除了xxxx.md文件還有一個與之同名的文件夾(就是xxxx)

這時如果你想在 xxxx.md 中使用 pic.jpg 圖片時,只要將這張圖片放到 xxxx文件夾裏,然後在markdown中使用 ![](xxxx/pic.jpg) 語句就闊以了。

好像生成的 .md 博文就是 markdown的縮寫?

關於博文的排版問題,你會發現默認下每篇博文都是全部內容顯示出來的,這些都可以設置的,“關於只顯示部分內容:這個只要在文章中加上<!--more--> 標記 ,該標記以後部分就不在顯示了,只有展開全部才顯示,這是hexo定義的。 ” https://www.jianshu.com/p/393d067dba8d

還有以下其他的什麽設置圓框頭像,旋轉頭像,背景動態線條,總之一般你在網上能看到的騷操作,百度的話都會有代碼或者插件的。這些就看個人所需了。

重點說一下關於模板樣式的修改問題,舉個栗子,在 ....\themes\next\source\css\_common\components\post 下有很多關於樣式的文件,你可以按需修改

因為可能有些修改比較小眾,在網上一時難以找到你要的答案,這時你就要發揮主觀能動性了,花在找來找去的時間說不定自己早就可以解決問題了。

比如,我看到博客標題與正文的間隔太多,我想修改一下

技術分享圖片

就是空色框框內的間隔縮小一點。

這時不妨用用開發者工具

技術分享圖片

這時你可以看到要修改的是 .post-meta 這個類裏面的內容,

技術分享圖片

改一改,margin的參數,四個參數分別代表的是 上 右 下 左 的距離,關於margin和 padding以及其他css,自行學習。

修改完的效果如下。

技術分享圖片

還有一點就是,每次修改完後想預覽一下效果,直接使用 hexo g 後使用 hexo s 進行本地的預覽就好,不用每次都 hexo d -g ,畢竟後者沒有前者的反應那麽快。

使用Hexo的搭建一個簡單的博客(一步兩個坑)