如何為 Suka 修改 CSS ?

栏目: Node.js · 发布时间: 5年前

内容简介：雖然可以使用Hexo 3.8.0

雖然可以使用 非侵入式 客製化 Suka 的 CSS，但若真的想從 Theme 的 CSS Source Code 下手一勞永逸，則必須搭配 Gulp。

Version

Hexo 3.8.0

Margin Issue

如何為 Suka 修改 CSS ?

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

如何為 Suka 修改 CSS ?

根據 developer tool 觀察，關鍵在於 main-container class，其 max-width 的 41.2rem 短了些，且其定義在 style.min.css 。

要修改 CSS，有兩種方式：

在 <head> 掛入 my-style.css ，蓋掉原本的 CSS
直接修改 suka/src/css/style.css ，然後使用 Gulp 壓成 style.min.css

兩種修改方式各有其優缺點，本文討論第 2 種方式。

Gulp

$ yarn global add gulp-cli

Suka 會透過 Gulp 將 style.css 壓成 style.min.css ，因此要先安裝 Gulp。

如何為 Suka 修改 CSS ?

CSS

style.css

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

將 themes/suka/src/css/style.css 的 319 行的 max-width ，改成 50.2rem 。

如何為 Suka 修改 CSS ?

Minify CSS

$ gulp

在 themes/suka 目錄下輸入 gulp ，對 CSS 與 ECMAScript 進行壓縮。

如何為 Suka 修改 CSS ?

main-container class 的 max-width 改成 50.2rem ，且明確來自 style.min.css 。

Conclusion

直接修改的優點是經過壓縮，缺點是日後無法更新 theme

Reference

Suka , 開發指南

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

Beginning Java Objects中文版从概念到代码

巴克 / 万波 / 人民邮电出版社 / 2007-1 / 78.00元

《Beginning Java Objects中文版从概念到代码(第2版)》是关于软件对象和Java的，但并不是纯粹地介绍Java语言，而是强调如何从对象模型转换到功能完整的Java应用程序。书中讲述了对象基础、对象建模和模型的实现。《Beginning Java Objects中文版从概念到代码(第2版)》除了用学生注册系统(SRS)示例贯穿全书之外，还在附录中给出三个附加的案例，这些案例是每章......一起来看看《Beginning Java Objects中文版从概念到代码》这本书的介绍吧!

码农工具