Hexo搭建博客问题记录

2018.01.16更新

clean-blog主题移动端效果一般，现转NexT(使用文档，Github)

参考链接：

初入

Git安装
Node.js安装
Hexo安装
npm install hexo-cli -g

Hexo初始化

1
2
3

hexo init blog # blog为文件夹名
hexo g
hexo s # 本地预览

修改根配置文件“\blog\_config.yml”

NexT主题下插件安装

1 2	npm install hexo-generator-searchdb --save npm install hexo-symbols-count-time --save

常用操作

hexo new 'title'  # 新建博文
hexo new page 'page_name'  # 新建页面
hexo clean
hexo generate  # 生成静态页面，hexo g
hexo server  # 本地预览http://localhost:4000，hexo s
hexo deploy  # 发布到GitHub，hexo d
hexo d -g  # 生成静态页面并发布

基础篇

Q1：使用https与GitHub连接失败

改用ssh

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: master

Q2：更换Clean Blog主题

1	git clone https://github.com/klugjo/hexo-theme-clean-blog.git themes/clean-blog

修改_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: clean-blog

Q3：如何将某一个标签作为一个页面

将/tags/该标签作为页面链接

Q4：Clean Blog添加关于页面

\themes\clean-blog\layout文件夹下创建about.ejs

<!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->
<%
    var cover = page.cover || theme.index_cover;
%>
<header class="intro-header" style="background-image: url('<%- cover %>')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1><%- page.title %></h1>
                    <hr class="small">
                    <span class="subheading"><%- page.subtitle %></span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <%- page.content %>
            </div>
        </div>
    </div>
</article>

生成about页面，修改\source\about\index.md，添加layout: about

Q5：删除底部信息

在\themes\clean-blog\layout\_partial\footer.ejs中修改

Q6：指定404页面

将404.html文件放在\themes\clean-blog\source或\source中

自定义404页面

<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>404</title>
</head>
<body>
	<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://yoursite.com/yourPage.html" homePageName="回到我的主页"></script>
</body>
</html>

注意：如果没有绑定域名的话是自定义404页面，如腾讯公益404无法使用

hexo new page 404生成404页面，修改\source\404\index.md，hexo g生成静态页面，将生成的静态页面放在\themes\clean-blog\source或\source下，删除\source\404

Q6：显示网站缩略标志

修改\themes\clean-blog\_config.yml

1 2	# set your own favicon favicon: /img/favicon.jpg

Q7：添加评论

修改\themes\clean-blog\_config.yml

1
2
3

comments:
  # Disqus comments
  disqus_shortname: zydarChen

正常显示评论需科学上网

补充：添加其他评论，如来比力

来比力官网注册账号，根据提示获取安装代码
将代码复制到\themes\clean-blog\layout\_partial\comments.ejs即可

Q8：修改锚链接样式

修改\themes\clean-blog\source\css\base.styl

p, li
  a
    color brand-primary
    text-decoration none

Q9：底部显示个人账号图标以及链接

修改\themes\clean-blog\layout\_partial\footer.ejs，并在\themes\clean-blog\_config.yml下添加相应内容即可

1 2	# Social Accounts wechat: /img/wechat.jpg

注意，由于之前Q8改过锚链接样式，而图标外圈颜色在标签p/li/a中，颜色会被修改为蓝色，直接将标签改为p/li/c，并在\themes\clean-blog\source\css\base.styl中添加相应的标签样式

<% if (theme.wechat) { %>
  <li>
    <a href="<%- theme.wechat%>" target="_blank">
      <span class="fa-stack fa-lg">
        <c class="fa fa-circle fa-stack-2x"></c>
        <i class="fa fa-wechat fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
<% } %>

Q10：页面图片宽度不一

Clean Blog采用的是自适应，当内容不一致是出现这个问题。尽量保持内容模块数一致。
Clean Blog主题的主页相较其他page页多出subtilte，补充即可。

<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
    <div class="site-heading">
        <h1><%- page.title %></h1>
        <hr class="small">
        <span class="subheading">zydarChen</span>
    </div>
</div>

进阶篇

Q11：部分文章不显示在主页

如何控制文章是否在主页显示？比如，某些还只是处于草稿状态，不想放在主页，但可以归于某一标签或分类，在该分类中查看草稿。
求告知。

Q12：托管到Coding，简单几步实现转移

注册Coding，最好使用注册GitHub的邮箱
ssh对接
- 如果coding邮箱与GitHub邮箱不同，将coding改绑到GitHub邮箱（懒人做法）
- 打开C:\Users\zydar\.ssh\id_rsa.pub，zydar是你电脑的用户名，复制文件内容
- 在coding个人主页，账户-SSH公钥，将id_rsa.pub文件内容复制进去
- 执行ssh -T git@git.coding.net，获得提示Hello zydar You've connected to Coding.net by SSH successfully!
在coding上新建项目，项目名称为用户名

配置hexo，修改_config.yml

