hexo搭建遇到的问题及优化

Posted on   |   Updated on | In | | Visitors

前言

终于有了一个整理自己学习笔记的地方了，之前用过印象笔记，觉得它的markdown格式处理得不是很完美，复制粘贴出来总是格式不对。后来又用过jupyter_nootboke，但是不方便在其它客户端查看。

折腾了半天终于弄好了期间遇到过不少坑，发现hexo有时候同一样的问题总是对应着几种不同的解决方法，在此整理一下以便之后遇到问题。

关于问题

NexT这里使用了next主题，这个主题特别简洁，还有很多易用性的扩展，尤其侧边栏的快速定位，让我爱不释手。

头像不显示

开始按照_config.yml中所说把avatar.gif放到blog-site/source/下，没有任何的作用。后来发现是主题的原因，放到themes/next/source/images/下就好了，默认的头像是正方形的，这里修改了一下代码把它改成圆形，文件位置在
themes/next/source/css_common_components/sidebar/sidebar-author.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;  
  /* start*/
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* end */
}

网页图标favicon.ico不显示

这里也是因为Next的原因，把favicon.ico放到themes/next/source/images/下，然后修改_config.yml中favicon: /images/favicon.ico解决了问题。这里介绍一个很方便转换ico的网站favicon在线制作。

没有建立资源文件夹

  • 设置post_asset_foler: true之后执行hexo new post_name后没有建立资源文件夹。搜索没有查到相关记录，后来想到之前next主题设置时，把配置文件拆分了出来，这样每次执行hexo clean/generate的时候在后面加了参数--config指定了配置文件。但是这样修改的文件对于hexo new post_name来说是没有修过的，所以要在source/_config.yml修改这项参数。

  • 之后没有选择官方的标签插件是因为，在编辑markdown时无法看到预览效果所以安装npm install https://github.com/CodeFalling/hexo-asset-image --save，在文章中使用markdown语法引用![logo](<title_name>/a.png)使用。

  • 选择官方的标签插件引用图片。

关于优化

在右上角或者左上角实现fork me on github

在这里选择喜欢的样式。这里选择的是

1
<a href="https://your-url" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

将其粘贴到themes/next/layout/_layout.swig中，放在div class="headhand"></div>下面。

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将#换成<i class="fa fa-tag"></i>

侧边栏社交小图标设置

在配置文件搜索social_icons，把值换成喜欢的图标名字
，这里列出了图标库

在网站底部加上访问量

打开/themes/next/layout/_partials/footer.swig文件添加红框内的代码

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

添加统计代码如下位置

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

网站底部字数统计

根目录安装npm install hexo-wordcount --save
然后再/themes/next/layout/_partials/footer.swig文件最后加上

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

添加顶部加载条

_config.yml设置中pace:true

在文章底部增加版权信息

在目录themes/next/layout/_macro/下添加my-copyright.swig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	});
    });  
</script>
{% endif %}

在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改/themes/next/layout/_macro/post.swig
在如下位置

添加代码：(注意和之前的教程不一样，这里可能是next的更新了，所以要把代码放到外面，否则在wechat_subscriber未开启时会导致失效。)

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl末尾增加一行

1
@import "my-post-copyright"

博文置顶

替换node_modules/hexo-generator-index/lib/generator.js所有的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

使用：在头部添加top

1
2
3
4
5
6
7
8
---
title: 
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

修改字体大小

/themes/next/source/css/_variables/base.styl搜索font-size-base

设置阅读次数

添加阅读量统计

添加搜索

1
2
local_search: 
  enable: true

SEO优化

两个搜索引擎入口：

这里选择用下载文件的方式，将文件放到source/目录下，注意一点应该在文件前添加两行代码，防止hexo将其格式化

1
2
layout: false
---
生成站点地图 sitemap

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

更改配置

1
2
3
4
5
# 自动生成sitemap
sitemap: 
  path: sitemap.xml
baidusitemap: 
  path: baidusitemap.xml
使搜索引擎收录我们的博客
网站自身优化

给出站链接添加 “nofollow” 标签
/themes/next/layout/_partials/footer.swig找到下面两行，分别在a标签中添加rel="texternal nofollow"属性

同样在/themes/next/layout/_macor/sidebar.swig中添加这个属性

设置更改属性

seo: true

缩短文章链接

编辑配置文件
permalink: :title.html

添加文章更新时间

参考了hexo添加文章更新时间

首先找到/themes/next/layout/_macro/post.swig文件，在<span class="post-time">...</span>后添加：

1
2
3
4
5
6
7
8
{%if post.updated and post.updated > post.date%}
  <span class="post-updated">
    &nbsp; | &nbsp; {{ __('Updated on') }}
    <time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
      {{ date(post.updated, config.date_format) }}
    </time>
  </span>
{% endif %}

博主这里改了一下显式的文本，后面的语言配置没有配，如果想手动更改文章更新时间在文章前加上：

1
updated: 2018-01-01 12:00:00

默认使用md的修改时间。

文章添加阴影效果

找到文件themes/next/source/css/_custom/custom.styl，添加如下代码。

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}