Question

我有点腌菜。我有一个关于GitHub页面的网站，（重新）使用Jekyll生成。此网站上的许多页面引用了一组存储在子目录中的代码片段（例如，/src/）。我想要

以某种方式包含（如在{% include %}中）这些代码段到每个页面，因此我不必维护多个副本（如果片段只是副本 - 摘到页面），
通过静态页面的生成持续存在的片段（我认为，不包括将它们放在_includes / _posts下的某个位置。）

我做的最好的就是将它们放在_posts下的单独目录中，然后使用{% include_relative %}，但这些文件不会以_site的方式进行。

那么，有人可以帮助我吗？

Answer 1

建议：

您可以使用GitHub Gists嵌入代码。

这将是这样的：

file.md：

Content

<script src="https://gist.github.com/VirtuaCreative/a219a7dca80f12434d1b.js"></script>

Content

查看我在GitHub上的“测试”项目中的样子：http://github.virtuacreative.com.br/test/2016/welcome-to-jekyll1/

从那里，您将拥有代码块和raw按钮。

要做到这一点，只需转到https://gist.github.com/并添加新的要点。您可以添加说明并使用正确的扩展名命名该文件。

这将是最快的方式。但我不确定这是否能达到你的需要。

Answer 2

更新：

这个答案不能满足问题作者的需要，但可能对其他人有用，这就是为什么我要把它保留在这里。

您最好使用集合，因此您可以将markdown个文件集合调用到单个html页面中。

例如：

第一。将收藏集添加到您的_config.yml文件中（假设您的收藏集的名称为snippets）：

collections:
  snippets:
    permalink: /snippets/:path/

第二。现在，在站点根目录中创建一个名为_snippets的文件夹。

第三。然后创建一个html页面，您将从该页面调用该集合：

{% for snippet in site.snippets %} ... {% endfor %}

然后，根据您的标记，所有片段都会显示在该页面上。

如果要对片段进行分组，例如“javascript”，“php”，“css”，您可以为每个片段添加一个集合，并在不同的html页面中调用它们：

第一。 _config.yml：

collections:
  javascript:
    permalink: /snippets/javascript/:path/ # this is just an example 
  php:
    permalink: /snippets/php/:path/ # this is just an example 
  css:
    permalink: /snippets/css/:path/ # this is just an example

第二。创建文件夹：_javascript，_php和_css

第三。在文件夹中创建markdown文件：

---
layout: whatever
title: My first snippet
...
---

```javascript
<script>
var car = {type:"Fiat", model:"500", color:"white"};
document.getElementById("demo").innerHTML = car.type;
</script>
```

然后在html页面或多个页面中调用它们，由您决定如何组织它们：

{% for snippet in site.javascript %} 
...
<h1>{{ snippet.title }}</h1>
<div>
  {{ snippet.content }}
</div>
... 
{% endfor %}

然后为其他人做同样的事情：

{% for snippet in site.php %} ... {% endfor %}
{% for snippet in site.css %} ... {% endfor %}

希望有所帮助！：）

Answer 3

GitHub Gists是一种在一个地方维护代码段的好方法，正如@Virtua Creative所建议的那样。而且，see已经支持GitHub Gists，例如{% gist [gist_number] %}。

但是如果你想在你的Jekyll项目中维护代码文件，试试这个插件：remote_file_content。

安装后，它易于使用。下面的代码片段来自插件的GitHub页面。

{% highlight javascript tabsize=4 %}
{% remote_file_content /src/your-snippet.html %}
{% endhighlight %}

Answer 4

如果像我一样，您正在使用命令行工具来生成代码片段，则html包含应该可以正常工作。

创建一个IntoIterator目录，然后使用普通的include初始标记引用文件。

_includes/code-snippets

使用Jekyll，如何有效地存储代码示例？

4 个答案: