内容简介：一般在修改 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 預設的版型，在 desktop 的左右留有較多的空白，在 iPhone 與 iPad 則適中，所以想要調整其 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
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，必須以 '' 框起來。
由於 head.yml 是建立在 source 目錄下，而非 themes/suka 目錄下，因此不會影響日後使用 git pull 更新 Suka
main-container class 的 max-width 改成 50.2rem ，且明確來自 my-style.css 。
Conclusion
- 雖然直接更改 CSS 或 ECMAScript 並不難，但只要一修改就喪失日後更新 theme 的可能，建議使用 CSS selector 以遙控方式，非侵入式修改 theme
Reference
以上所述就是小编给大家介绍的《如何為 Suka 自訂 CSS ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
