create a zone

Posted on Edited on

大家好，为了便于使用latex以及让我的主页面看起来更简洁，我把一些内容放到了我新建的一个zone.

我在source目录下新建了一个目录，然后由于之后直接写入网页文件，所以在配置文件_config.yml里面设置跳过渲染

1
2
skip_render:
 - "zone/statistical_learning/*"

至于html文件如何生成

  1. 可以选择直接写

记得在开头加上MathJax的src

1
2
3
4
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

以下可以作为模板，效果：https://hc1023.github.io/zone/statistical_learning/testhtml.html

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
</head>
<body>
<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

I can also use LaTeX aligned environment.

  \begin{aligned}
  \delta_{k}(x) &=-\frac{1}{2 \sigma_{k}^{2}}\left(x-\mu_{k}\right)^{2}+\log \pi_{k} \\
  &=-\frac{1}{2 \sigma_{k}^{2}} x^{2}+\frac{x \mu_{k}}{\sigma_{k}^{2}}-\frac{\mu_{k}^{2}}{2 \sigma_{k}^{2}}+\log \pi_{k}
  \end{aligned}
</p>
</body>
</html>

这种方法自由度比较高，但同时也有点费时（尤其当涉及到的格式比较多的时候，而我对html的语法也不太熟悉）。

  1. 可以借助markdown加一个MD生成HTML的工具

目前来看，typora生成的html文件是比较合适的，但它里面的公式采用的生成方法是MathJax图片格式插入，当然缺点就是文件会比较大。

其它VScode有用MathML的，体验效果不佳……

另外可以用pandoc，windows系统安装自行搜索，但有没有可能我是WSL小能手呢？

1
2
sudo apt install pandoc
pandoc --toc --standalone --mathjax -f markdown -t html test.md -o test.html

优点就是文件大小立马比上面图片嵌入的方式缩小了二十几倍，而且网页端效果也很不错，带了目录。缺点是手机端看起来不太好看啊……公式都变小了……

所以说想寻求完美的话，就选择第一种方法自己直接写吧，应该也会有一些辅助工具。但是我没这么高要求，就选第二种方法。

但是手机上点击链接需要下载，PC端看也是很不错的，这比较适合放CV。