deploy:
  type: git
  repository: 
    github: https://github.com/zydarChen/zydarChen.github.io.git
    coding: https://coding.net/zydarChen/zydarChen.git
  branch: master

在source/需要创建一个空白文件，至于原因，是因为coding.net需要这个文件来作为以静态文件部署的标志。就是说看到这个Staticfile就知道按照静态文件来发布。
1
2
cd source/
touch Staticfile #名字必须是Staticfile
hexo g -d之后，会弹出页面填写coding.net账户密码
在coding.net进入项目，代码-Pages服务，开启服务即可
搞定，可以访问http://zydarChen.coding.me，查看你的博客了

Q13：将网站提交搜索引擎

解决方案:
Github(google提交)+Coding(百度提交)，自适应提交搜索引擎(绝招来啦！)

Google网站验证链接
百度网站验证链接
确认收录方式：Google/百度搜索框输入site:yoursite.github.io
配置站点地图文件代码可以不添加，我添加反而出错
出现sitemap.xml文件中url为yoursite.com的情况，请检查_config.yml文件中的url:是否为网站地址
github禁止了百度爬虫，提交了百度也是不会访问的。百度验证时，通过文件验证出错也是这个原因。
如果同时托管到了coding.net，可以将百度sitemap的url改为coding的地址
- 进入\node_modules\hexo-generator-baidu-sitemap\baidusitemap.ejs
- 第三行<% var url = config.url + config.root %>改为<% var url = config.coding_url + config.root %>
- 修改站点_config.yml
  1
  2
  url: https://zydarchen.github.io
  coding_url: http://zydarchen.coding.me # 添加行
- hexo g之后能看到baidusitemap.xml已经自动修改

Q14：域名选路解析

解决方案：
Dnspod+Namesilo域名结合实现域名选路解析(精)
我的解决方案：

万网上注册域名，目前已被阿里云收购
添加域名解析(我直接使用了万网提供的域名解析，也可以使用Dnspod等)
Coding Pages配置，直接添加自定义域名www.zydarChen.top
GitHub Pages配置，Hexo目录下建立CNAME文件，并将www.zydarChen.top写入，部署到服务器即可。在 Settings-GitHub Pages页面可看到部署成功。

按上述做法，当海外地址访问www.zydarChen.top时会解析到zydarchen.github.io，此时可能出现链接不安全/证书风险问题。这是GitHub Pages本身的问题，官方文档上写着“HTTPS is not supported for GitHub Pages using custom domains”
解决方案：让个人域名下GithubPage完美支持https
2018.05.01官方支持自定义域名HTTPS啦，喜大普奔，GitHub Pages Blog 原文：Custom domains on GitHub Pages gain support for HTTPS
由于设置了域名选路解析，可能导致coding上申请SSL/TLS证书错误，解决方案：关闭选路解析-重新申请-开启选路解析

Q15：为页面添加阅读人数统计

解决方案：
Hexo统计post阅读次数
我的实现：

注册LeanClound，创建Counter并记录APP ID跟APP Key

修改站点_config.yml，添加

# leancloud
leancloud_visitors:
  enable: true
  app_id: UaWT************
  app_key: U7TR***********

修改\themes\clean-blog\layout\_partial\article-full.ejs，确定显示阅读量的位置

<span class="meta">
    <!-- Date and Author -->
    <% if(item.author) { %>
        Posted by <%- item.author %> on
    <% } %>
    <% if(item.date) { %>
        <%= item.date.format(config.date_format) %>
    <% } %>
    <!-- Lean Cloud -->  # 此处开始为添加部分
    <% if(config.leancloud_visitors.enable){ %> 阅读量 : <span id="<%= url_for(page.path) %>" class="leancloud_visitors" data-flag-title="<%- page.title %>"></span>
    <% } %>
</span>

修改\themes\clean-blog\layout\_partial\after-footer.ejs，添加

<!-- Lean Cloud -->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script>
    var APP_ID = '<%- config.leancloud_visitors.app_id %>';
    var APP_KEY = '<%- config.leancloud_visitors.app_key %>';
    AV.init({
        appId: APP_ID,
        appKey: APP_KEY
    });
    // 显示次数
    function showTime(Counter) {
        var query = new AV.Query("Counter");
        if($(".leancloud_visitors").length > 0){
            var url = $(".leancloud_visitors").attr('id').trim();
            // where field
            query.equalTo("words", url);
            // count 
            query.count().then(function (number) {
                // There are number instances of MyClass where words equals url.
                $(document.getElementById(url)).text(number?  number : '--');
            }, function (error) {
                // error is an instance of AVError.
            });
        }
    }
   // 追加pv
    function addCount(Counter) {
        var url = $(".leancloud_visitors").length > 0 ? $(".leancloud_visitors").attr('id').trim() : 'www.zydarChen.top';  # 你的网址
        var Counter = AV.Object.extend("Counter");
        var query = new Counter;
        query.save({
            words: url
        }).then(function (object) {
        })
    }
    $(function () {
        var Counter = AV.Object.extend("Counter");
        addCount(Counter);
        showTime(Counter);
    });
