如何在 Jekyll 上添加更多内容答案

【问题标题】：How to add more to a head on Jekyll如何在 Jekyll 上添加更多内容
【发布时间】：2019-01-04 07:48:45
【问题描述】：

我有一个 GitHub 托管网站，目前使用 Jekyll 主题，并在 HTML 上运行。这个问题是我必须放

---
layout: default
---

从头开始，这会照顾到头部。但是现在，我不能在头部添加任何东西，比如我需要使用的重要脚本。如果有人有这方面的经验，我该怎么办？

【问题讨论】：

标签： github jekyll-theme

【解决方案1】：

我找到了解决这个on Jessica Reel's blog的方法。

在您的 default.html 布局中，在您的头部（或者更好的是在您的正文末尾，除非您的脚本需要在头部），添加如下内容：

  {% if page.custom_js %}
    {% for js_file in page.custom_js %}
      <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ js_file }}.js"></script>
    {% endfor %}
  {% endif %}

然后在你页面的front-matter中，添加：

custom_js:
- example-js-file-1
- example-js-file-2

完全相同的原则也适用于 CSS。

由于我使用嵌套布局，我最终在自己的网站上更进一步。 Jekyll 3 so has a separate variable namespace for layout variables，所以在我的主布局的 head 中，我首先指定布局的自定义 css 然后页面的自定义 css：

{% if layout.custom_css %}
  {% for stylesheet in layout.custom_css %}
  <link rel="stylesheet" href="/assets/css/{{ stylesheet }}.css">
  {% endfor %}
{% endif %}
{% if page.custom_css %}
  {% for stylesheet in page.custom_css %}
  <link rel="stylesheet" href="/assets/css/{{ stylesheet }}.css">
  {% endfor %}
{% endif %}

所以你可以看到它应用了来自布局前端的自定义 css，然后应用了来自特定页面前端的自定义 css，这样东西就可以正确地从一般样式级联到特定样式。 p>

【讨论】：

【解决方案2】：

如果您使用的是Jekyll theme by GitHub，您可以使用所需的标题填充以下文件：

_includes/head-custom.html

因为这个（AFAIK）覆盖了主题提供的文件，我建议使用主题自己的文件作为起点。例如，在 cayman 主题中，它看起来像这样（link，CC0）：

<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->
{% include head-custom-google-analytics.html %}

<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->

<!-- end custom head snippets -->

请注意，我仅针对 cayman 和 architect 主题进行了测试。

【讨论】：

【解决方案3】：

https://jekyllrb.com/docs/layouts/#usage

第一步，将模板源码放入default.html。

创建以下文件_layouts/default.html

然后你可以在里面放任何你想要的东西并自定义head，例如：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

【讨论】：

只是为了澄清一下，在文件_layouts/default.html 中，我是否只将GitHub 为我生成的内容放在首位？ Github 会在网站上自动为模板生成一些代码，我可以在它的源代码中看到它。那我要不要复制自动生成的代码，放到上述文件中呢？
您必须将所有内容放在default.html 中并使用示例中所示的变量。随意阅读文档以全面了解模板的工作原理。

【解决方案4】：

Jekyll 视图可以分为两个主要部分，一是布局，二是内容。布局存储在_layouts文件夹中，您可以在其中添加自己的布局，甚至可以使用其他布局创建一个新的check here。

对于每个布局，你需要{{ content }}，这是你的页面内容最终将被添加的地方。

您还可以在内容中添加更多信息以访问布局。 Added info

并在主/布局页面上获取它。 Get info

【讨论】：