Hexo博客教程(二):基本功能和网站优化

作者: Mobinson | 来源:发表于2016-10-05 20:21 被阅读595次

之前的一篇博文介绍了使用Hexo搭建博客的前期准备工作，接下来介绍基本功能。
这一篇教程将包括Hexo的大部分常用操作，并将保持更新。

部署Github

为我们的博客提供了托管平台。
首先注册一个GitHub帐号，然后建立与你用户名对应的仓库，仓库名必须为

username.github.io

同时在Pages中开启Github Pages服务。进入刚才创建的仓库,点击右边菜单中的Settings按钮，在跳转到的页面 Update your site 对应处点击“Automatic page generator”按钮，这样就有了一个github自动生成的页面用来测试的时候使用。之后点击继续。选择主题,点击'Publish page'发布。
再次回到仓库,点击Settings按钮，点击链接就可以看到测试地址页面。
在站点配置文件_config.yml中，找到并修改：

url: http://username.github.io/

以及

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

每次将写好的文章部署到Github时，会被要求输入Github用户名和密码。

添加SSH Keys

什么是SSH Keys

简单说，SSH是一种网络协议，用于计算机之间的加密登录。
如果一个用户从本地计算机，使用SSH协议登录另一台远程计算机，我们就可以认为，这种登录是安全的，即使被中途截获，密码也不会泄露。

检查SSH Keys

如果不清楚是否已经添加SSH，先检查：

ls-al~/.ssh

如果有id_dsa.pub，id_ecdsa.pub，id_ed25519.pub等，说明有SSH keys。
如果未配置，则返回

bash: ls-al~/.ssh: No such file or directory

如果没有的话,就生成一个SSH keys：

$ ssh-keygen -t rsa -C "your_email@example.com"

然后会出现:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/you/.ssh/id_rsa):

就是让你输入SSH keys要保存在哪里,一般不用改,就直接回车就好了。
然后会出现:

Enter passphrase (empty for no passphrase): [Type a passphrase]
# Enter same passphrase again: [Type passphrase again]

这是要求输入一个密码，记住这个密码。

保存SSH keys

创建成功后,他会提示你SSH keys保存在哪里:

Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

找到SSH keys

根据上一步里告诉你的路径,找到保存SSH keys的地方，其中id_rsa.pub 就是SSH keys。如果为了防止以后找不到，可以把他们自己另存到其它地方。

为github仓库添加SSH keys

SSH keys创建好了，我们还要把它添加到仓库里去创建的仓库。
点击右侧的Settings，然后在左侧的Deploy keys中选择Add deploy key，点击Add deploy key。
然后把创建的id_rsa.pub里的内容复制到Key里去,Title部分随便填，点击Add key。添加的过程中，还要再输入一次github的密码。

测试连接

回到git bash执行:

$ ssh -T git@github.com

它可能会出现一些乱七八糟的提示，最后是问你yes/no,就输入yes。
如果要求输入密码，那这个密码就是之前设置的那个密码（已用黑体并加粗）。如果之前没有设置密码，没忽略此步骤。

Enter passphrase for key '/c/Users/2000104591/.ssh/id_rsa':

最后它提示你:

Hi, 用户名/用户名.github.io! You've successfully authenticated, but GitHub does notprovide shell access.

添加多个分类

如果你想要把一篇文章设置为两个分类，一个为主分类，第二个为子分类，并且文章在子分类，可以这样写：

categories: [一级分类名,二级分类名]

也可以这样写：

categories:
- 一级分类名
- 二级分类名

这样这篇文章的主分类为“一级分类名”，子分类为“二级分类名”，并且文章显示在“二级分类名下”类别下。

插入摘要

有时文章比较长，或者想首页更简洁一些，希望在首页只显示摘要而不是全文。Hexo是支持摘要的功能的，只要在文章中插入代码：

<!--more-->

