内容简介：一般在修改 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 ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
100个可操作的网络赚钱方法
陶秋丰 / 云南科技 / 2009-12 / 29.80元
《100个可操作的网络赚钱方法》专为有志于网上创业的读者量身打造，作者是“实战型”的网赚高手，在17岁时就通过互联网创业“年人10万”，如今结合自身的亲身实战经验，与大家分享可以实实在在盈利的100个网络赚钱方法和技巧。内容包括：网站创建与推广、竞价广告、联盟赚钱、网站SEO优化、域名投资、广告投放盈利、威客、博客、淘客赚钱等多个方面。 本手册中作者结合自身的网络赚钱经历，通过具体的、可操作......一起来看看 《100个可操作的网络赚钱方法》 这本书的介绍吧!