</script>

已经搞定，但字体是斜体还是看着不舒服，修改\themes\clean-blog\source\css\base.styl，搜索italic，将相应描述删除，done

Q16：字数统计WordCound

安装WordCound
1
npm install hexo-wordcount --save

修改站点_config.yml，添加

# WordCount
post_wordcount:
  wordcount: true
  min2read: true

修改\themes\clean-blog\layout\_partial\article-full.ejs，在适当的位置添加以下代码（同Q14）

<!-- WordCount -->
<% if(config.post_wordcount.wordcount){ %> | 字数 : <%= wordcount(page.content) %>
<% } %>
<% if(config.post_wordcount.min2read){ %> | 阅读时长 : <%= min2read(page.content) %> min
<% } %>

Q17：使用mathjax渲染latex

如何处理Hexo和MathJax的兼容问题

安装插件
1
npm install hexo-math --save

解决兼容问题

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

测试，参考hexo-math
- MathJax Inline:
  1
  Simple inline $a = b + c$.
  效果：Simple inline $a = b + c$.
- MathJax Block:
  1
  2
  3
  4
  $$\frac{\partial u}{\partial t}
  = h^2 \left( \frac{\partial^2 u}{\partial x^2} +
  \frac{\partial^2 u}{\partial y^2} +
  \frac{\partial^2 u}{\partial z^2}\right)$$
  效果：
  $$\frac{\partial u}{\partial t}
  = h^2 \left( \frac{\partial^2 u}{\partial x^2} +
  \frac{\partial^2 u}{\partial y^2} +
  \frac{\partial^2 u}{\partial z^2}\right)$$
添加Mathjax开关
How?

Q18：添加折叠块功能

Hexo next博客添加折叠块功能添加折叠代码块
jQuery 实现内容折叠功能

使用

1
2
3

{% fold 提示语 %}
折叠内容
{% endfold %}

搬运

themes/next/source/js/src/post-details.js # 主要实现

点击显/隐代码

// 设置折叠快
$(document).ready(function(){
    $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
    });
    $("div.fold").css("display","none");
});

themes/next/scripts/fold.js # 使用内建标签

点击显/隐代码

function fold (args, content) {
  var text = args[0];
  if(!text) text = "点击显/隐";
  return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

themes/next/scripts/tags.js # 修复代码块显示问题

点击显/隐代码

const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

themes/next/source/css/_custom/custom.styl # 样式

点击显/隐代码

.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:after{
    content: "▼";
}
.open:after{
    content: "▲";
}

很喜欢Mist主题，但其侧边栏使得文章偏左，直接设置hide又担心读者不知道有目录存在，所以我添加了delay_hide选项，打开文章先展示侧边栏，然后隐藏
在themes/next/source/js/src/post-details.js中添加如下代码即可

// Expand sidebar on post detail page by default, when post has a toc.
var $tocContent = $('.post-toc-content');
var isSidebarCouldDisplay = CONFIG.sidebar.display === 'post' ||
    CONFIG.sidebar.display === 'always';
var hasTOC = $tocContent.length > 0 && $tocContent.html().trim().length > 0;
if (isSidebarCouldDisplay && hasTOC) {
  CONFIG.motion.enable ?
    (NexT.motion.middleWares.sidebar = function () {
        NexT.utils.displaySidebar();
    }) : NexT.utils.displaySidebar();
}
// 以上是原有代码，新添加下面的代码
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))}
var isSidebarDelayHide = CONFIG.sidebar.display === 'delay_hide';
if (isSidebarDelayHide && hasTOC) {
  NexT.utils.displaySidebar();
  CONFIG.motion.enable ?
    (NexT.motion.middleWares.sidebar = function () {
        NexT.utils.displaySidebar();
    }) : (sleep(1200).then(() => {
    NexT.utils.displaySidebar()
  }));
}

Q20：主题自带样式 note 标签

在themes/next/_config.yml中配置

note:
  style: flat
  icons: true
  border_radius: 3
  light_bg_offset: 0

使用如下：

1	{% note %}default{% endnote %}

default

1	{% note primary %}primary{% endnote %}

primary

1	{% note success %}success{% endnote %}

success

1	{% note info %}info{% endnote %}

info

1	{% note warning %}warning{% endnote %}

warning

1	{% note danger %}danger{% endnote %}

danger

1	{% note danger no-icon %}note without icon{% endnote %}

note without icon

Q21：主题自带样式 tabs 标签

在themes/next/_config.yml中配置

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0

使用如下：

{% tabs tab, 1 %}
<!-- tab -->
Text
<!-- endtab -->
<!-- tab -->
Text
<!-- endtab -->
{% endtabs %}

tab 1
tab 2

你注意到了么

, 1表示默认展开第1个tabs

更多用法