客製 Jekyll 的 minima 主题 style

使用 GitHub Page 建立自己的网页时， Jekyll 的 minima 是个很好的入门选择，因为 GitHub Page 预设的使用的 static generator ，而 minima 也是 Jekyll 预设的主题，所以 minima 常常会是开发者第一个接触到的 Jekyll 主题，并且它小而全的特性使得修改可以很轻鬆，这篇会介绍要怎么修改 minima 主题的样式。

Jekyll 主题种类区别

Jekyll 的主题大致分为两种

regular theme: 所有的档案包括样式配置及网页内容(markdown)的档案都在资料夹中gem-based theme: 只有网页内容(markdown)的档案，样式配置档案由 gem 上在建置的时候抓取

minima 是属于 gem-based 的主题。

找到 minima 主题的档案

如果是 regular theme ，直接打开样式表编辑即可，但因 minima 是 gem-based theme ，所以档案会存在 gem 中，这时就需要找出样式表的内容。

从 gem 上抓取

gem 是 ruby 的套件管理工具，跟 node 的 npm 相似。

找到主题的档案位置

由于 minima 是个 ruby 套件，可以使用 bundle 指令找到其位置：

bundle info --path minima # /usr/local/bundle/gems/minima-2.5.1

找出位置后就可以将样式表给複製出来。

从 GitHub 上直接抓取

也可以从 jekyll/minima 的 GitHub 库抓取。

从 GitHub 上抓取须要注意版本的差异。

覆写样式

在 minima 中 assets/main.scss 这个档案是所有样式表的入口，修改这个档案就可以覆写样式。

// main.scss---# Only the main Sass file needs front matter (the dashes are enough)---@import "minima";@font-face {  font-family: 'jf-openhuninn';  src: url('jf-openhuninn-1.0.ttf') format('truetype');}body {  font-family: jf-openhuninn, $base-font-family;}

在 @import "minima"; 之后的样式会覆写原本的样式，而如果要修改 _saas/minima.scss 中的变数的话，要写在 @import 之前。

// main.scss---# Only the main Sass file needs front matter (the dashes are enough)---$base-font-family: jf-openhuninn;@import "minima";@font-face {  font-family: 'jf-openhuninn';  src: url('jf-openhuninn-1.0.ttf') format('truetype');}

结论

最近 open 粉圆字型推出，想说换一下部落格预设的字型来支持一下，顺便学习如何客製 Jekyll 的主题。

如果想要看此文範例程式的可以到 peterhpchen.github.io 看喔。

参考资料

GitHub: jekyll/minimaJekyll DOCS: themesthoughtbot: A Sass !default use case

同步发表于 LimitlessPing