Posts 欢迎使用Jekyll!
Post
Cancel

欢迎使用Jekyll!

本文介绍了基于 jekyll 的个人博客环境的搭建方法,并介绍了部署到 github pages 的方法。


1. 前言

发布的帖子位于 _posts 目录。如果想新建帖子,在 _posts 目录中新建一个.md文件,文件名命名为 YYYY-MM-DD-title 的格式。

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll’s dedicated Help repository.

2. 图片

为了在.md中使用图片相对路径,保持本地和线上显示一致,需要修改Jekyll默认的永久链接格式。Jekyll默认的永久链接格式为:

1
permalink: :year/:month/:day/:title/

会导致使用相对路径插入图片的帖子(如../assets/img/postsimg/20200505/1.jpg)无法定位到图片的真正位置。因此需在_config.yml中修改为以下语句:

1
permalink: :year-:month-:day-:title/

或是

1
permalink: :title/

修改后,_posts中帖子的图片无论是在本地还是在线上均能正常显示。但可能出现其它意料之外的后果。

相关信息:

3. 公式

Jekyll虽然支持Markdown,但是不能正确显示公式,可以借用MathJax帮助渲染。

方法:

  • 设置markdown引擎为kramdown,方法为在 _config.yml 里添加:markdown: kramdown

  • 在md文件开始输入代码:

1
2
3
4
5
6
7
8
9
10
11
<head>
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
            inlineMath: [['$','$']]
            }
        });
    </script>
</head>

2017年,mathjax号称 https://cdn.mathjax.org 停止使用,要用下面的方法。

或者,在 jekyll 博客的 _includes/head.html 中,加上如下代码

1
2
3
4
5
6
7
8
9
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

然后正文就可以写公式:$ e = m c^2 $ 这样就能正确显示了。

Cugtyt. 让GitHub Page支持Latex公式

知乎. Jekyll博客中如何用相对路径来加载图片?

This post is licensed under CC BY 4.0 by the author.

-

VSCode部署C/C++开发环境

Comments powered by Disqus.