html - Jekyll 使用 HTML 发帖

Question

有人可以就如何使用 Jekyll 处理我的投资组合页面的结构提供一些指导或建议吗？我的帖子通过混合变量和帖子内容来处理大部分工作。我在呈现帖子页面时遇到问题，因为 HTML 和 markdown 标记一起变得卡顿了。

基本上，我想使用变量来自动跨页面提取内容和信息。即主页功能标题、ID、主页图像和个人投资组合页面由 {{ content }} 之间的所有内容驱动。当我尝试解决帖子中的布局时，这就是事情分崩离析的地方。正如您可以通过带有 CSS 选择器的预期 HTML 看到的那样，我正在尝试做一个“独特”的布局，这不太像博客(内容和图像在页面下方运行)，而是使用 Neat&Bourbon 来处理我的图像 block 和标题 block 。

有没有一种有效的方法来做到这一点？

        ---
    category: Pitch
    featured: false
    publish: true
    layout: project
    type: website redesign

    id: "basil-haydens"

    role: "art direction, design"
    client: "Basil Hayden's"
    title: "Basil Hayden's"
    description: "A site built for true whiskey connoisseurs"

    summary: "Basil Hayden's, Whiskey. Among other things is a site geared toward true whiskey afficianados. With content curated by Max Wastler, the site features lifestyle content paired with recipes and traditional liquor site content making it a unique destination for whiskey connoissers."

    homeimage: hero.png
    images:
        - img-2.jpg
        - img-3.jpg
    backgroundColor: "RGB(226, 122, 15)" 
    accentColor: "#333"
    ---
    <section class="content">
    <div class="aside">
    ###### Credit
    - Designed at UnitOneNine.
    - Art Direction *Design–Amit Patel*
    - Walton Issacson
    </div>
    <div class="overview">
    <h6> Project Overview </h6>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
    </div>
    </section>
    <section class="content--images-three">
    <h6>Homepage</h6>
    <div class="span-6-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-1.jpg)
    </div>
    <div class="span-3-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-2.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/intro-3.jpg)
    </div>
    </section>
    <section class="content--images-six">
    ######Final Designs
    ![My helpful screenshot](/images/{{ page.id }}/1.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/2.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/3.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/4.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/5.jpg)
    </section>
    <section class="content--images-three">
    <div class="span-6-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-1.jpg)
    </div>
    <div class="span-3-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-2.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/intro-3.jpg)
    </div>
    </section>
    <section>
    <div class="span-8-12">
    ![My helpful screenshot](/images/{{ page.id }}/cocktail-club.jpg)
    </div>
    ###### Old Fashioneds before they were cool
    The crux of any liquor site, the recipes. Since curation was key, a basic recipe layout and design was used to account for varying assets and editability in Expression Engine.
    </section>

Answer 1

我不太明白你的问题，但我相信你的问题是在 html 中呈现 Markdown 。

在您的 _config.yml 文件中，设置:

markdown: kramdown

kramdown:
  parse_block_html: true
  parse_span_html: true