博客迁移到了 Hugo

这次抛弃了wordpress，选用了 Hugo 来开发，时隔几年又上了全静态博客

本来想换成 Ghost 的，但是 Ghost 简直不把用户当人，主题开发的体验跟屎一样，都 2021 年了，连基本的搜索功能都没有，hbs 语法限制还多，还不能自己扩展 hbs 功能（更新后会重置），下线了原本有的插件系统。如果你想使用 Ghost，建议先看看这篇文章：为什么我不再喜欢 Ghost 作者说出了我用 Ghost 的真实感受，其实早在 17 年的时候我就尝试从 Wordpress 更换为 Ghost ，最后由于 Ghost 限制太多，最终还是换回了 Wordpress。4年过去了，没想到 Ghost 还是这个死样子。

先跑个分吧

博客系统对比

选来选取，最终决定了 Hexo 和 Hugo，说下两者的优缺点：

Hugo

优点：

世界最快，几千篇文章1秒不到即可生成
开发友好，模板自带很多常用函数，还支持图片处理，保存后可以实时预览
开发模式什么样，线上模式就什么样，不像某些静态平台，开发的时候好好的，一上线就各种报错，说的就是你 Ghost
有一个非常棒的社区，基本所有问题你都能在这里找到答案 https://discourse.gohugo.io/
支持很多的短代码

缺点：

模板少，虽然官网提供了 300 多个模板，但仍没有 Hexo 数量多，也不是很好看
不支持插件系统，这点让开发人员很头大，很多事情都得靠 JS 或者自己写脚本处理

Hexo

优点：

生态强大，主题多，虽然很多时候打开一篇博客文章看到的都是 Next 主题
支持插件系统，除了速度就没有解决不了的事
JS 开发，省点头发

缺点：

生成速度相对于 Hugo 就慢了很多
没有自带的图片处理函数，且自带的模板函数没有 Hugo 多

相比下来，由于我比较追求生成速度和开箱即用，所以选择了 Hugo，Hugo 除了不支持插件，毫不逊色 Hexo，所有内置函数不支持的地方东西写个 JS 脚本处理一下就行了。

从 Vue 主题迁移到 Hugo 废了不少头发，花了 4 天的时间才全部迁移完成，但是其中的快感也是之前用 WP+Vue 体验不到的

迁移工具

WordPress 导出到 Hugo 可以用 wordpress-to-hugo-exporter 这个插件，注意，如果你使用的宝塔 Linux 版本安装的 PHP7.3，会无法导出，因为缺少 ZIP 库，参考：https://www.bt.cn/bbs/thread-36416-1-1.html 最简单的解决办法就是换个 PHP 版本。

关于主题

从之前的 SSR 渲染变成现在的全站纯静态，访问速度+++

支持搜索功能

把所有的内容都存到了 json 里面，然后使用 flexsearch 建立 key 来进行快速搜索

良好的 SEO 优化

虽然对于个人博客来说 SEO 可能没那么的重要，但还是写一下比较好，head 部分把常用的 SEO 相关内容都写进去了，未来会支持 PWA 和 AMP

 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
46
47
48
49
50
51
52
53
54
<meta charset=utf-8>
<title>JS 西班牙语语音合成在 MacOS 上没有声音的问题</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=keywords content="Ice-Hazymoon,冰凌胧月,Hazymoon,MikuTools,">
<meta name=description content="在上篇文章中提到的 写了个西班牙语学习工具 中，最近在 Mac 上使用时发现语音合成一直没有声音，研究了半天才找到解决方法。 在系统设置中打开【辅助功能】">
<meta itemprop=description content="在上篇文章中提到的 写了个西班牙语学习工具 中，最近在 Mac 上使用时发现语音合成一直没有声音，研究了半天才找到解决方法。 在系统设置中打开【辅助功能】">
<meta http-equiv=x-ua-compatible content="ie=edge">
<meta itemprop=name content="JS 西班牙语语音合成在 MacOS 上没有声音的问题">
<link href=https://imiku.me/index.xml title="JS 西班牙语语音合成在 MacOS 上没有声音的问题" type=application/rss+xml rel=alternate>
<link rel=stylesheet href="https://cdn.jsdelivr.net/gh/Ice-Hazymoon/blog-hugo-pages@latest/main.css?v=1630320278">
<meta property="og:site_name" content="JS 西班牙语语音合成在 MacOS 上没有声音的问题">
<meta property="og:type" content="article">
<meta property="og:title" content="JS 西班牙语语音合成在 MacOS 上没有声音的问题">
<meta property="og:description" content="在上篇文章中提到的 写了个西班牙语学习工具 中，最近在 Mac 上使用时发现语音合成一直没有声音，研究了半天才找到解决方法。 在系统设置中打开【辅助功能】">
<meta property="og:url" content="https://imiku.me/2021/07/31/1459.html/">
<meta property="og:image" content="https://imiku.me/2021/07/31/1459.html/1630060151397491.jpg">
<meta property="article:publisher" content="https://imiku.me/2021/07/31/1459.html/">
<meta name=twitter:card content="summary_large_image">
<meta name=twitter:title content="JS 西班牙语语音合成在 MacOS 上没有声音的问题">
<meta name=twitter:description content="在上篇文章中提到的 写了个西班牙语学习工具 中，最近在 Mac 上使用时发现语音合成一直没有声音，研究了半天才找到解决方法。 在系统设置中打开【辅助功能】">
<meta name=twitter:url content="https://imiku.me/2021/07/31/1459.html/">
<meta name=twitter:image content="https://imiku.me/2021/07/31/1459.html/1630060151397491.jpg">
<meta name=twitter:site content="@Ice-Hazymoon">
<meta property="og:image:width" content="1920">
<meta property="og:image:height" content="1280">
<link rel="shortcut icon" href=/favicon.ico type=image/x-icon>
<script type=application/ld+json>
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "JS 西班牙语语音合成在 MacOS上没有声音的问题",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/imiku.me\/2021\/07\/31\/1459.html\/"
        },
        "image": {
            "@type": "ImageObject",
            "url": "https:\/\/imiku.me\/cover.png",
            "width": 1e3,
            "height": 519
        },
        "genre": "post",
        "keywords": "MacOS,Safari,语音合成",
        "wordcount": 171,
        "url": "https:\/\/imiku.me\/2021\/07\/31\/1459.html\/",
        "datePublished": "2021-07-31T13:27:27\u002b00:00",
        "dateModified": "2021-07-31T13:27:27\u002b00:00",
        "author": {
            "@type": "Person",
            "name": "Ice-Hazymoon"
        },
        "description": ""
    }
</script>

图片部分支持自动添加 srcset 部分，SEO+++，支持懒加载，默认有加载动画，自动添加 ALT 属性，支持图片查看缩放动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<img 
    width="800"
    height="617"
    data-zoomable=""
    data-lazyload=""
    alt="左侧选择【朗读内容】，点击系统声音"
    class="medium-zoom-image entered loaded"
    data-ll-status="loaded"
    srcset="2021/07/31/1459.html/1630060151397631_hu3dcef8126cf1a840a0279e998069a100_52511_640x0_resize_catmullrom_3.png 640w, 2021/07/31/1459.html/1630060151397631_hu3dcef8126cf1a840a0279e998069a100_52511_1080x0_resize_catmullrom_3.png 1080w"
    src="2021/07/31/1459.html/1630060151397631.png"
>