Two column Jekyll layout, separated by tags?

问题

I'm currently working on a Jekyll blog at the moment, and I'd like to put my markdown files in this format:

<div class="row">
    <div class="col-md-6">

    </div>
    <div class="col-md-6">

    </div>
</div>

I want my code blocks in one column and everything else (text, headers, etc.) in the other column so that I have side-by-side explanations of my code.

Is there any way to do this? It seems Markdown and the Liquid templating engine is very restrictive in this regard.

Thanks!

回答1:

You can get desired result by combining Twitter Bootstrap with templating engine:

<div class="row">
    <div class="col-md-6">
        {{ include-code-blocks }}
    </div>
    <div class="col-md-6">
        {{ include-texts }}
        {{ include-headers }}
        {{ include-what-you-want }}
    </div>
</div>

or you write them inline by enabling markdown processing inside html blocks:

# Apply this change to _config.yml file
kramdown:
  # parse markdown inside block-level HTML tag
  parse_block_html: true

And use this in markdown files:

<div class="row">
    <div class="col-md-6">
        **some code block here**
        **another code block here**
    </div>
    <div class="col-md-6">
        **some text here**
        ##some header here
        ###something else here
    </div>
</div>

Info about markdown syntax: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet Info about Jekyll's markdown processor: http://kramdown.gettalong.org/documentation.html

回答2:

If I understand, you want to take side by side, liquid/jekyll code and resulting code. You are using twitter bootstrap as css framework.

In order to instruct kramdown to parse markdown in html block tags, in _config.yml, add :

kramdown:
  # use Github Flavored Markdown
  input: GFM
  # do not replace newlines by <br>s
  hard_wrap: false
  # parse markdown inside block-level HTML tag
  parse_block_html: true

In marwdown files, you can now use the {% raw %}{% endraw %} tag to instruct liquid not to parse, but to print code 'as is'.

<div class="row">
<div class="col-md-6">
``` liquid
{% raw %}
{% if page.title == 'About' %}
page.title = {{ page.title }}
{% endif %}
{% endraw %}
```
</div>
<div class="col-md-6">
{% if page.title == 'About' %}
page.title = {{ page.title }}
{% endif %}
</div>
</div>

Note: There is no indentation. it's because a four space indentation is considered as a code block by kramdown. It wraps you code in code tag. Not cool.

回答3:

The answer is YES. This is very simple. Add float:left to paragraphs and code blocks. Use clear:left on p's. Make sure there is enough space for two elements next to each other. Add overflow:auto to the container. Like this: http://codepen.io/anon/pen/grqRPr.

Your Markdown file (index.md):

---
layout: default
---

paragraph goes here

```` code goes here ````

paragraph goes here

```` code goes here ````

Your CSS file (style.css):

p, pre {float: left; width: 50%;}
.container {width: 100%;}
p {clear: left;}

Your layout file (default.html):

<html>
<head>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">{{ content }}</div>
</body>
</html>

来源：https://stackoverflow.com/questions/37079595/two-column-jekyll-layout-separated-by-tags

标签

ruby

twitter-bootstrap

Jekyll

liquid