前言:在搭建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
添加极简图床插件
使用步骤
将需要用于文章配置图的本地图片,拖入已经打开的好的Chrome极简图床窗口。
按照提示:“粘贴、拖动或点此选择图片上传”即可完成图片上传至七牛云。
在“我的上传”中,找到需要插入的图片资源,并复制外链地址,粘贴至MarkDown文件中需要的地方即可