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

我有点困难。我在GitHub页面上有一个网站，使用Jekyll重新生成。此网站上的许多页面引用了存储在子目录中的一组代码片段（例如，

/src/

）。我想要

• 以某种方式将这些代码片段包含到每个页面中（如

  {%include%}

  ），这样我就不必维护多个副本（如果代码片段只是复制粘贴到页面上）
• 在生成静态页面的过程中要保留的代码片段（我假设，这不包括将它们放在

  \u includes

  /

  \u posts

  ）

我所做的最好的事情就是把它们放在

\u posts

下的一个单独的目录中，然后使用

{%include\u relative%}

，但是这些文件不会以这种方式进入

\u站点

那么，谁能帮我一下吗？
更新：

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


您最好使用集合，这样就可以将
markdown
文件集合调用到单个html页面中

例如：

第一。将集合添加到您的
\u config.yml
文件中（假设集合的名称为
snippets
）：

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

三,。然后创建一个html页面，从中调用该集合：

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

然后，所有代码片段将根据您的标记显示在该页面上

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

第一<代码>\u 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 

第二。创建文件夹：

\uJavaScript

、

\uPHP

和

\uCSS

三,。在文件夹中创建标记文件：

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

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

希望有帮助！：）

建议：

您可以使用GitHub gist嵌入代码

这看起来是这样的：

file.md

：

Content

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

Content

内容
内容

查看我在GitHub上的“测试”项目上的外观：

从那里，您将拥有代码块和

raw

按钮

要做到这一点，只需转到并添加新的要点。您可以添加描述并使用文件的右扩展名命名文件

这将是最快的方式。但我不确定这是否能满足您的需要。

正如@Virtua Creative所建议的，这是一种在一个地方维护代码片段的好方法。而且，我认为GitHub gist已经得到支持，比如

{%gist[gist\u number]]}

但如果您想在Jekyll项目中维护代码文件，请尝试以下插件：

一旦安装，它很容易使用。下面的代码片段来自插件的GitHub页面

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

---

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

创建一个

\u includes/code snippets

目录，然后使用普通includes初始标记引用文件

<figure>
{% include code-snippets/big-test.html %}
<figcaption>Bad: Three different scenarios bundled in to one test</figcaption>
</figure>

{%include代码段/big-test.html%}
坏：三个不同的场景捆绑在一个测试中

我是否正确地假设集合中的每个文件都必须有一个“前端内容”？因为我正在处理的.cpp文件似乎不能接受它。无论如何谢谢你！是的，它们就像降价帖子，但它们不在

\u posts

目录中。但你唯一需要的是布局。也许，如果您根本不需要任何布局，可以将其设置为null

layout:null

我从来没有听说过关于.ccp文件与Jekyll的任何事情，您是说.ccp代码块？我以为你只是想显示代码块。也许你可以尝试代替集合。是的，我希望一组.cpp文件能够

{%include%}

放在文章中并复制到输出中（这样我就可以通过链接引用它们）。不允许使用前端事务/等，因为我还希望用户能够编译它们。我不确定数据在这里会有什么帮助，你能解释一下吗？你是说作为一个代码块（在文章中）还是作为一个原始文件的链接，或者两者兼而有之？这很好，但我真的希望将文件保存在同一个存储库中。我真的很感谢你的努力，但我发现使用Jekyll显然没有简单的方法来满足我的需求。我真的希望你的建议对其他人有用。谢谢你的时间和努力！不客气。或许另一位STO用户可以给出更好的答案，希望如此。：）但我告诉过你，使用数据和集合的方式是这样的，但恐怕它会复制代码。无论如何，祝你好运！：）

Content

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

Content

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

<figure>
{% include code-snippets/big-test.html %}
<figcaption>Bad: Three different scenarios bundled in to one test</figcaption>
</figure>