Jekyll，在HTML中包含markdown和布局 [英] Jekyll, include markdown with layout in html

问题描述

我有一个由几个幻灯片组成的网站。每个都有一个固定的结构，由一些脚本使用，但内容可变。我正在github上托管它，现在我正在尝试使用Jekyll来更轻松地添加新幻灯片。

I have a website that consists out of a few 'slides'. Each has a fixed structure, used by some scripts, but variable content. I'm hosting it on github and am now trying to use Jekyll to make it easier to add new slides.

我已经将每个幻灯片放在不同的html文件中，我在主页面中包含： {％include_relative _slides / about.html％} 。现在我正在尝试将其设为markdown文件，我想使用前面的内容来制作每个幻灯片文件可以使用的布局。我可以包含一个markdown文件，并通过执行以下操作来渲染：

I already have each slide in a different html file, which I include in the main page: {% include_relative _slides/about.html %}. Now I'm trying to make it a markdown file, and I wanted to use front matter to make a layout that each slide's file could use. I can include a markdown file, and get it to render by doing:

{% capture myInclude %}{% include_relative _slides/test.md %}{% endcapture %}
{{ myInclude | markdownify }}

但是，我在其中添加了一个前面的物质块并在其中定义了布局，布局没有得到应用。它只是呈现为水平线（对于第一个---）然后布局：幻灯片标题：测试幻灯片 - 以纯文本形式呈现。

However, when I add a front-matter block to it with a layout defined in it, the layout doesn't get applied. It just gets rendered as a horizontal line (for the first ---) and then "layout: slide title: Test Slide —" in plain text.

有没有解决这个问题的方法？或者也许更好的方法来分解我的index.html及其中的幻灯片？

Is there any way to fix this? Or perhaps a better way to break up my index.html and the slides in it?

非常感谢！

注意：对不起，如果之前有人询问，我用Google搜索我能想象的所有内容。

Note: Sorry if this was asked before, I Googled everything I could imagine it would be called.

推荐答案

我发现了一些东西这对我行得通。我将模板分为两部分，内容部分以及部分部分。然后在我包含的文件中，有两个包括ass，一个在顶部，一个在底部。

I found something that works for me. I divided my template in 2 parts, the part above the content, and the part under it. Then in the file I include, there are two includes ass well, one at the top and one at the bottom.

所以我的'slide'文件看起来像这样： / p>

So my 'slide' files look like this:

{% include slide_start.html title="About" image="images/about.jpg" %}

... the content of the slide ...

{% include slide_end.html %}

正如您所看到的，在第一个包含我提供的参数中，这些参数将被填写并可以使用液体标签进行访问 {{include.something}} 。

As you can see, in the first include I give some parameters, these will be filled in and can be accessed with the liquid tags {{ include.something }}.

我的slide_start.html如下所示：

My slide_start.html looks like:

<div class="slide">
    <div class="header">
        <span>{{ include.title }}</span><!-- no whitespace
     --><img src="{{ include.image }}" alt="{{ include.title }}"/>
    </div>

    <div class="content" markdown="1">

slide_end.html只是两个结束div标签。

the slide_end.html is just two closing div tags.

这篇关于Jekyll，在HTML中包含markdown和布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！