码匠笔记

用心雕琢

修复 Octopress Table 样式

访问

起因

Octopress 自带的 Table 样式太丑了,于是自己自定义一个,方法非常简单,操作如下。

效果

key value1 value2
a apple aardvark
b banana bonobo
c clementine cat

源码如下:

1
2
3
4
5
key | value1 | value2
----|--------|----------
a   | apple  | aardvark
b   | banana | bonobo
c   | clementine | cat

编码

在 sass/custom 目录创建 _better_tables.scss,填写如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// make the text for the header row bold and centered.
// (I have not been able to figure out where jekyll/octopress are overriding
//  the text-align and setting it to `left`)
.entry-content th { font-weight: bold; text-align: center }

// typography for p/blockquote/ul/ol puts a 1.5em margin below those elements,
// so do the same for our tables ...
.entry-content table { margin-bottom: 1.5em }

// ... but undo that for tables for pygments-generated code
.entry-content .code table { margin-bottom: inherit }


// add a border around each cell and padding around its content ...
.entry-content th, .entry-content td {
  border: 1px solid #ddd;
  padding: 6px 13px;
}

// ... but undo that for tables for pygments-generated code
.entry-content .code th, .entry-content .code td {
  border: inherit; padding: inherit;
}


// zebra-stripe the rows (N.B. `nth-child(2n)` works too) ...
.entry-content tr                 { background-color: #FFFFFF }
.entry-content tr:nth-child(even) { background-color: #F8F8F8 }

// ... but undo that for tables for pygments-generated code
.entry-content .code tr                 { background-color: inherit }
.entry-content .code tr:nth-child(even) { background-color: inherit }

entry-content 是为了限制这个样式只在博文中生效。
然后在 _styles.scss 文件中添加一行内容即可完成:

1
@import "better_tables"

参考文档

http://blog.pnkfx.org/blog/2015/12/18/fixing-octopress-table-rendering/

扩展阅读

  1. Commenthub —— 多说、网易云跟帖的替代品
  2. 给博客添加目录
  3. Octopress 添加 扩展相关阅读
  4. Octopress 添加标签云
  5. Octopress 首页添加‘更多’功能
  6. Octopress 博客搜索优化

作者

本文作者麻酱,欢迎讨论,指正和转载,转载请注明出处。
原文地址:修复 Octopress Table 样式
如果兴趣可以关注作者微信订阅号:码匠笔记
majiangbiji

评论