如何為 Suka 自訂 CSS ?

栏目: CSS · 发布时间: 7年前

内容简介：一般在修改 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 自訂 CSS ?

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

如何為 Suka 自訂 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

如何為 Suka 自訂 CSS ?

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，必須以 '' 框起來。

如何為 Suka 自訂 CSS ?

由於 head.yml 是建立在 source 目錄下，而非 themes/suka 目錄下，因此不會影響日後使用 git pull 更新 Suka

如何為 Suka 自訂 CSS ?

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

Conclusion

雖然直接更改 CSS 或 ECMAScript 並不難，但只要一修改就喪失日後更新 theme 的可能，建議使用 CSS selector 以遙控方式，非侵入式修改 theme

Reference

Suka , Add custom code

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

查看所有标签

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

码农书籍

大数据系统构建

Nathan Marz、James Warren / 马延辉、向磊、魏东琦 / 机械工业出版社 / 2017-1 / 79.00

随着社交网络、网络分析和智能型电子商务的兴起，传统的数据库系统显然已无法满足海量数据的管理需求。作为一种新的处理模式，大数据系统应运而生，它使用多台机器并行工作，能够对海量数据进行存储、处理、分析，进而帮助用户从中提取对优化流程、实现高增长率的有用信息，做更为精准有效的决策。但不可忽略的是，它也引入了大多数开发者并不熟悉的、困扰传统架构的复杂性问题。本书将教你充分利用集群硬件优势的La......一起来看看《大数据系统构建》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换

在线XML、JSON转换工具