终于忍受不了hexo了,换了个电脑,原来的东西基本上都迁移不过来,node版本,各种插件的依赖,不同的版本又会不一样,遇到各种编译错误,编译慢。。。。

受不了了,终于决定将博客从hexo迁移到hugo了,一开始还有点犹豫不舍得,转过来之后,真香!

迁移过程中主要遇到了以下的问题

  1. 保留原来博客的url
  2. 原博客md文件格式与hugo的某些格式不兼容
  3. 自定义侧边栏内容实现显示微信公众号
  4. 添加评论组件
  5. 修改搜索
  6. 添加归档页,tag页,分类页

一、保留原来博客的url

这点还是比较重要的,由于之前的博客地址在搜索引擎上已经有索引了,之前的url都是/article/xxxx.html 的形式,但是hugo的默认格式是/post/xxxx, 如果重新建立索引的话又要过很久才能被搜索引擎收录,为了保持和之前一样,这里在创建新文章的时候,需要使用以下命令

1
hugo new article/xxxx.md

这个命令将新建文章md文件到content/article 目录下,但是这样生成的文章路径是/article/xxxx, 和之前的文章还差一个.html后缀,而且会一个文章生成一个目录。

解决办法修改站点配置文件 config.toml, 添加

uglyURLs = true

添加完这个配置以后,就会将生成的文章url添加.html 后缀, 我也不知道这个url为什么就ugly了,反正我觉得不ugly。。。

二、原博客的md文件与hugo不兼容问题

之前用hugo写博客的时候,md文件限制比较宽松,但是hugo要求会比较严格,如果格式不正确则无法编译,主要有以下几点

之前写博客用


title: "hexo迁移hugo"
date: 2021-05-31T22:03:53+08:00
draft: true

categories:
  - web
  
tags: web, hexo
permalink: hexo-to-hugo
---


xxxxx

<!-- more -->

xxxxxx

上面的格式在转换的时候,首先最上面没有--- , 没有这三个杠,hugo不会认为下面的内容是frontmatter信息,而是当成文章正文处理,这样会造成文章没有标题,没有标签,需要在所有的文章最上面加上---

categories与tags 之前可以直接在后面写内容,换成hugo以后则不行了,只能写成以下格式,否则无法编译。

categories:
  - web
  
tags: 
  - web
  - hexo

<!-- more --> 该标识是为了在首页显示简介的,上面的内容显示在首页,后面的内容不显示,只有点击阅读全文跳转到对应的文章url以后才可以显示所有。但是这个标识在more 单词前后各有个空格,hugo就不识别了,解决办法是将more前后的空格都去掉。

之前md中使用permalink 来自定义文章的url, 在hugo中,需要将permalink 修改为slug

三、自定义侧边栏内容实现显示微信公众号

之前博客使用的是Maupassant主题,主要是其非常简洁,该主题在hugo上也有对应的主题,maupassant-hugo ,其实该主题已经非常符合我的需求了,但是由于我的博客里的文章都写在了article 目录下,该主题遍历文章都不包含该目录,所以需要修改主题模板。

搜索主题下所有文章中包含 slice "post" "posts" ,这段代码的意思是遍历post, posts 两个目录下的文件,修改为slice "post" "posts" "article", 添加一个"article" 目录,这样才会遍历我自定义的目录。

该主题默认右边栏有个广告,我目前也用不到,就删除了,但是我需要的是将的我微信公众号放到右边栏,于是按照它的广告模板的写法,添加了一个用于显示微信公众号的模板 ,在主题的layouts/partials 目录下添加mp.html文件,写入以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{{ with .Site.Params.mps }}
<section class="widget">
    <h3 class="widget-title">微信公众号</h3>
    <ul class="widget-list">
        {{ range . }}
        <li>
            <a href="{{ .url }}" title="{{ .title }}" target="_blank">
                {{ if .img }}
                    <img src="{{ .img }}" style="width: 160px;">
                {{ else }}
                    {{ .title }}
                {{ end }}
            </a>
        </li>
        {{ end }}
    </ul>
