客製化樣式

客製化樣式
Categories:
Tags:

客製化 HTML

在專案加入下列兩個檔案可以分別客製化 Header 及 Footer 的 HTML 元素

  • Header: layouts/partials/head/custom.html
  • Footer: layouts/partials/footer/custom.html

客製化 CSS

在專案加入 assets/scss/custom.scss 檔案可以客製化 Stack 的主題 CSS

/* assets/scss/custom.scss */
:root {

    // 背景顏色
    --body-background: #E9F1F2;
    // 文字顏色
    --body-text-color: #3E4259;
}

詳細可修改的變數參考 Stack CSS Variables，若想要查詢更多文件上沒有寫的樣式，可以直接至主題目錄下找到 themes/hugo-theme-stack/assets/scss/variables.scss 檔案參考

更多客製化 CSS

整個 Stack 主題的 CSS 使用 SCSS 去做編譯，SCSS 的進入點是 themes/hugo-theme-stack/assets/scss/style.scss 檔案，可以看到檔案的載入編譯結構如下

可以看到最下方有匯入上方客製化的檔案 @import "custom.scss";，這裡指的就是 assets/scss/custom.scss 檔案

若想要修改更多客製化的話可以參考這個檔案結構去進行修改

/* themes/hugo-theme-stack/assets/scss/style.scss */
@import "breakpoints.scss";
@import "variables.scss";
@import "grid.scss";

@import "external/normalize.scss";

@import "partials/menu.scss";
@import "partials/article.scss";
@import "partials/widgets.scss";
@import "partials/footer.scss";
@import "partials/pagination.scss";
@import "partials/sidebar.scss";
@import "partials/base.scss";
@import "partials/layout/archives.scss";
@import "partials/layout/article.scss";
@import "partials/layout/list.scss";
@import "partials/layout/404.scss";
@import "partials/layout/search.scss";

@import "custom.scss";

a {
    text-decoration: none;
    color: var(--accent-color);

    &:hover {
        color: var(--accent-color-darker);
    }

    &.link {
        box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0px -10px 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
        }
    }
}

.section-title {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 10px;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--body-text-color);

    a {
        color: var(--body-text-color);
    }
}

參考資料