如何為 Suka 修改 CSS ?

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

内容简介：雖然可以使用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 , 開發指南

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

查看所有标签

猜你喜欢:

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

码农书籍

Writing Windows VxDs and Device Drivers, Second Edition

Karen Hazzah / CMP / 1996-01-12 / USD 54.95

Software developer and author Karen Hazzah expands her original treatise on device drivers in the second edition of "Writing Windows VxDs and Device Drivers." The book and companion disk include the a......一起来看看《Writing Windows VxDs and Device Drivers, Second Edition》这本书的介绍吧!

码农工具

随机密码生成器

多种字符组合密码

URL 编码/解码

HEX HSV 转换工具

HEX HSV 互换工具