【问题标题】:Jekyll recursive dynamic include via parameterJekyll 递归动态包含通过参数
【发布时间】:2014-11-24 11:10:26
【问题描述】:

在我的由 GitHub Pages 提供支持的博客上,我试图让在我的博客文章中包含代码 sn-ps 变得容易。为此,我在 _includes-目录中创建了 code-sn-p.html

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

为了在博文中包含代码 sn-p,我使用以下代码:

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

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

【问题讨论】:

  • 我认为不支持这种递归。但是如果 code-sn-p.html 只包含 pre 和 code 标签,您可以轻松地手动添加它们,从而避免额外的包含级别。我个人更喜欢将代码剪切并粘贴到正文中(我使用 Textile,大多数人更喜欢 Markdown)并用{% highlight %} 标签包围它。

标签: include jekyll github-pages


【解决方案1】:

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

这里,我以你的_posts/2012-11-16-idisposable.html帖子为例。

存储代码sn-ps

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

让我们将idisposable/TryFinallyDispose.cs.html_includes/code-snippets 复制到_posts/_code 或任何你想要的。

由于代码存储在带下划线的文件夹 (_code) 中,Jekyll 不会按原样处理它。我们只会将其“包含”在我们的帖子中。

注意:代码sn-p可以保存为code.cs

由于我们将使用 Jekyll 依赖项中的 highligting(见下文),我们只需修改代码 sn-p,删除 &lt;pre&gt;&lt;code&gt;

变成了:

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

显示代码

Jekyll 提供了多种高亮代码的方法(markdownpygmentsrouge、..)。这里我演示了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.htmlcode-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" %}

结果

更好的内容结构和突出显示的代码!

【讨论】:

  • 非常详细的答案。我还没有使用内置的语法荧光笔,但是您回答的总体思路对我帮助很大。谢谢!
  • 阿尔斯图布利夫特!无论如何,我喜欢这个 css 可以为你的代码 sn-ps 增添趣味:gist.githubusercontent.com/nicolashery/5765395/raw/…
【解决方案2】:

你可以这样include code

~~~
{% include snippets/MyPost/MySnippet.cs %}
~~~

【讨论】:

  • 我实际上更喜欢在我的博客中使用 HTML,因为它可以让我更好地控制。而我想使用单独的 code-sn-p.html 的原因不仅仅是因为&lt;pre&gt;&lt;code&gt;,还因为我想稍后自动转义&lt; &gt; &amp;。目前,sn-ps 是手动转义的。
  • 首先,因为 GitHub Pages 使用 Jekyll。而且因为它是一个非常好的静态网站生成器(尤其是对于博客),无论您使用的是 HTML 还是 Markdown。
  • 如何(静态)包含在 HTML 中?您如何自动为博客文章、RSS 提要、HTML 中下一篇/上一篇文章的链接生成概览页面?您如何在 HTML 中进行布局(每个页面和帖子使用的)?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-11-23
  • 2016-11-19
  • 1970-01-01
  • 2017-08-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多