前言:在搭建hexo博客的過程中遇到了許多問題,同時也發現了一些實用的小技巧,下面做一個總結與大家分享。
hexo基本命令
$ hexo clean #清除緩存文件 (db.json) 和已生成的靜態文件 (public)
$ hexo generate = hexo g #生成靜態文件
$ hexo server = hexo s #啟動服務器(本地預覽)。默認情況下,訪問網址為: http://localhost:4000/。
$ hexo deploy = hexo d #遠程部署
$ hexo new "文章標題" = hexo n "文章標題" #新建一篇博文 (默認使用post)
$ hexo new page "頁面標題" #新建頁面
一般情況下,修改網站之后只要部署下面幾個命令就行
$ hexo clean
$ hexo g
$ hexo d
頁面亂碼問題
原因:文件未正確編碼。
解決:大部分是中文顯示不正確,因此只要將文件保存為UTF-8即可解決問題。
方法:
用記事本打開本地的博客文件“xxx.md”或者“xxx.yml”,然后點“另存為”,“編碼(E):”選擇“UTF-8”,
點擊“保存”,替換原文件。刷新網頁即可成功顯示。
還原默認主題配置
搭建博客時,會經常不小心改變了默認配置,又無法找出的時候,可以選擇先備份原主題文件夾后再刪除,然后重新再下載主題一次,將原主題文件夾進行替換后輕松搞定。
不蒜子站內統計
安裝腳本(必選)
打開themes/你的主題/layout/_partial/footer.pejs添加如下腳本即可。
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
安裝標簽
顯示站點總訪問量
要顯示站點總訪問量,復制以下代碼添加到你需要顯示的位置。可以打開themes/你的主題/layout/_partial/footer.ejs添加即可。
有兩種代碼可選:
代碼a:pv的方式,單個用戶連續點擊n篇文章,記錄n次訪問量。
<span id="busuanzi_container_site_pv">
本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
代碼b:uv的方式,單個用戶連續點擊n篇文章,只記錄1次訪客數。
<span id="busuanzi_container_site_uv">
本站訪客數<span id="busuanzi_value_site_uv"></span>人次
</span>
顯示單頁面訪問量
要顯示每篇文章的訪問量,復制以下代碼添加到你需要顯示的位置。
代碼:pv的方式,單個用戶點擊1篇文章,本篇文章記錄1次閱讀量。
<span id="busuanzi_container_page_pv">
本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
</span>
具體代碼演示
實際效果:
具體代碼:
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
</br>本站總訪問量<span id="busuanzi_value_site_pv"></span>次,本站訪客數<span id="busuanzi_value_site_uv"></span>人次,本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
創建公益404頁面
在主題下的source目錄里創建404.html
輸入代碼:
<html>
<head>
<meta charset="utf-8">
<title>404頁面</title>
<style>
*{margin:0;padding:0;outline:none;font-family:\5FAE\8F6F\96C5\9ED1,宋體;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;cursor:default;font-weight:lighter;}
.center{margin:0 auto;}
.whole{width:100%;height:100%;line-height:100%;position:fixed;bottom:0;left:0;z-index:-1000;overflow:hidden;}
.whole img{width:100%;height:100%;}
.mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.6;filter:alpha(opacity=60);}
.b{width:100%;text-align:center;height:400px;position:absolute;top:50%;margin-top:-230px}.a{width:150px;height:50px;margin-top:30px}.a a{display:block;float:left;width:150px;height:50px;background:#fff;text-align:center;line-height:50px;font-size:18px;border-radius:25px;color:#333}.a a:hover{color:#000;box-shadow:#fff 0 0 20px}
p{color:#fff;margin-top:40px;font-size:24px;}
#num{margin:0 5px;font-weight:bold;}
.plan{color: black;background: white;font-size: 30px; margin-top: 20px;}
.plan:hover{color: white;background: black;font-size: 30px;}
#gg {
position: absolute;
width: 654px;
height: 470px;
left: 50%;
top: 50%;
margin-left: -377px;
margin-top: -235px;
}
</style>
</head>
<body onload="redirect();">
<div id="gg">
<iframe class="gg" scrolling='no' frameborder='0' src='https://yibo.iyiyun.com/Home/Distribute/ad404/key/1122458' width='654' height='470' style='display:block;'>
</iframe>
</div>
<div class="whole">

</div>
</body>
</html>
圖片背景可自行修改
<div class="whole">

</div>
使用七牛云做Hexo圖床
MarkDown 插入圖片是這樣的寫法:

注冊賬號
官網:https://portal.qiniu.com/signup/choice?code=3ln23lpsrga4y
添加極簡圖床插件
使用步驟
將需要用于文章配置圖的本地圖片,拖入已經打開的好的Chrome極簡圖床窗口。
按照提示:“粘貼、拖動或點此選擇圖片上傳”即可完成圖片上傳至七牛云。
在“我的上傳”中,找到需要插入的圖片資源,并復制外鏈地址,粘貼至MarkDown文件中需要的地方即可