Markdown table自动修剪溢出

Jekyll网页中，使用Markdown table会产生一个问题：当table超过一定宽度， 会在手机端或窄屏产生整个网页的横向滚动条，打破了整体页面布局。

解决办法：在Markdown table外围加一层div,然后写相应的CSS,实现table父节点自动修剪溢出并显示滚动条。

注意：div与table之间需要有空行

Markdown

<div class="table-wrapper" markdown="block">

Title 1 | Title 2 | Title 3
--- | --- | --- 
lorem | lorem ipsum | lorem ipsum dolor 
lorem ipsum dolor sit amet | lorem ipsum dolor sit amet consectetur | lorem ipsum dolor sit amet 
lorem ipsum dolor | lorem ipsum | lorem 
lorem ipsum dolor | lorem ipsum dolor sit | lorem ipsum dolor sit amet 

</div>  

CSS

.table-wrapper {
  overflow-x: auto;
}

多肉植物的学名

目前所种植多肉植物的学名、科、属、原生地或杂交血统

压缩Jekyll网站的HTML

Jekyll网站的页面中存在很多空行，这是Liquid逻辑代码和Markdown换行本来占据的位置。

其实要压缩Jekyll中的HTML不需要运行插件，使用Liquid就可以简单做到。

首先下载compress.html文件(在标题Installation下面)

然后compress.html放进站点的_layout文件夹里面。

最后在_layout文件夹打开default.html(所有页面使用的顶级布局),在头部添加以下代码：

---
layout: compress
---

Websites promote you 24/7

Websites promote you 24/7, No employee will do that!

译：网站全天候宣传你，没有员工会这样做！

水平垂直居中

水平垂直居中

flex居中

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}