这样在其上的文字即为摘要，在首页中就会出现“阅读更多”的图标，点击则显示全文。

插入图片

使用markdown写文章，插入图片的格式为

![图片名称](链接地址)

对于hexo，链接地址的写法包括以下几种：

使用本地路径：在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。
使用微博图床，地址http://weibotuchuang.sinaapp.com/，将图片拖入区域中，会生成图片的URL，这就是链接地址。
七牛云存储，地址http://www.qiniu.com/，同样是将图片拖入区域中，会生成图片的URL，或填入其链接地址。

插入图片的同时，建议开启Fancybox，以landscape-plus主题为例，打开_config.yml，将fancybox的配置false改成true即可。

插入音乐

比如网易云音乐，找到喜欢的歌曲，点击分享按钮，把里面的代码复制下来，直接粘贴到博文中即可。

插入视频

视频和音乐类似，可以先输入视频标题，回车换一行插入代码即可。

居中对齐

Markdown语法本身没有居中的，但Markdown中支持基本的HTML语法，可以使用HTML语法。

<center>居中对齐</center>
<h1 style="text-align:center">居中对齐 <h1>
<h1 style="text-align:right">居右对齐 <h1>

字体和行间距

修改文章正文字体为微软雅黑，打开hexo\themes\landscape-plus\source\css_partial\article.styl文件，修改.article条目为：

.article
  margin: block-margin 0
  font-family: "微软雅黑"
  lettter-spacing: 2px

修改正文字体大小，在hexo\themes\landscape-plus\source\css_variables.styl中的第33行，改为font-size = 16px；修改正文的行间距，在同一文件中修改：line-height = 1.8em。
修改侧边栏文字的行间距，在hexo\themes\landscape-plus\source\css_partial\sidebar.styl修改.widget下为line-height: 1.6em，还要删掉@extend $base-style这一行才能起效果。

发布照片文章

修改\scaffolds\photo.md

layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
- <photo url>
---

要发布照片文章：

$ hexo new photo "photoPostName"

hexo默认会处理全部 markdown 和 html 文件，如果不想让 hexo 解析，可以在文件头中加入 layout: false。

圆角代码块

到themes\landscape-plus\source\css_partial，打开highlight.styl，找到

margin: 0 article-padding * -1

修改为

margin: auto

这样代码块就不会左右顶格，而是与两侧保持一定间距。
在第22行添加：

border-radius: 8px

使代码块呈现圆角效果。

安装RSS

在终端执行

npm install hexo-generator-feed --save

然后在_config.yml中添加

plugins:
- hexo-generator-feed

再一次执行

npm update

将会每次生成新的RSS/atom.xml

添加网站图标

网站图标即浏览网页时显示在标签页或将网页保存在书签时所显示的图标，图标可以视为网站的Logo，是网站个性化的一部分。本网站目前使用的是自行制作的脸萌头像。
在themes/主题名/layout/_partial/head.ejs里将

<link href="<%- config.root %>favicon.png" rel="icon">

替换为

<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">

然后将制作好的favicon.ico图标文件放在source目录下。制作ico格式的图标可使用格式工厂进行格式转换，或使用在线图标制作网站，如http://www.faviconer.com。

404页面

直接在根目录下创建自己的404.html。要注意的是，自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也不起作用。

添加百度站点地图

$ npm install hexo-generator-baidu-sitemap@0.1.1 --save

在_config.yml中添加

baidusitemap:
path: baidusitemap.xml

插入目录

在文章开头，添加

toc: true

如果主题不支持目录或出现其他问题，可能是主题缺少目录功能。
这时，修改layout/_partial/article.ejs的如下位置：

<% } else { %>
  <%- post.content %>
<% } %>

改为

<% } else { %>
  <% if(post.toc !== false && toc(post.content)){ %>
    <div id="toc" class="toc-article">
      <%- toc(post.content)%>
    </div>
  <% } %>
  <%- post.content %>
<% } %>

