Hexo icarus theme變更頁面欄位寬度

環境

item	version
hexo	6.2.0
hexo-theme-icarus	5.1.0

修改layout欄位寬度

如要改變頁面的寬度，編輯<icarus_directory>/include/style/responsive.styl這個樣式文件。此文件定義了不同屏幕尺寸下的頁面容器寬度。

**// <icarus_directory>/include/style/responsive.styl**

/* ---------------------------------
 *         Responsive Layout
 * --------------------------------- */
+widescreen()
    .is-1-column .container, .is-2-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap

+fullhd()
    .is-2-column .container
        max-width: $widescreen - 2 * $gap
        width: $widescreen - 2 * $gap

    .is-1-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap

+tablet()
    .is-sticky
        position: -webkit-sticky
        position: sticky
        top: 1.5rem
        z-index: 99

    .column-main, .column-left, .column-right, .column-right-shadow
        &.is-sticky
            top: .75rem
            align-self: flex-start

+mobile()
    .section
        padding: 1.5rem 1rem

假設要使寬螢幕(widescreen)環境下主內容欄更寬，可編輯<icarus_directory>/layout/layout.jsx。

<div class={classname({
     column: true,
     'order-2': true,
     'column-main': true,
     'is-12': columnCount === 1,
-    'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+    'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
     'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3

如要改變widgets寬度，編輯<icarus_directory>/layout/common/widgets.jsx。

function getColumnSizeClass(columnCount) {
     switch (columnCount) {
         case 2:
-            return 'is-4-tablet is-4-desktop is-4-widescreen';
+            return 'is-4-tablet is-4-desktop is-3-widescreen';
         case 3:
             return 'is-4-tablet is-4-desktop is-3-widescreen';

注意

主內容欄(layout.jsx)和widgets欄(widgets.jsx)中的數字，在相同屏幕尺寸下相加必須等於12。
如上面例子，layout.jsx中設定is-9-widescreen，在widgets.jsx中widescreen設定需設定為is-3-widescreen。 (9+3=12)