我有一个 GitHub 托管网站，目前正在使用 Jekyll 主题，并在 HTML 上运行。这个问题是我必须把
---
layout: default
---
进入开始，这需要照顾头部。但是现在，我不能在头部添加任何东西，比如我需要使用的重要脚本。如果有人有这方面的经验，我该怎么办？
问问题
1890 次
4 回答
6
我在 Jessica Reel 的博客上找到了解决方案。
在您的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 有一个单独的变量命名空间用于布局变量，所以在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，这样东西就可以从一般样式正确级联到特定样式。
于 2020-04-18T07:55:43.397 回答
0
如果您使用GitHub 的 Jekyll 主题，您可以使用所需的标题填充以下文件：
_includes/head-custom.html
因为这个（AFAIK）覆盖了主题提供的文件，所以我建议使用主题自己的文件作为起点。例如，在cayman主题中，它看起来像这样（链接，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 -->
请注意，我仅针对开曼群岛和建筑师主题进行了测试。
于 2022-01-29T14:21:28.490 回答
-1
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>
© to me
</footer>
</body>
</html>
于 2019-01-04T09:17:40.017 回答