并在source/css/_partial/article.styl中加入toc相关样式，

//toc
#toc.toc-article
//  background color-background
  width 100%
  border-radius 4px
  margin 1.6em 0 1.6em 2em
  line-height 1.5em
  font-size 0.9em
  -webkit-border-radius 4px

  h2, ol
    padding 0 0.4em
    margin 0
  h2
    cursor pointer
  @media mq-mobile
    margin 1.6em 0
    width 100%
  @media mq-tablet
    margin 1.6em 0
    width 100%
#toc
  line-height 1.3em
  font-size 0.8em
  float left
  .toc
    li
      list-style-type none
      a
        &:hover
          color color-font
          text-decoration none !important
  .toc-child
    padding-left 1.5em

然后在文章开头添加

toc: true

统计

统计功能可以使用百度统计或Google Analytics，推荐后者（但如果你上不进去其网站请自行解决）。
这里。以用百度统计为例，编辑文件hexo\themes\主题名_config.yml，增加配置选项：

baidu_tongji: true

新建文件hexo\themes\主题名\layout_partial\baidu_tongji.ejs，内容如下：

<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
#你的百度统计代码
</script>
<% } %>

注册并登录百度统计获取你的统计代码。
编辑文件hexo\themes\modernist\layout_partial\head.ejs，在/head之前增加：

<%- partial('baidu_tongji') %>

重新生成并部署站点。

更改主题

下载自己喜欢的主题文件，可以到这里找。放到Hexo目录下的themes文件夹下，然后在_config.yml文件中找到：

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape //themes文件夹中对应文件夹的名称

将landscape改为所需要的主题文件的名字，如本博客即使用landscape-plus，然后执行hexo clean(可省略)，再重新hexo g，hexo d，就能看到新主题的效果。

导航栏的定制

打开主题的_config.yml文件，在开头找到如下代码（其中的英文导航栏已经被改成中文）：

# Header
menu:
  首页: /
  文章列表: /archives
  网站地图: /sitemap.xml
  关于: /about
rss: /atom.xml

我们只需要把想加入导航栏的内容按照上面的格式添加进去即可，例如，我们想添加 About 项。则添加

About: /about

注意，配置文件中的冒号后必须有一个空格，冒号后的内容表示访问路径，接下来我们只需要在 blog/source目录下增加一个about文件夹，并在其中添加一个index.md文件，当我们在主页点击 About 后，页面便会跳转到我们刚刚所编辑的这个index.md所生成的静态网页中，index.md的内容可按照个人需求来写。

站内搜索

站内搜索我目前使用Google镜像搜索站内。
打开\hexo\themes\你的主题目录\layout_partial目录下面的header.ejs文件，把

<div id="search-form-wrap">

修改为：

div id="search-form-wrap">
    <%- search_form({button: ''}) %>
</div>

打开hexo\node_modules\hexo\lib\plugins\helper\search_form.js，在第11行中，把google.com替换成谷歌google镜像域名，例如 g2.wen.lu。然后把占位符从英文的“search”改成中文的“搜索”，将第13行的'placeholder="' 修改为 'placeholder="搜索"'。

网站计数

网页计数功能目前的较好选择是不蒜子，普通用户只需两步走：一行脚本+一行标签，搞定一切。追求极致的用户可以进行任意DIY。

安装脚本

要使用不蒜子必须在页面中引入busuanzi.js，目前最新版如下。

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

不蒜子可以给任何类型的个人站点使用，使用hexo时，打开themes/你的主题/layout/_partial/footer.ejs从第二行开始添加上述脚本即可，当然你也可以添加到 header 中。

安装标签

要显示站点总访问量，复制以下代码添加到你需要显示的位置。有两种算法可选。
算法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>

打开themes/你的主题/layout/_partial/footer.ejs添加即可，其中中文部分可以自定义。
以上两种算法可以同时添加，这样既显示访客数，又显示访问量。

