搭建hexo博客

记录一下搭建博客的过程。

安装hexo

参考内容：https://www.jianshu.com/p/9bbae1d105be

配置hexo与更换Next主题

下载主题

1	git clone https://github.com/theme-next/hexo-theme-next themes/next

由于github被墙，使用代理科学上网后，clone经常报OpenSSL SSL_connect的错，因此我直接在网页上下载的zip包，解压到themes/next文件夹。

页面报错

跟换主题后重新hexo s，页面无法显示内容，提示以下信息：

{% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{{ page.title }} | {{ config.title }}{% endblock %} {% block page_class %}page-post-detail{% endblock %} {% block content %}
{{ post_template.render(page) }}
{% if theme.jiathis %} {% include '_partials/share/jiathis.swig' %} {% elseif theme.baidushare %} {% include '_partials/share/baidushare.swig' %} {% elseif theme.add_this_id %} {% include '_partials/share/add-this.swig' %} {% elseif theme.duoshuo_shortname and theme.duoshuo_share %} {% include '_partials/share/duoshuo_share.swig' %} {% endif %}
{% endblock %} {% block sidebar %} {{ sidebar_template.render(true) }} {% endblock %} {% block script_extra %} {% include '_scripts/pages/post-details.swig' %} {% endblock %}

根据博客介绍，原因是hexo在5.0之后把swig给删除了需要自己手动安装，安装后解决了该问题。

1	npm i hexo-renderer-swig

显示公式

由于我的博客中有大量公式，页面中无法显示。参考博客解决了该问题，问题的核心是配置好两个因素：mathjax和kramed。

添加mathjax

1 2	npm uninstall hexo-math --save npm install hexo-renderer-mathjax --save

换渲染引擎

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

由于我之前瞎试，装过pandoc，也要一起卸掉：npm uninstall hexo-renderer-pandoc --save

修改渲染引擎的bug：到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，第11行的 escape 变量：

1 2	//escape: /^\\([\\`{}\[\]()#$+\-.!_>])/, escape: /^\\([`\[\]()#$+\-.!_>])/,

第20行的em变量：

1 2	//em: /^\b_((?:__\|[\s\S])+?)_\b\|^\((?:\\\|[\s\S])+?)\(?!\)/, em: /^\((?:\\\|[\s\S])+?)\(?!\)/,

配置.\themes\next\_config.yml

# MathJax Support
mathjax:
  enable: true
  per_page: true
  engine: mathjax
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

在文章的Front-matter里打开mathjax开关

title: Hierarchical Attention Networks for Document Classification
date: 2021-06-23 09:26:17
tags:
    - 深度学习
    - Attention
    - Transformer
    - 机器学习
    - 每日论文
    - 经典算法
    - NLP
mathjax: true

重启以下

1
2
3

hexo clean
hexo generate
hexo s

到这里我的公式一部分能显示，一部分不能显示。继续查了查，发现别人也有这个情况，比如多行公式的时候显示不了，是因为不能出现连续的大括号{{。我怀疑我的也是类似的问题，于是试了一下在我的:公式的结构中，把冒号删了，居然所有公式都正常显示了，然后我又把冒号加回去，还是都可以显示！！！不知道上面那堆设置需要时间起作用还是我的修改触发了什么，总之问题解决了。

后面有查了一些博客之后，推测更有可能是浏览器缓存导致的改动生效的延迟，刷新网页的时候应该ctrl+F5。

操作完这套后，本地预览可以正常显示公式，但github.io上却不行（有可能是我clean&generate没有放在最后一步）。根据大佬的指示，我去查了一下github.io页面，确实有报错！

1 error

1
2
3

Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.

Mixed Content: The page at 'https://wangdongdong122.github.io/' was loaded over HTTPS, but requested an insecure script 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'. This request has been blocked; the content must be served over HTTPS.

2 page errors

Mixed content: load all resources via HTTPS to improve the security of your site
Even though the initial HTML page is loaded over a secure HTTPS connection, some resources like images, stylesheets or scripts are being accessed over an insecure HTTP connection. Usage of insecure resources is restricted to strengthen the security of your entire site.
To resolve this issue, load all resources over a secure HTTPS connection.
1 request
MathJax.js?config=TeX-AMS-MML_HTMLorMML
1 resource
Name	Restriction Status
MathJax.js?config=TeX-AMS-MML_HTMLorMML	blocked

google了一下错误内容，终于找到了解决方案，原来只是node_modules/hexo-renderer-mathjax/mathjax.html中的 <script> 少了个type，终于搞定了！！

1
2
3

Just if someone else face the same problem, you should use this:

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

最后再重启一次

hexo clean
hexo generate
hexo s