内容简介：雖然可以使用Hexo 3.8.0
雖然可以使用 非侵入式 客製化 Suka 的 CSS，但若真的想從 Theme 的 CSS Source Code 下手一勞永逸，則必須搭配 Gulp。
Version
Hexo 3.8.0
Margin Issue
Suka 預設的版型，在 desktop 的左右留有較多的空白，在 iPhone 與 iPad 則適中，所以想要調整其 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。
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 。
Minify CSS
$ gulp
在 themes/suka 目錄下輸入 gulp ，對 CSS 與 ECMAScript 進行壓縮。
main-container class 的 max-width 改成 50.2rem ，且明確來自 style.min.css 。
Conclusion
- 直接修改的優點是經過壓縮，缺點是日後無法更新 theme
Reference
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 不修改模板的前提下修改VisualState中的某些值
- 修改Git已提交的的Author和EMail（批量修改脚本）
- ViewGroup 默认顺序绘制子 View，如何修改？什么场景需要修改绘制顺序？
- Per.js 史上最大修改版本，2.1 版本更新，修改 5 项功能
- 通过修改环境变量修改当前进程使用的系统 Temp 文件夹的路径
- Linux下修改时区
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
技术之瞳——阿里巴巴技术笔试心得
阿里巴巴集团校园招聘笔试项目组 / 电子工业出版社 / 2016-11 / 69
《技术之瞳——阿里巴巴技术笔试心得》由阿里巴巴集团校园招聘笔试项目组所著，收集了阿里历年校招中的精华笔试题，涉 及多个领域。《技术之瞳——阿里巴巴技术笔试心得》中内容大量结合了阿里巴巴的实际工作场景，以例题、解析、习题的形式，引 导读者深入理解技术上的关键点、紧要处，夯实基础，启发思考。《技术之瞳——阿里巴巴技术笔试心得》内容不仅专业、有趣，更 是将理论知识与实践应用结合起来，以场景化的问答娓娓道......一起来看看 《技术之瞳——阿里巴巴技术笔试心得》 这本书的介绍吧!