修改网站顶部大图

打开themes/landscape-plus/source/css/_partial/header.styl，取消第33行的注释，也就是说删除两个斜杠"//"。然后到Hexo\themes\landscape-plus\source\css\images中，删除banner.jpg或将其改为其他名字，再把喜欢的图片命名为banner.jpg放在其中。

网站底部自定义

在加入网站计数功能时，打开的themes/你的主题/layout/_partial/footer.ejs文件中有如下代码：

Theme by #主题地址
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>

这是可以自定义的，可以酌情进行修改或删除。

注意事项

最新版Hexo（3.0.0或以上版本）默认未安装hexo-deployer-git插件，即部署（上传）到github要用的插件，所以如果不安装这个插件，就要报错。这时执行如下命令：

npm install hexo-deployer-git --save

landscape-plus主题优化

Archive分页问题

进入Archives页面后，如果发现文章列表没有以标题“方块”展示，而是和主页一样以标题和内容展示，则需要修改Hexo根目录的_config.yml，加入或修改参数如下所示：

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

#主页每页显示文章数
index_generator:
    per_page: 10
#archive分页每页显示文章数
archive_generator:
    per_page: 30
#tag分页每页显示文章数
tag_generator:
    per_page: 30
#category分页每页显示文章数
category_generator:
    per_page: 30

修改完成后，预览Archives页面正常。

Tag与Category分页问题

如问题一中配置所示，设置了tag和category分页显示文章数为30，当该分页下文章总数超过这个设置时，正确的显示应该有分页跳转菜单，但目前Landscape-plus的版本存在问题，这时需要修改代码。
打开 \themes\landscape-plus\layout_partial\archive.ejs
在末尾的<% } %>之前加入代码：

<% if (page.total > 1){ %>
  <nav id="page-nav">
    <%- paginator({
      prev_text: '« Prev',
      next_text: 'Next »'
    }) %>
  </nav>
<% } %>

修改完成后，预览Tag或category页面都恢复正常。

修改归档挂件的时间格式

原格式形如：

四月 2016(13)
三月 2016(11)

如果要改为：

2016年 04月(13)
2016年 03年(11)

打开\Hexo\themes\landscape-plus\layout_widget\archive.ejs，找到第五行的

<%- list_archives() %>

更改为

<%- list_archives({format: 'YYYY年 MM月'}) %>

修改归档页面的时间格式

归档页面即点击导航栏“文章列表”后的页面，原格式形如：

4月 5

要改为类似：

4月 5日

打开\Hexo\themes\landscape-plus\layout_partial\archive-post.ejs，在第四行找到

date_format: 'MMM D'}) %>

将其更改为

date_format: 'MM月 DD日'}) %>

SEO（搜索引擎优化）

GoogleWebmasters：站长工具，让博客被Google更好的收录，比如手动让Googlebot抓取、提交Robots、更新Sitemap等。
另有百度站长工具。
经过测试，发现在Google提交网址并验证网站所有权和手动抓取后，很快就可以直接在Google上搜索到自己的播客网站，而百度则目前仍未能被其搜索引擎所抓取。可以看出Google对个人站长更为友好。

评论系统

“多说”是一个较好的评论工具，除了多说，还可以使用Disqus等。评论为博主和访问博客的读者提供了交流的平台，是博客的基本功能之一。可参考多说帮助文档。
一些主题是自带多说评论的，比如我目前正在使用的landscape-plus主题，这时只需在网站配置文件中开启即可。
对于没有多说的主题，在_config.yml中添加多说的配置：

duoshuo_shortname: 你站点的short_name

修改themes\landscape\layout_partial\article.ejs模板，把

  <% if (!index && post.comments && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
  <% } %>

改为

  <% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0]
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

本文对网络文章和所使用工具的官方文档多有参考，一并谢过，不一一具。