使用jekyll在github页面上加载MathJax而不覆盖布局

Question

我使用 Jekyll 设置了 GitHub Pages 站点：https://davidelegacci.github.io/Research/。我需要加载 MathJax 来显示数学内容，但这样做最终会覆盖布局，获得无样式页面。

如何在不覆盖布局的情况下加载MathJax？

一些细节。根目录是

.
├── README.md
├── _config.yml
├── _layouts
│   └── default.html
├── hamiltonian
│   └── some_content.md
└── learning
    └── some_content.md

无需加载

default.html

布局在

_config.yml

所在的任何位置

plugins:
  - jekyll-relative-links
relative_links:
  enabled: true
  collections: true
include:
  - README.md

请注意，没有安装主题。我猜 Github 使用了一些默认的样式表（似乎是 https://necolas.github.io/normalize.css/）。我喜欢这种默认样式，但数学没有渲染：

我将

default.html

布局添加到所有页面和帖子，将 Front Matter Defaults 添加到

_config.yml

：

defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: "default"

我在

default.html

中加载了 MathJax

<!doctype html>
<html lang="en">
<head>
  <!-- inline config -->
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        macros: {
         RR: "{\\bf R}",
         bold: ["{\\bf #1}", 1],
         indep: "{\\perp \\!\\!\\! \\perp}",
       }
     },
     svg: {
      fontCache: 'global'
    },
  };
</script>

<!-- load MathJax -->
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

</head>
<body>
  {{content}}
</body>
</html>

加载 MathJax 的脚本取自此处 https://my1396.github.io/Econ-Study/2023/10/12/Mathjax.html 官方文档位于此处 https://docs.mathjax.org /en/latest/web/configuration.html.

现在内联和显示 LaTex 都可以正确渲染，但任何样式都会丢失：

如何在不覆盖布局的情况下加载MathJax？

相关：我发现了这个问题，但它指的是一个基于 Jekyll 的网站，没有 GitHub 页面，我很快就迷失在 gem 的东西中，我完全忽略了它。

Answer 1

要添加到 Benjamin 的评论，您可以确保 Primer 主题的样式表包含在您的

default.html

布局中。由于 GitHub Pages 默认使用 Primer 主题，因此您应该在自定义布局中显式链接到它，以便在覆盖默认布局时保持样式。

您的

default.html

布局（包括 Primer 主题的样式表）将是：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Primer theme stylesheet -->
  <link rel="stylesheet" href="https://pages-themes.github.io/primer/css/style.css">
  
  <!-- MathJax configuration and script -->
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        macros: {
          RR: "{\\bf R}",
          bold: ["{\\bf #1}", 1],
          indep: "{\\perp \\!\\!\\! \\perp}"
        }
      },
      svg: {
        fontCache: 'global'
      }
    };
  </script>
  <script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
  {{ content }}
</body>
</html>

通过使用前面的内容将此布局包含在 Markdown 文件中，您应该能够使用 MathJax，而不会丢失 Primer 主题的样式：

---
layout: default
---

Your markdown content here.

如果您有自定义样式或其他脚本，您还可以将它们包含在

head

的

default.html

部分。确保在任何自定义样式之前添加 Primer 主题的样式表链接，以允许自定义 CSS 在需要时覆盖默认主题样式。

使用jekyll在github页面上加载MathJax而不覆盖布局

问题描述投票：0回答：1

1个回答

最新问题

使用jekyll在github页面上加载MathJax而不覆盖布局

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1