</section>
{{ end }}

在博客配置文件config.toml中添加配置选项

1
2
3
[[params.mps]]
  title = "欢迎关注我的微信公众号"
  img = "https://www.yangyanxing.com/image/qrcode.jpg"

之后再修改layouts/partials/sidebar.html , 在合适的位置添加

1
2
3
<section class="widget">
  {{ partial "mp" . }}
</section>

这样就可以将公众号显示在后面了

image-20210531230052847

四、添加评论组件

这个比较坎坷,目前没有完美的解决方案,尝试过Gitalk,gitment,utterances.

都是基于github的issue来提交评论,但是Gitalk需要我来主动访问一下文章,以前那么多还都需要重新访问一遍,

utterances 则不用,需要在github上安装一下他的应用,但是我部署上去的时候,他的服务还出问题了。。。提交评论以后显示403,我一直找是不是我哪里的配置有问题,直到看到大家都在它的github上提交 issue。。。

五、修改搜索

该主题默认的搜索是使用google,但是国内的环境大家也知道,本来想改为百度站内搜索,但是我发现百度搜索收录的时间实在在太慢了,这还是我向百度添加了sitemap的情况下,有时一个月也收录不了,但是我发现bing收录的挺快,一般一天就能爬到并收录,并且我根本就没有提交过sitemap,我甚至都怀疑bing是否使用了google的检索。。。。

在此也特别推荐下bing搜索,最近发现,它在搜索技术文章上基本上可以和google相似了,而且广告也少。

修改主题的layouts/partials/search_form.html

1
2
3
4
5
6
<form id="search" action='{{if .Site.Params.localSearch }}{{ "search.html/"| absURL}}{{else}}//www.bing.com/search{{end}}' method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      {{/** the keywords **/}}
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="{{ .Site.BaseURL }}">
      <button type="button" class="submit icon-search" onclick="bingso()"></button>
</form>

将搜索引擎改为bing。

但是这还不行,这样提交搜索以后是不会进行site站内搜索的,需要再写个js文件将site:www.yangyanxing.com 加进去。

其实这里需要再添加一个js文件,我为了省事就直接在它主题的static/js/totop.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
29
30
31
32
$(window).scroll(function() {
    $(window).scrollTop() > 500 ? $("#rocket").addClass("show") : $("#rocket").removeClass("show");
});
$("#rocket").click(function() {
    $("#rocket").addClass("launch");
    $("html, body").animate({
        scrollTop: 0
    }, 500, function() {
        $("#rocket").removeClass("show launch");
    });
    return false;
});

// bing搜索

function bingso(){
    var querystr = $("input[name='q']")
    var searchform = $("#search")
    var q = querystr.val()
    q = q + " site:www.yangyanxing.com"  
    querystr.val(q)
    searchform.submit()
    querystr.val("")
}

$('#search').bind('keydown', function(event) {
    if (event.keyCode == "13") {
        //回车执行查询
        bingso()
        return false
    }
});

bing搜索上面的是主题原来的内容,是网页右下角的返回顶端的按钮,下面的内容就是在搜索时将原来的搜索词上再添加上site:www.yangyanxing.com 后再继续进行搜索。

六、添加归档页,tag页,分类页

其实这几个页面添加的方法都是一样的,参考 文章归档支持 , 但是这里有一个要注意的,主题的github readme文件上只是写了

1
2
3
title: "归档"
description: Android资深工程师 ,Go和Java打杂师,《Android Gradle权威指南》作者,Android官方技术文档译者
type: archives

但是在实际md文件上需要加上---

1
2
3
4
5
---
title: "归档"
description: Android资深工程师 ,Go和Java打杂师,《Android Gradle权威指南》作者,Android官方技术文档译者
type: archives
---

经过一番折腾,终于完成了将博客从hexo到hugo的转换,界面上没有太大的变化,但是对于之前一直受hexo各种node_module折磨来说,现在简直太清爽了,将博客中的所有文章上传到github,在任何一台电脑上,只要git pull 下来就可以写了,终于不用再被node所折磨了。