本文永久链接:zhengtuqiang.pw/2018/07/31/…
1. 前言
本来今年年初的时候就已经搭建了博客,当时看的是掘金里面的一篇教程。但是其实那篇教程说的不是很好,遇到很多问题。直至最近又有了建设个人品牌的想法,遂继续折腾个人博客。在网上找了各种资料,后来发现Grok抱残守缺的这篇教程。Grok抱残守缺的博客不但令人知其然,也令人知其所然。跟着教程一次就成功了。我的这个总结总体是站在Grok抱残守缺基础上去写的,作为补充。
2. 过程概览
这个步骤就不重复造轮子了,跟着Grok抱残守缺的这篇教程来即可。
- 安装 Node js,Git。这两个都是下载完之后直接安装就可以了。
- Git 配置以及 Github 配置 SSH。
- 安装 Hexo。
- Hexo 本地建站。
- 主题配置。本文以 Material-Flow 为例说明。
- 绑定独立域名。
3. Material-Flow 主题配置
这是一个遵循安卓 Material Design 风格的主题,支持响应式,也就是说会根据当前是浏览器屏幕去自适应显示,在手机端的显示效果也不错。我主要做了以下的修改:汉化
,关于页面
,百度统计
,不蒜子阅读量统计
和一个彩蛋功能。这是我的定制版本。
3.1 Material-Flow 主题概述
主题的文件结构如下:
├─material-flow
│ ├─layout #ejs模板
│ │ ├─_partial
│ │ └─_widget #侧栏相关
│ ├─snapshots
│ └─source #字体、图片、js资源
│ ├─fonts
│ ├─images
│ ├─js
│ └─less
复制代码
我们先来看一下 layout/layout.ejs,默认通过 hexo new <title>
会把 layout.ejs 作为模板生成 html 网页。
<%- partial('_partial/head') %> <!-- header -->
<body>
<%- partial('_partial/loading') %>
<script>setLoadingBarProgress(20)</script>
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<script>setLoadingBarProgress(40);</script>
<div class="l_body">
<div class='container clearfix'>
<div class='l_main'>
<%- body %> <!-- 主体 -->
</div>
<aside class='l_side'>
<%- partial('_partial/side') %> <!-- 侧栏 -->
</aside>
<script>setLoadingBarProgress(60);</script>
</div>
</div>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %> <!-- footer -->
<script>setLoadingBarProgress(80);</script>
<%- partial('_partial/scripts') %>
<script>setLoadingBarProgress(100);</script>
</body>
</html>
复制代码
第10行 <%- body %>
,这是 html 页面的主体部分。一共有三个 menu 首页
,文章
,关于
,主体部分分别对应的是 layout/_partial/post.ejs
,layout/_partial/categories.ejs
,layout/_partial/article.ejs
。注意具体的博文页面中,主体部分也是 layout/_partial/article.ejs
。
3.2 汉化&时间修改
汉化的思路其实很简单,hexo s
后查看网页,通过 FileLocationPro
工具搜索一下主题文件夹中想汉化的内容,然后将其改为中文即可。例如我汉化了上一篇
,下一篇
,查看更多
以及浏览器页签的一些内容。 Material-Flow 的时间格式默认为 月 日,年
(MMM D, YYYY),我统一把时间格式改为 年/月/日
(YYYY/M/D)。
3.3 关于页面
Material-Flow 主题默认只有两个两个 menu 首页
,文章
,我们可以在博客添加一个 关于
menu。首先在主题的配置文件中添加 关于
menu。
# navigation menu
menu:
- name: 首页
slug: home
url: /
- name: 文章
slug: archives
url: /archives
#添加关于
- name: 关于 #menu名字
slug: about #这是用于自动生成选中menu时,menu项高亮的css
url: /about #url路径
复制代码
然后在 cmd
命令中 hexo new page "about"
,此命令会在 source 文件夹下生成一个 about 文件夹,里面的 index.md
就是 关于
menu 的主体内容,可以像写一篇博文一样写自己的简介。像我就在里面加入了一个彩蛋。
3.4 百度统计
注册一个百度统计账号,然后添加自己博文的地址,拿到统计代码。 统计代码:
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?你的百度统计id";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
复制代码
首先在 layout/_partial/head.ejs
中添加以下代码:
<script>
function setLoadingBarProgress(num) {
document.getElementById('loading-bar').style.width=num+"%";
}
<!-- 百度统计begin -->
<% if(theme.tongji.baidu_id){ %>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?<%- theme.tongji.baidu_id %>";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
<% } %>
<!-- 百度统计end -->
</script>
</head>
复制代码
然后在主题配置文件 _config.yml
中添加以下代码:
tongji:
baidu_id: #你的百度统计id
复制代码
以后百度统计 id 变更的话,直接替换掉 baidu_id 即可。
3.5 不蒜子阅读量统计
百度统计有多项强大的分析功能,如流量分析,来源分析,访问分析,转化分析,访客分析以及优化分析等。但是百度统计主要是给博主自己用的。对于访客来说,我想让他们也能看到此文章的受欢迎程度,需要在博文的底部展示阅读量。我选择的是不蒜子,号称是两行代码搞定计数。 因为我想要在页面底部显示阅读量信息,所以首先在 layout/_partial/footer.ejs
中添加以下代码:
<% if(theme.tongji.busuanzi){ %>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<% if(is_home()){ %>
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
<% }else { %>
<span id="busuanzi_container_page_pv">
本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>
<% } %>
<% } %>
复制代码
然后在主题配置文件 _config.yml
中添加以下代码:
tongji:
busuanzi: true #不蒜子开关
复制代码
因为不蒜子没有id,所以只有一个表示开关的属性。layout/_partial/footer.ejs
第1行 <% if(theme.tongji.busuanzi){ %>
会进行判断。
3.6 <!-- more -->
这个标记要单独拿出来说一下。在写博文的时候,<!-- more --> 标记会把前面的内容生成摘要,也就是 post.excerpt
取到的内容。当初不知道如何实现「查看更多」的功能,在这上里浪费了不少时间。后来才知道用这个标记就可以实现了( ๑ŏ ﹏ ŏ๑ )。
4. ejs 的一些用法
在对 Material-Flow 做修改的时候是直接参照上下文的一些代码的,自己没有系统了解过 ejs,所以记录一些零散的用法。
4.1 javascript 混合 html
<% if (post.excerpt) { %>
<div class="readmore">
<a href="<%- url_for(post.path) %>">点击查看</a>
</div>
<% } %>
复制代码
javascript 语句用 <% %>
包起来,其中的 html 标签不需要。输出执行结果用<%- %>
。
4.2 javascript 读取主题配置文件 _config.yml
的形式
单值
tongji:
busuanzi: true
复制代码
单值读取
<% if(theme.tongji.busuanzi){ %>
<!-- 省略 -->
<% } %>
复制代码
集合
# navigation menu
menu:
- name: 首页
slug: home
url: /
- name: 文章
slug: archives
url: /archives
- name: 关于
slug: about
url: /about
复制代码
集合遍历读取
<% (theme.menu||[]).forEach(function(value){ %>
<li>
<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'>
<%=value.name%>
</a>
</li>
<%})%>
复制代码
foreach()
之后,value 即为每组数据的一个对象,直接按属性名读取。
4.3 注意事项
在配置文件中注意 -
,:
的后面是有一个空格的。
5. 多机更新博客--我的最佳实践
实际上,配置完博客之后会有这么一种场景:假如我的数据损坏了,或者我想在另一台电脑发博文,怎么办? 其实,从上面这么一个流程下来,你会发现:博客的最主要原料其实就是博文的 md 文件,有了博文的 md 文件那么别的都好说。所以我的做法就是把博文,hexo 配置文件之类必不可少的东西放在云盘,这里我选择的是开源中国的码云(不是马云哦,码云像 Github 一样都是一个基于Git的远程代码仓库,好处在于可以免费创建私有仓库以及在国内可以有更快的访问速度)。
5.1 文件夹概览
MyBlog
├─主题
├─其他
├─博客文章
│ ├─图片
│ ├─引用资料
│ └─文章
│ ├─about
│ └─_posts
└─博客配置文件
复制代码
- 博客配置文件:主要是 Hexo 的配置文件 _config.yml
- 博客文章:这是博客的主要「原料」,Hexo 生成 html 的内容来源
- 其他:放置其他的一些拓展的功能
- 主题:Hexo 用的主题
5.2 博客管理说明
- 博客文章->文章,会通过 Always Sync 同步到 Hexo(D:\MyBlog\Blog) 的文件夹,最后 deploy 到 Github 是在 Hexo 文件夹中进行的。
- 主题文件夹会同步到 Hexo 文件夹的主题中去。
- 博客配置文件会同步到 Hexo 文件夹的根目录中去。
5.3 博文编写工作流
- 博客文章->文章->_posts中进行博文编写。
- 在 Hexo 文件夹中进行
hexo g
,hexo s
,本地检查无误后hexo d
进行部署。
5.4 多机更新工作流
- 安装 Node js,Git。
- 安装 Hexo。
npm config set registry "https://registry.npm.taobao.org"
npm install -g hexo-cli #hexo安装
npm install hexo-renderer-pandoc --save
npm install hexo-katex --save
npm install hexo-renderer-jade --save #Noise主题相关
npm install hexo-renderer-less --save #Noise主题相关
npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content #Material主题相关
npm install hexo-deployer-git --save #部署相关
复制代码
- Git 配置以及 Github 配置SSH。
- clone 此 repo。
- 在 repo 文件夹下
hexo init
新建一个 Hexo(命名为 Blog ) 文件夹,此文件夹不用加入 repo 的版本管理。 - 配置博客文件以及主题。
- 在博客文章->文章->_posts 中编写博文。
- 把博文复制到 Hexo 文件夹中进行
hexo g
,hexo s
,本地检查无误后hexo d
部署。