如何為 Suka 自訂 CSS ?

栏目: CSS · 发布时间: 5年前

内容简介:一般在修改 Theme 時,都會去修改其 Source Code,但也因為去修改了 Source Code,導致日後無法再更新 Theme;Suka 為此保留了彈性,允許在不修改 Source Code 前提下,在Hexo 3.8.0Suka 1.3.2.1

一般在修改 Theme 時,都會去修改其 Source Code,但也因為去修改了 Source Code,導致日後無法再更新 Theme;Suka 為此保留了彈性,允許在不修改 Source Code 前提下,在 <header><footer> 加上自己的 CSS 或 ECMAScript,讓我們以 非侵入式 修改 Theme,保留日後更新 Theme 空間。

Version

Hexo 3.8.0

Suka 1.3.2.1

Suka

如何為 Suka 自訂 CSS ?

Suka 預設的版型,在 desktop 的左右留有較多的空白,在 iPhone 與 iPad 則適中,所以想要調整其 CSS。

如何為 Suka 自訂 CSS ?

根據 developer tool 觀察,關鍵在於 main-container class,其 max-width41.2rem 短了些,且其定義在 style.min.css

當然可以暴力去改 style.min.css ,但此為 Suka 的一部分,一旦修改了,就喪失了日後更新 Suka 的可能,就類似你直接去修改 framework 或 package 的 source code,日後就無法再更新了。

比較好的方式是使用 非侵入性 去修改既有 CSS。

Add Custom CSS

在 Suka 文件中的 Add custom code 提到允許我們在 <head><footer> 增加自己的 code,以 YAML 格式檔案放在 source 目錄,如此我們就能在不修改 Suka 既有的 style.min.css 下,改變 Suka 的視覺外觀。

my-style.css

@media screen and (min-width: 961px) {
  .main-container {
      max-width: 50.2rem;
  }
}

source 目錄下新增 assets 目錄,並建立 my-style.css

main-containermax-width 修改成 50.2rem

由於 my-style.css 是建立在 source 目錄下,而非 themes/suka 目錄下,因此不會影響日後使用 git pull 更新 Suka

如何為 Suka 自訂 CSS ?

head.yml

myStyle:
  - '<link rel="stylesheet" href="/assets/my-style.css">'

source 目錄下新增 _data 目錄,並建立 head.yml

第 1 行

myStyle:

Script 名稱,可自行定義。

第 2 行

- '<link rel="stylesheet" href="/assets/my-style.css">'

要插入的 HTML,必須以 '' 框起來。

如何為 Suka 自訂 CSS ?

由於 head.yml 是建立在 source 目錄下,而非 themes/suka 目錄下,因此不會影響日後使用 git pull 更新 Suka

如何為 Suka 自訂 CSS ?

main-container class 的 max-width 改成 50.2rem ,且明確來自 my-style.css

Conclusion

  • 雖然直接更改 CSS 或 ECMAScript 並不難,但只要一修改就喪失日後更新 theme 的可能,建議使用 CSS selector 以遙控方式,非侵入式修改 theme

Reference

Suka , Add custom code


以上所述就是小编给大家介绍的《如何為 Suka 自訂 CSS ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Haskell趣学指南

Haskell趣学指南

[斯洛文尼亚] Miran Lipovaca / 李亚舟、宋方睿 / 人民邮电出版社 / 2014-1

《haskell趣学指南》是一本讲解haskell这门函数式编程语言的入门指南,语言通俗易懂,插图生动幽默,示例短小清晰,结构安排合理。书中从haskell的基础知识讲起,涵盖了所有的基本概念和语法,内容涉及基本语法、递归、类型和类型类、函子、applicative 函子、monad、zipper及所有haskell重要特性和强大功能。 《haskell趣学指南》适合对函数式编程及haske......一起来看看 《Haskell趣学指南》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码