Jekyll递归动态包括via参数

Question

在我的博客上，由GitHub Pages提供支持，我试图在我的博文中轻松添加代码段。为此，我在 _includes 目录中创建了 code-snippet.html ：

<pre><code>{% include {{include.file}} %}</code></pre>

要在博文中添加代码段，请使用以下代码：

Code snippet: {% include code-snippet.html file="snippets/MyPost/MySnippet.cs" %}

但是，文件 _includes / snippets / MyPost / MySnippet.cs 的内容未包含在内。如果我在 code-snippet.html 中输出{{include.file}}，我可以看到参数是正确传递的，但如果我尝试包含它，我什么也得不到。

Answer 1

这是一个很好的问题。这是我的两分钱。

在这里，我举了你_posts/2012-11-16-idisposable.html帖子的例子。

存储代码段

由于代码是帖子内容的一部分，我在逻辑上将其移至_posts文件夹。将它存储在_includes文件夹中并不是很好，因为这是一个模板文件夹。

让我们将idisposable/TryFinallyDispose.cs.html从_includes/code-snippets复制到_posts/_code或您想要的任何内容。

由于代码存储在一个下划线文件夹（_code）中，因此Jekyll不会按处理。我们只会包含＆＃39;它在我们的帖子中。

注意：代码段可以保存为code.cs

由于我们将使用来自Jekyll依赖项的highligting（见下文），我们只需返回代码段，删除<pre>和<code>。

变成：

var x = new X(); // X is a class that implements IDisposable
try
{
  // do something with x
}
finally
{
  x.Dispose();
}

显示代码

Jekyll提供了各种突出显示代码的方法（markdown，pygments，rouge，..）。在这里，我演示pygments方式，但是您可以自行探索其他解决方案。

基本模板将是（_includes/code-snippet-csharp.html）：

{% capture filePath %}_code/{{include.file}}{% endcapture %}
{% highlight csharp %}
{% include_relative {{filePath}} %}
{% endhighlight %}

注意：这里有一个缺点，在{% highlight csharp %}中，代码名称是硬编码的。我发现无法将language作为变量传递给highlight标记。如果您想使用多种语言，则需要将包含模板复制为code-snippet-csharp.html，code-snippet-js.html，...

样式代码

为了美化我们的代码，我们需要一个额外的css文件。 The basic one is here，但有many more。

样式保存为assets/syntax.css，并包含在_layouts/default.hmtl中：

<link rel="stylesheet" href="{{site.baseUrl}}assets/syntax.css">

它也可以包含在你的sass过程中。

在帖子中包含代码

我们现在只需要在_posts/2012-11-16-idisposable.html中调用我们的代码。

{% include code-snippets/idisposable/TryFinallyDispose.cs.html %}

替换为：

{% include code-snippet-csharp.html file="idisposable/TryFinallyDispose.cs.html" %}

结果

更好的内容结构和精心设计的代码！