如何為 Suka 自訂 CSS ?

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

内容简介：一般在修改 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-width 的 41.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-container 的 max-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 ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

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

码农书籍

Data Structures and Algorithm Analysis in Java

Mark A. Weiss / Pearson / 2006-3-3 / USD 143.00

As the speed and power of computers increases, so does the need for effective programming and algorithm analysis. By approaching these skills in tandem, Mark Allen Weiss teaches readers to develop wel......一起来看看《Data Structures and Algorithm Analysis in Java》这本书的介绍吧!

码农工具

XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具

HEX CMYK 互转工具