如何為 Akina 修改 CSS ?

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

内容简介:雖然可以使用Hexo 3.8.0Akina 1.0.0

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

Version

Hexo 3.8.0

Akina 1.0.0

Margin Issue

如何為 Akina 修改 CSS ?

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

如何為 Akina 修改 CSS ?

根據 developer tool 觀察,關鍵在於 main-container class,其 max-width41.2rem 短了些,且其定義在 style.min.css

要修改 CSS,有兩種方式:

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

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

Gulp

$ yarn global add gulp-cli

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

如何為 Akina 修改 CSS ?

CSS

style.css

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

themes/akina/src/css/style.css 的 319 行 的 max-width ,改成 50.2rem

如何為 Akina 修改 CSS ?

Minify CSS

$ gulp

themes/akina 目錄下輸入 gulp ,對 CSS 與 ECMAScript 進行壓縮。

如何為 Akina 修改 CSS ?

如何為 Akina 修改 CSS ?

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

Conclusion

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

Reference

Suka , 開發指南


以上所述就是小编给大家介绍的《如何為 Akina 修改 CSS ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

并行计算导论

并行计算导论

Ananth Grama、George Karypis、张武、毛国勇、Anshul Gupta、Vipin Kumar、程海英 / 张武、毛国勇、程海英 / 机械工业出版社 / 2005-1-1 / 49.00元

《并行计算导论》(原书第2版)全面介绍并行计算的各个方面,包括体系结构、编程范例、算法与应用和标准等,涉及并行计算的新技术,也覆盖了较传统的算法,如排序、搜索、图和动态编程等。《并行计算导论》(原书第2版)尽可能采用与底层平台无关的体系结构并且针对抽象模型来设计处落地。书中选择MPI、POSIX线程和OpenMP作为编程模型,并在不同例子中反映了并行计算的不断变化的应用组合。一起来看看 《并行计算导论》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具