Multi-row blog list in Jekyll

Question

I want to use Jekyll & Bootstrap 3 to present my blog posts in a listing that looks like this:

Answer 1

These are actually two questions.

Number one: How to display two posts in each row with Jekyll/Liquid?

I answered two similar questions yesterday:

• For loop, wrap every two posts in a div
  (one solution for a fixed number of posts - like the last 10 posts in groups of two on the front page - and one solution for an infinite number of posts)
• Jekyll automatically processing rows
  (another solution with an infinite number of posts, but with four posts per group and with a detailed step-by-step explanation)

Number two: How to achieve a design similar to the one in your screenshot in Bootstrap?

Bootstrap has a page with example designs that you can steal. Especially these two:

• Jumbotron
• Narrow jumbotron

Look at the source code of the example pages - basically, you just have to wrap the posts in a few

s with the right classes.

For example, this is the source code for the three blocks in the Jumbotron example

  

    
Heading
    
blah
  
  

    
Heading
    
blah
 
  

    
Heading
    
blah
  

You just need to modify the code examples from my other answers (linked above) so that they generate a similar combination of

s.

Plus, you may want to read about Bootstrap's grid system to get the columns right (e.g. the class col-md-4 in the example code above varies depending on the number of columns you want).

---

Finally, a real-world example: My blog has a similar listing on the front page.
This is a fixed number of posts (the last nine, three rows of three), so I'm using the first approach from this answer.
The source code of the front page is here.
Note that I'm still on Bootstrap 2 (not 3), so you can't just copy and paste the CSS classes from my source code!

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...