Question

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

---
layout: default
---

从头开始，就负责头部。但是现在，我无法像需要使用的重要脚本那样在头上添加任何内容。如果有人对此有经验，该怎么办？

Answer 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 %}

然后在页面的最前面添加：

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，从而使样式从常规样式正确过渡到特定样式。

Answer 2

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>

Answer 3

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

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

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

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

如何在Jekyll上添加更多内容

3 个答案: