Hexo深坑之旅(3)—實用技巧

前言:在搭建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">
![](http://upload-images.jianshu.io/upload_images/2031241-6628c5d197dd72ea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>

</body>

</html>

圖片背景可自行修改

<div class="whole">
![](http://upload-images.jianshu.io/upload_images/2031241-6628c5d197dd72ea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>

使用七牛云做Hexo圖床

MarkDown 插入圖片是這樣的寫法:

![](圖片鏈接)

注冊賬號

官網:https://portal.qiniu.com/signup/choice?code=3ln23lpsrga4y

添加極簡圖床插件

網址:http://yotuku.cn/

使用步驟

將需要用于文章配置圖的本地圖片,拖入已經打開的好的Chrome極簡圖床窗口。
按照提示:“粘貼、拖動或點此選擇圖片上傳”即可完成圖片上傳至七牛云。
在“我的上傳”中,找到需要插入的圖片資源,并復制外鏈地址,粘貼至MarkDown文件中需要的地方即可

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,264評論 25 708
  • 第一章 安裝Git工具 下載GitHub for Windows,直接點擊安裝,安裝完成后,可以看到“Git Sh...
    不圓的石頭閱讀 11,922評論 5 63
  • 本篇教程基于NexT主題的博客配置,實現更換主題、評論、打賞等36項功能,接下來根據這些功能進行分點描述,附上個人...
    wangwlj閱讀 2,257評論 0 11
  • 打開電腦,給自己放一曲輕音樂,悠揚的樂曲、深沉的夜色,放任思緒肆意的游走。 【親子時光】 昨天說到的,要晚上定時跟...
    Echo可可閱讀 306評論 0 0
  • 國慶節,過年放10天,元旦,清明節,中秋節,五一節放5天,好開森啊好開森啊好開森啊好開森啊好開森啊好開森啊好開森啊...
    俞正卿閱讀 284評論 1 0