blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-09-02 19:52:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(assets): SCSS variables with hugo:vars and module setup standardization (#788)

Browse Source 
* feat(assets): refactor SCSS variables with Hugo config via hugo:vars

Use Hugo's hugo:vars mechanism (v0.161.0+) to configure SCSS variables
via [params.appearance] in hugo.toml, replacing the override.scss file.

- Add [params.appearance] config section in hugo.toml
- Create scss-vars.html partial for SCSS default values
- Pass vars to toCSS via head/index.html
- Rewrite _variables.scss to use @use "hugo:vars" as h with !default
- Update all 20 consumer files from @use "override" to @use "variables"
- Delete override.scss
- Add admonition mixin in core/mixins/_admonition.scss
- Update deprecation detection to use fileExists

* refactor(assets): standardize module setup() and simplify main.ts init

- Add setup() method to all modules (menu, theme, search, enc, misc, events)
- Rename initMenu to setup, initMenuDesktop/initMenuMobile to initDesktop/initMobile
- Rename initSearch, initFixItDecryptor to setup
- Standardize setup() position at end of each module class and interface
- Simplify main.ts init sequence to uniform setup() calls

* refactor(assets): replace config.template.scss with hugo:vars/internal

- Delete config.template.scss and its ExecuteAsTemplate pipeline
- Pass internal config (base URL, logo, loading) via hugo:vars/internal namespace
- Move CSS custom properties to _root.scss using set-fi-vars mixin
- Simplify _variables.scss by removing config namespace dependency
- Update CLAUDE.md to reflect new SCSS architecture

* style(i18n): fix spacing in Korean translation strings

* fix(assets): resolve dead SCSS config keys and deduplicate defaults

- Wire up 5 config keys with v.$ references: menu-active-color,
  tag-cloud-start, tag-cloud-end, tag-cloud-end-dark,
  pagination-link-color-dark (were reading from SCSS vars, ignoring
  hugo:vars overrides)
- Remove dead !default flags from all v.$ references (hugo:vars
  always provides values, making !default unreachable)
- Compute derived defaults in scss-vars.html from base values instead
  of hardcoding duplicates
- Extract admonition mixin set-fi-vars map to shared $vars variable
This commit is contained in:
Cell
2026-06-22 02:43:35 +08:00
committed by GitHub
parent 6f83bc6da5
commit 17d7bc1781
40 changed files with 357 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+1 -1
View File
@@ -90,7 +90,7 @@ Cross-module communication uses the shared `eventBus` singleton, not direct modu
Hugo Pipes processes all assets. The key orchestration is in `_partials/base/assets.html`:
- **CSS**: `scss/config.template.scss` generates runtime CSS custom properties from Hugo config. `scss/main.scss` is the entry point importing `core/`, `pages/`, `widgets/`, `custom`.
- **CSS**: `scss/main.scss` is the entry point importing `core/`, `pages/`, `widgets/`, `custom`. SCSS variables are configured via `hugo:vars` (user-configurable from `[params.appearance]`) and `hugo:vars/internal` (theme system config).
- **JS**: `_partials/function/js-build.html` wraps `js.Build` with minify-in-production defaults. Hugo's `@params` injection passes config values into TypeScript at build time.
- **Third-party libraries**: Stored in `assets/lib/` (vendored, not npm-managed). Tracked by `librarybot.yml` and updated weekly by the `hugo-fixit/librarybot` GitHub Action. Can be overridden via CDN config in `assets/data/cdn/jsdelivr.yml` or `unpkg.yml`.
assets/js/core/tokens.ts
+8 -3
View File
@@ -21,16 +21,19 @@ export interface ThemeService {
setThemeMode: (mode: string, persist?: boolean) => void
initThemeColor: () => void
initSwitchTheme: () => void
setup: () => void
}
// ─── MenuService ───
export interface MenuService {
initMenu: () => void
initDesktop: () => void
initMobile: () => void
setup: () => void
}
// ─── SearchService ───
export interface SearchService {
initSearch: () => void
setup: () => void
}
// ─── CodeService ───
@@ -50,7 +53,7 @@ export interface TocService {
// ─── EncryptionService ───
export interface EncryptionService {
initFixItDecryptor: () => void
setup: () => void
}
// ─── ContentService ───
@@ -69,6 +72,7 @@ export interface MiscService {
initReward: () => void
initPostChatUser: () => void
initComment: () => void
setup: () => void
}
// ─── EventsService ───
@@ -77,6 +81,7 @@ export interface EventsService {
onResize: () => void
onClickMask: () => void
initPrint: () => void
setup: () => void
}
// ─── FixItPublicAPI ───
assets/js/main.ts
+14 -17
View File
@@ -12,27 +12,24 @@ function bootstrap(): void {
// Build window.fixit facade with all modules
window.fixit = new PublicAPI()
/**
* Initialize all modules in dependency order.
*
* 1. UI framework — menu (mask overlay), theme (color scheme)
* 2. Interactive components — toc (sidebar), search (overlay)
* 3. Content enhancement — content (details, tooltips), enc (decryption)
* 4. Global features — misc (PWA, comments), events (scroll, resize)
*/
function init() {
try {
window.fixit.menu.setup()
window.fixit.theme.setup()
window.fixit.toc.setup()
window.fixit.search.setup()
window.fixit.content.setup()
window.fixit.enc.initFixItDecryptor()
window.fixit.theme.initThemeColor()
window.fixit.content.initSVGIcon()
window.fixit.menu.initMenu()
window.fixit.theme.initSwitchTheme()
window.fixit.search.initSearch()
window.fixit.misc.initSiteTime()
window.fixit.misc.initServiceWorker()
window.fixit.misc.initAutoMark()
window.fixit.misc.initReward()
window.fixit.misc.initPostChatUser()
window.fixit.misc.initComment()
window.fixit.content.initContent()
window.fixit.events.onScroll()
window.fixit.events.onResize()
window.fixit.events.onClickMask()
window.fixit.events.initPrint()
window.fixit.enc.setup()
window.fixit.misc.setup()
window.fixit.events.setup()
}
catch (err) {
console.error(err)
assets/js/modules/content.ts
+3 -2
View File
@@ -9,7 +9,7 @@ const copyText = createCopyText()
* Content module — details toggle, tooltips, footnotes, SVG icons, and link guard.
*
* Responsibilities:
* - Attach toggle behaviour to `<details>` elements.
* - Attach toggle behaviour to `.details` elements.
* - Initialize CellTooltip on action buttons, copy buttons, and footnotes.
* - Fetch and inline SVG icons from `data-svg-src` attributes.
* - Set up link guard dialog for external link confirmation.
@@ -111,7 +111,7 @@ export class ContentModule implements ContentService {
}
/**
* Attach toggle behaviour to `<details>` elements.
* Attach toggle behaviour to `.details` elements.
* @param target - The root element to search within.
*/
initDetails(target: Element | Document = document) {
@@ -185,6 +185,7 @@ export class ContentModule implements ContentService {
setup() {
this.initContent()
this.initSVGIcon()
eventBus.on('fixit:decrypted', () => {
this.initContent()
})
assets/js/modules/encryption.ts
+1 -1
View File
@@ -25,7 +25,7 @@ export class EncryptionModule implements EncryptionService {
}
/** Initialize the FixItDecryptor and wire up decryption/re-encryption events. */
initFixItDecryptor() {
setup() {
if (!this.core.config.encryption)
return
const decryptor = new window.FixItDecryptor()
assets/js/modules/events.ts
+8
View File
@@ -165,4 +165,12 @@ export class EventsModule implements EventsService {
this.code.initCodeTabs()
}, false)
}
/** Initialize all event listeners. */
setup() {
this.onScroll()
this.onResize()
this.onClickMask()
this.initPrint()
}
}
assets/js/modules/menu.ts
+10 -10
View File
@@ -4,28 +4,22 @@ import type { CoreService, MenuService } from '../core/tokens'
* Menu module — desktop dropdown and mobile drawer navigation.
*
* Responsibilities:
* - Initialize desktop header dropdown menu interactions.
* - Initialize mobile header drawer menu open/close/toggle.
* - Desktop header dropdown menu interactions.
* - Mobile header drawer menu open/close/toggle.
* - Sync menu state with mask overlay.
*/
export class MenuModule implements MenuService {
constructor(private readonly core: CoreService) {}
/** Initialize both desktop and mobile menus. */
initMenu() {
this.initMenuDesktop()
this.initMenuMobile()
}
/** Set min-width on desktop sub-menus to match parent item width. */
initMenuDesktop() {
initDesktop() {
document.querySelectorAll<HTMLElement>('.has-children').forEach(($item) => {
$item.querySelector<HTMLElement>('.sub-menu')!.style.minWidth = `${$item.offsetWidth - 8}px`
})
}
/** Initialize mobile drawer menu with mask overlay and nested toggles. */
initMenuMobile() {
initMobile() {
const $menuToggleMobile = document.getElementById('menu-toggle-mobile')
const $menuMobile = document.getElementById('menu-mobile')
if (!$menuToggleMobile || !$menuMobile)
@@ -54,4 +48,10 @@ export class MenuModule implements MenuService {
})
})
}
/** Initialize both desktop and mobile menus. */
setup() {
this.initDesktop()
this.initMobile()
}
}
assets/js/modules/misc.ts
+10
View File
@@ -140,4 +140,14 @@ export class MiscModule implements MiscService {
}
})
}
/** Initialize all miscellaneous features. */
setup() {
this.initSiteTime()
this.initServiceWorker()
this.initAutoMark()
this.initReward()
this.initPostChatUser()
this.initComment()
}
}
assets/js/modules/search/index.ts
+20 -20
View File
@@ -22,26 +22,6 @@ export class SearchModule implements SearchService {
constructor(private readonly core: CoreService) {}
/** Initialize the search overlay, autocomplete, and engine-specific logic. */
initSearch() {
const searchConfig = this.core.config.search
if (!searchConfig || !searchConfig.type)
return
// Initialize engine once
if (!this.#engine) {
this.#engine = this.#createEngine(searchConfig.type, searchConfig)
}
// Initialize dialog and autocomplete once
if (!this.#initialized) {
this.#initialized = true
this.#initAutosearch()
this.#initDialog()
this.#initKeyboardShortcuts()
}
}
/** Create the appropriate search engine based on type. */
#createEngine(type: string, searchConfig: SearchConfig): SearchEngine {
switch (type) {
@@ -258,4 +238,24 @@ export class SearchModule implements SearchService {
}
})
}
/** Initialize the search overlay, autocomplete, and engine-specific logic. */
setup() {
const searchConfig = this.core.config.search
if (!searchConfig || !searchConfig.type)
return
// Initialize engine once
if (!this.#engine) {
this.#engine = this.#createEngine(searchConfig.type, searchConfig)
}
// Initialize dialog and autocomplete once
if (!this.#initialized) {
this.#initialized = true
this.#initAutosearch()
this.#initDialog()
this.#initKeyboardShortcuts()
}
}
}
assets/js/modules/theme.ts
+6
View File
@@ -76,4 +76,10 @@ export class ThemeModule implements ThemeService {
})
})
}
/** Initialize theme color and switch handler. */
setup() {
this.initThemeColor()
this.initSwitchTheme()
}
}
assets/scss/_variables.scss
+80 -77
View File
@@ -1,181 +1,184 @@
// ==========================================================================
// SCSS Variables
// Note: These SCSS variables are now also defined as CSS custom properties
// in _core/_root.scss for runtime theme switching and runtime customization.
// Configured via [params.appearance] in hugo.toml using hugo:vars.
// Default values are defined in layouts/_partials/function/scss-vars.html.
// ==========================================================================
@forward "core/maps";
@use "sass:color";
@use "hugo:vars" as v;
// ========== Global ========== //
// ========== Internal ========== //
$prefix: fi- !default;
$rootPrefix: --#{$prefix} !default;
// ========== Internal ========== //
// ========== Global ========== //
// Font and Line Height
$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$global-font-size: 16px !default;
$global-font-weight: 400 !default;
$global-line-height: 1.5rem !default;
$global-font-family: v.$global-font-family;
$global-font-size: v.$global-font-size;
$global-font-weight: v.$global-font-weight;
$global-line-height: v.$global-line-height;
// Radius of the border
$global-border-radius: 6px !default;
$global-border-radius: v.$global-border-radius;
// Color of the background
$global-background-color: #ffffff !default;
$global-background-color-dark: #1f252d !default;
$global-background-color: v.$global-background-color;
$global-background-color-dark: v.$global-background-color-dark;
// Color of the text
$global-font-color: #1f2328 !default;
$global-font-color-dark: #b3bdcb !default;
$global-font-color: v.$global-font-color;
$global-font-color-dark: v.$global-font-color-dark;
// Color of the secondary text
$global-font-secondary-color: #8b949e !default;
$global-font-secondary-color-dark: #7d8792 !default;
$global-font-secondary-color: v.$global-font-secondary-color;
$global-font-secondary-color-dark: v.$global-font-secondary-color-dark;
// Color of the link
$global-link-color: #161209 !default;
$global-link-color-dark: $global-font-color-dark !default;
$global-link-color: v.$global-link-color;
$global-link-color-dark: v.$global-link-color-dark;
// Color of the hover link
$global-link-hover-color: #2983bb !default; // 潮蓝
$global-link-hover-color-dark: #fff !default;
$global-link-hover-color: v.$global-link-hover-color;
$global-link-hover-color-dark: v.$global-link-hover-color-dark;
// Color of the border
$global-border-color: #d7dee4 !default;
$global-border-color-dark: #383f47 !default;
$global-border-color: v.$global-border-color;
$global-border-color-dark: v.$global-border-color-dark;
// ========== Global ========== //
// ========== Scrollbar ========== //
// Color of the scrollbar
$scrollbar-color: #a6a6a6 !default;
$scrollbar-color: v.$scrollbar-color;
// Color of the hover scrollbar
$scrollbar-hover-color: #7d7d7d !default;
$scrollbar-hover-color: v.$scrollbar-hover-color;
// ========== Scrollbar ========== //
// ========== Selection ========== //
// Color of the selected text
$selection-color: rgba(53, 166, 247, 0.25) !default;
$selection-color-dark: rgba(50, 112, 194, 0.4) !default;
$selection-color: v.$selection-color;
$selection-color-dark: v.$selection-color-dark;
// ========== Selection ========== //
// ========== Header ========== //
// Height of the header
$header-height: 3.5rem !default;
$header-height: v.$header-height;
// Color of the header background
$header-background-color: #f6f8fa !default;
$header-background-color-dark: #151b23 !default;
$header-background-color: v.$header-background-color;
$header-background-color-dark: v.$header-background-color-dark;
// Font style of the header title
$header-title-font-family: $global-font-family !default;
$header-title-font-size: 1.375rem !default;
$header-title-font-size: v.$header-title-font-size;
// Color of the active menu item
$menu-active-color: $global-link-color !default;
$menu-active-color-dark: #fff !default;
$menu-active-color: v.$menu-active-color;
$menu-active-color-dark: v.$menu-active-color-dark;
// Border color of the menu item
$menu-border-color: #3c3c3c1f !default;
$menu-border-color-dark: #5454547a !default;
$menu-border-color: v.$menu-border-color;
$menu-border-color-dark: v.$menu-border-color-dark;
// Height of the submenu item of desktop header
$submenu-height: $header-height * 0.5 !default;
// Color of the search background
$search-background-color: #e9eaed !default;
$search-background-color-dark: #202833 !default;
$search-background-color: v.$search-background-color;
$search-background-color-dark: v.$search-background-color-dark;
// ========== Header ========== //
// ========== Tag Cloud ========== //
// Color range of tag cloud
$tag-cloud-start: $global-font-color-dark !default;
$tag-cloud-end: $global-font-color !default;
$tag-cloud-start-dark: #909092 !default;
$tag-cloud-end-dark: $global-font-color-dark !default;
$tag-cloud-start: v.$tag-cloud-start;
$tag-cloud-end: v.$tag-cloud-end;
$tag-cloud-start-dark: v.$tag-cloud-start-dark;
$tag-cloud-end-dark: v.$tag-cloud-end-dark;
// ========== Tag Cloud ========== //
// ========== Single Content ========== //
// Font size of the TOC
$toc-title-font-size: 1rem !default;
$toc-content-font-size: 0.875rem !default;
$toc-title-font-size: v.$toc-title-font-size;
$toc-content-font-size: v.$toc-content-font-size;
// Font size of the Collection List
$collection-title-font-size: 1rem !default;
$collection-list-font-size: 0.875rem !default;
$collection-title-font-size: v.$collection-title-font-size;
$collection-list-font-size: v.$collection-list-font-size;
// Font size of the Related Content List
$related-title-font-size: 1rem !default;
$related-list-font-size: 0.875rem !default;
$related-title-font-size: v.$related-title-font-size;
$related-list-font-size: v.$related-list-font-size;
// Color of the single link
$single-link-color: #2376b7 !default; // 花青
$single-link-color-dark: #1781b5 !default; // 釉蓝
$single-link-color: v.$single-link-color;
$single-link-color-dark: v.$single-link-color-dark;
// Color of the hover single link
$single-link-hover-color: #ea517f !default; // 莲瓣红
$single-link-hover-color-dark: #cc5595 !default; // 龙须红
$single-link-hover-color: v.$single-link-hover-color;
$single-link-hover-color-dark: v.$single-link-hover-color-dark;
// Color of the table background
$table-background-color: #f9fbfe !default;
$table-background-color-dark: #26303a !default;
$table-background-color: v.$table-background-color;
$table-background-color-dark: v.$table-background-color-dark;
// Color of the table thead
$table-thead-color: #e3ebf4 !default;
$table-thead-color-dark: #3a4653 !default;
$table-thead-color: v.$table-thead-color;
$table-thead-color-dark: v.$table-thead-color-dark;
// Color of the table border
$table-border-color: #d4dee8 !default;
$table-border-color-dark: #4b5867 !default;
$table-border-color: v.$table-border-color;
$table-border-color-dark: v.$table-border-color-dark;
// Color of the blockquote
$blockquote-color: #697681 !default;
$blockquote-color-dark: #9ba3aa !default;
$blockquote-color: v.$blockquote-color;
$blockquote-color-dark: v.$blockquote-color-dark;
// Color of reward
$reward-color: tomato !default;
$reward-color: v.$reward-color;
$reward-color-dark: color.adjust($reward-color, $lightness: -5%) !default;
// Width of reward image
$reward-img-width: 180px !default;
$reward-img-width: v.$reward-img-width;
// ========== Single Content ========== //
// ========== Pagination ========== //
// Color of the link in pagination
$pagination-link-color: #bfbfbf !default;
$pagination-link-color-dark: $global-font-color-dark !default;
$pagination-link-color: v.$pagination-link-color;
$pagination-link-color-dark: v.$pagination-link-color-dark;
// Color of the hover link in pagination
$pagination-link-hover-color: #000 !default;
$pagination-link-hover-color-dark: #fff !default;
$pagination-link-hover-color: v.$pagination-link-hover-color;
$pagination-link-hover-color-dark: v.$pagination-link-hover-color-dark;
// ========== Pagination ========== //
// ========== Code ========== //
// Color of the code
$code-color: #26323d !default;
$code-color-dark: #c5d1dc !default;
$code-color: v.$code-color;
$code-color-dark: v.$code-color-dark;
// Color of the code header text
$code-header-color: #70808f !default;
$code-header-color-dark: #99a7b5 !default;
$code-header-color: v.$code-header-color;
$code-header-color-dark: v.$code-header-color-dark;
// Color of the code header background
$code-header-background-color: #dde6ef !default;
$code-header-background-color-dark: #161f28 !default;
$code-header-background-color: v.$code-header-background-color;
$code-header-background-color-dark: v.$code-header-background-color-dark;
// Color of the code background
$code-background-color: #f3f7fb !default;
$code-background-color-dark: #2a333d !default;
$code-background-color: v.$code-background-color;
$code-background-color-dark: v.$code-background-color-dark;
// Color of the code error
$code-error-color: #dc3545 !default;
$code-error-color: v.$code-error-color;
// Color of the highlight code
$code-highlight-color: #fff2b8 !default;
$code-highlight-color-dark: rgba(191, 144, 32, 0.28) !default;
$code-highlight-color: v.$code-highlight-color;
$code-highlight-color-dark: v.$code-highlight-color-dark;
// Font size of the code
$code-font-size: 0.875em !default;
$code-block-font-size: 0.875rem !default;
$code-font-size: v.$code-font-size;
$code-block-font-size: v.$code-block-font-size;
// Font family of the code
$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
@@ -183,8 +186,8 @@ $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-
// ========== GitHub Corners ========== //
// Color of the GitHub Corners
$github-corner-color: white !default;
$github-corner-color-dark: black !default;
$github-corner-color: v.$github-corner-color;
$github-corner-color-dark: v.$github-corner-color-dark;
// Color of the GitHub Corners background
$github-corner-fill: $header-background-color-dark !default;
assets/scss/config.template.scss
-14
View File
@@ -1,14 +0,0 @@
{{- $logo := resources.Get "images/fixit.svg" | minify -}}
{{- $loading := resources.Get "images/loading.svg" | minify -}}
@charset "utf-8";
@use "override" as *;
$base: "{{ relURL "" }}" !default;
:root {
#{$rootPrefix}base: "#{$base}";
#{$rootPrefix}logo-img: url("{{ $logo.RelPermalink }}");
#{$rootPrefix}loading-img: url("{{ $loading.RelPermalink }}");
}
assets/scss/core/_root.scss
+11 -4
View File
@@ -2,9 +2,10 @@
// CSS Custom Properties (CSS Variables)
// ================================================================================
// This file defines all CSS custom properties for the FixIt theme.
// Variables are organized into two main categories:
// 1. Theme-independent variables: fixed values (fonts, sizes, etc.)
// 2. Theme-dependent variables: color values that support light/dark themes
// Variables are organized into three main categories:
// 1. Internal config: theme system values (base URL, logo, etc.) via hugo:vars/internal
// 2. Theme-independent variables: fixed values (fonts, sizes, etc.)
// 3. Theme-dependent variables: color values that support light/dark themes
//
// Theme-dependent variables are further categorized into:
// - Core: Global layout and navigation colors
@@ -16,7 +17,8 @@
@use "sass:color";
@use "functions" as *;
@use "mixins" as *;
@use "override" as *;
@use "variables" as *;
@use "hugo:vars/internal" as i;
:root {
interpolate-size: allow-keywords;
@@ -34,6 +36,11 @@
// Theme-Independent Variables
// ----------------------------------------
@include set-fi-vars((
// Internal config
base: "#{i.$base}",
logo-img: url("#{i.$logo-img}"),
loading-img: url("#{i.$loading-img}"),
// Global Typography
global-font-family: $global-font-family,
global-font-size: $global-font-size,
assets/scss/core/functions/_var.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@use "sass:meta";
@use "sass:string";
@use "override" as *;
@use "variables" as *;
/// Get CSS variable with prefix
/// @param {String} $name - CSS variable name (without prefix)
assets/scss/core/layouts/_header.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
$header-box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.125), rgba(255, 255, 255, 0.125));
assets/scss/core/layouts/_wrapper.scss
+1 -1
View File
@@ -1,5 +1,5 @@
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
// Responsive layout
.wrapper {
assets/scss/core/mixins/_admonition.scss
+32
View File
@@ -0,0 +1,32 @@
@use "sass:color";
@use "theme-vars" as *;
/// Define an admonition type with CSS custom properties
/// @param {String} $type - Admonition type name (empty string for default type)
/// @param {Color} $color - Text/border color
/// @param {Color} $bg - Background color
/// @param {Color} $bg-collapsed [color.adjust($bg, $alpha: 0.15)] - Collapsed title background color
/// @example
/// // Define the default admonition type
/// @include admonition('', #1677ff, rgba(22, 119, 255, 0.1));
///
/// // Define a custom admonition type
/// @include admonition(custom, #9b59b6, rgba(155, 89, 182, 0.1));
///
/// // Define with explicit collapsed background color
/// @include admonition(important, #e91e63, rgba(233, 30, 99, 0.1), rgba(233, 30, 99, 0.25));
@mixin admonition($type, $color, $bg, $bg-collapsed: color.adjust($bg, $alpha: 0.15)) {
$vars: (
admonition-color: $color,
admonition-bg-color: $bg,
admonition-bg-color-collapsed: $bg-collapsed,
);
@if $type == '' {
@include set-fi-vars($vars);
} @else {
&.#{$type} {
@include set-fi-vars($vars);
}
}
}
assets/scss/core/mixins/_index.scss
+1
View File
@@ -1,3 +1,4 @@
@forward 'admonition';
@forward 'bold-dark';
@forward 'border-radius';
@forward 'box-shadow';
assets/scss/core/mixins/_link.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@use "override" as *;
@use "variables" as *;
/// Link mixin
/// @param {Boolean} $light use global link color
assets/scss/core/mixins/_theme-switch.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@use "override" as *;
@use "variables" as *;
// Shared defaults for theme-switch icon motion.
// Keep them overridable so other entries can reuse the same mixin with different pacing.
assets/scss/core/mixins/_theme-vars.scss
+1 -1
View File
@@ -3,7 +3,7 @@
// ========================================
@use "sass:color";
@use "sass:map";
@use "override" as *;
@use "variables" as *;
/// Set a single CSS variable
/// @param {String} $name - CSS variable name (without prefix)
assets/scss/override.scss
-12
View File
@@ -1,12 +0,0 @@
// ==============================
// Override Variables
// 覆盖变量
// @deprecated 1.0.0 use config params for _variables.scss
//
// Example:
// @forward "variables" with (
// $global-font-size: 16px,
// $global-border-radius: 6px,
// );
// ==============================
@forward "variables";
assets/scss/pages/_patch.scss
+1 -1
View File
@@ -1,5 +1,5 @@
// Resolve style conflicts between third-party plugins
@use "override" as *;
@use "variables" as *;
@keyframes #{$prefix}pulse {
from {
assets/scss/pages/archives/_tags.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
.tags {
margin: 10px 0;
assets/scss/pages/single/_base.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
.single {
.single-title {
assets/scss/pages/single/_code.scss
+1 -1
View File
@@ -3,7 +3,7 @@
@use "sass:string";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
@use "code-syntax";
@use "copy-icon-btn";
assets/scss/pages/single/_collections.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
// Collection Navigation
.single .collection-card {
assets/scss/pages/single/_fixit-decryptor.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
.fixit-decryptor-container {
font-family: fi-var(global-font-family);
assets/scss/pages/single/_reward.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
.single .post-reward {
padding: 1rem;
assets/scss/pages/single/_toc.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
// Common styles for all TOC types
.toc {
assets/scss/pages/single/code-syntax/_dark.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@use "override" as *;
@use "variables" as *;
/* Maintained by @Lruihao for FixIt theme */
assets/scss/pages/single/code-syntax/_light.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@use "override" as *;
@use "variables" as *;
/* Maintained by @Lruihao for FixIt theme */
assets/scss/pages/single/shortcodes/_admonition.scss
+6 -16
View File
@@ -56,7 +56,7 @@
.admonition-content {
padding: 0.5rem 0;
// for extended alert syntax
> p {
margin: 0;
@@ -84,24 +84,14 @@
translate: 50% -50%;
}
// default admonition type is note
@include set-fi-vars((
admonition-color: map.get(map.get(maps.$admonition-color-map, note), color),
admonition-bg-color: map.get(map.get(maps.$admonition-color-map, note), bg-color),
admonition-bg-color-collapsed: color.adjust(map.get(map.get(maps.$admonition-color-map, note), bg-color), $alpha: 0.15),
));
// set color for each admonition type
$default-type: note;
@each $type, $item in maps.$admonition-color-map {
@if $type != 'note' {
&.#{$type} {
@include set-fi-vars((
admonition-color: map.get($item, color),
admonition-bg-color: map.get($item, bg-color),
admonition-bg-color-collapsed: color.adjust(map.get($item, bg-color), $alpha: 0.15),
));
}
$admonition-type: $type;
@if $type == $default-type {
$admonition-type: '';
}
@include admonition($admonition-type, map.get($item, color), map.get($item, bg-color));
}
&:last-child {
assets/scss/pages/single/shortcodes/_tabs.scss
+1 -1
View File
@@ -3,7 +3,7 @@
// ========================================
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
@mixin tab-button-size($padding-inline: 1.25rem, $padding-block: 0.75rem) {
@if $padding-inline != 0 {
assets/scss/pages/single/shortcodes/_timeline.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;
@use "variables" as *;
.single ul.#{$prefix}timeline {
list-style: none;
hugo.toml
+13
View File
@@ -1269,6 +1269,19 @@ postContentAfter = []
postFooterBefore = []
postFooterAfter = []
# FixIt 1.0.0 | NEW SCSS variables customization via config
# All SCSS variables from _variables.scss can be configured here.
# Use the SCSS variable name (without $ prefix, snake_case) as the key.
# Note:
# - Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported.
# - Values used in compile-time operations (color.adjust, arithmetic)
# will use the SCSS default for derived values. You can override derived values directly.
[params.appearance]
# global_border_radius = "6px"
# global_font_size = "16px"
# global_font_color = "#1f2328"
# global_font_color_dark = "#b3bdcb"
# FixIt 0.2.15 | NEW Developer options
# select the scope named `public_repo` to generate personal access token,
# configure with environment variable `HUGO_PARAMS_GHTOKEN=xxx`, see https://gohugo.io/functions/os/getenv/#examples
i18n/ko.toml
+2 -2
View File
@@ -4,9 +4,9 @@
# === Init ===
[init]
hugoVersionError = "Hugo 버전이 너무 낮습니다.\n\n현재 Hugo 버전은 {{ .Current }}이며, FixIt의 최소 지원 버전은 {{ .Minimal }}입니다.\n\n자신의 컴퓨터에서 Hugo를 실행 중이라면 https://gohugo.io/getting-started/installing/#upgrade-hugo에서 업그레이드 가이드를 확인하세요.\n\n타사 플랫폼에 배포 중이라면 Hugo 버전을 적절히 설정해 주세요."
hugoVersionError = "Hugo 버전이 너무 낮습니다.\n\n현재 Hugo 버전은 {{ .Current }}이며, FixIt의 최소 지원 버전은 {{ .Minimal }}입니다.\n\n자신의 컴퓨터에서 Hugo를 실행 중이라면 https://gohugo.io/getting-started/installing/#upgrade-hugo 에서 업그레이드 가이드를 확인하세요.\n\n타사 플랫폼에 배포 중이라면 Hugo 버전을 적절히 설정해 주세요."
hugoExtendedWarn = "SCSS 지원을 위해 Hugo Extended 버전이 필요합니다."
configurationError = "구성 파일 오류\n아직 FixIt의 버전 매개변수를 올바르게 구성하지 않았습니다. https://fixit.lruihao.cn/ko/documentation/basics/#theme-configuration을 참조하세요."
configurationError = "구성 파일 오류\n아직 FixIt의 버전 매개변수를 올바르게 구성하지 않았습니다. https://fixit.lruihao.cn/ko/documentation/basics/#theme-configuration 을 참조하세요."
compatibilityError = "호환성 오류 ({{ .From }} -> {{ .To }}):\n비호환 업데이트를 수행했습니다. https://github.com/hugo-fixit/FixIt/releases를 참조하세요."
devVersionWarn = "현재 개발 버전의 FixIt을 사용 중입니다. 안정적인 버전을 사용하는 것이 좋습니다.\n자세한 내용은 https://github.com/hugo-fixit/FixIt/releases를 참조하세요."
devEnvWarn = "현재 실행 환경이 'development'입니다. '댓글 시스템', 'PWA', 'CDN', '지문 인식' 및 '통계'가 활성화되지 않습니다."
layouts/_partials/base/head/index.html
+13 -9
View File
@@ -113,20 +113,24 @@
<link rel="alternate" type="application/feed+json" href="{{ .Permalink }}" title="{{ $title }}" />
{{- end -}}
{{- /* Config CSS */ -}}
{{- dict
"Source" "scss/config.template.scss"
"Template" "scss/config.scss"
"ToCSS" (dict "enableSourceMap" false)
"Fingerprint" $fingerprint
"Context" .
| partial "plugin/style.html"
{{- /* SCSS vars: internal (theme config) + appearance (user-configurable) */ -}}
{{- $logo := resources.Get "images/fixit.svg" | minify -}}
{{- $loading := resources.Get "images/loading.svg" | minify -}}
{{- $internal := dict
"base" (relURL "")
"logo_img" $logo.RelPermalink
"loading_img" $loading.RelPermalink
-}}
{{- $scssVars :=
dict "internal" $internal
| merge (.Site.Params.appearance | default dict)
| merge (partialCached "function/scss-vars.html" .)
-}}
{{- /* Theme main CSS */ -}}
{{- $mainCSS := dict
"Resource" (resources.Get "scss/main.scss")
"ToCSS" true
"ToCSS" (dict "vars" $scssVars)
"Fingerprint" $fingerprint
| partial "function/to-css.html"
-}}
layouts/_partials/function/scss-vars.html
+89
View File
@@ -0,0 +1,89 @@
{{- /*
SCSS variables default values.
Merged with user config ([params.appearance]) and passed to toCSS as hugo:vars.
Values from: assets/scss/_variables.scss
Note: Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported
because Hugo's isTypedCSSValue only recognizes hex colors, CSS functions, and CSS units.
*/ -}}
{{- /* Base defaults — independent values */ -}}
{{- $defaults := dict
"global_font_family" "system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
"global_font_size" "16px"
"global_font_weight" "400"
"global_line_height" "1.5rem"
"global_border_radius" "6px"
"global_background_color" "#ffffff"
"global_background_color_dark" "#1f252d"
"global_font_color" "#1f2328"
"global_font_color_dark" "#b3bdcb"
"global_font_secondary_color" "#8b949e"
"global_font_secondary_color_dark" "#7d8792"
"global_link_color" "#161209"
"global_link_color_dark" "#b3bdcb"
"global_link_hover_color" "#2983bb"
"global_link_hover_color_dark" "#fff"
"global_border_color" "#d7dee4"
"global_border_color_dark" "#383f47"
"scrollbar_color" "#a6a6a6"
"scrollbar_hover_color" "#7d7d7d"
"selection_color" "rgba(53, 166, 247, 0.25)"
"selection_color_dark" "rgba(50, 112, 194, 0.4)"
"header_height" "3.5rem"
"header_background_color" "#f6f8fa"
"header_background_color_dark" "#151b23"
"header_title_font_size" "1.375rem"
"menu_active_color_dark" "#fff"
"menu_border_color" "#3c3c3c1f"
"menu_border_color_dark" "#5454547a"
"search_background_color" "#e9eaed"
"search_background_color_dark" "#202833"
"tag_cloud_start_dark" "#909092"
"toc_title_font_size" "1rem"
"toc_content_font_size" "0.875rem"
"collection_title_font_size" "1rem"
"collection_list_font_size" "0.875rem"
"related_title_font_size" "1rem"
"related_list_font_size" "0.875rem"
"single_link_color" "#2376b7"
"single_link_color_dark" "#1781b5"
"single_link_hover_color" "#ea517f"
"single_link_hover_color_dark" "#cc5595"
"table_background_color" "#f9fbfe"
"table_background_color_dark" "#26303a"
"table_thead_color" "#e3ebf4"
"table_thead_color_dark" "#3a4653"
"table_border_color" "#d4dee8"
"table_border_color_dark" "#4b5867"
"blockquote_color" "#697681"
"blockquote_color_dark" "#9ba3aa"
"reward_color" "#ff6347"
"reward_img_width" "180px"
"pagination_link_color" "#bfbfbf"
"pagination_link_hover_color" "#000"
"pagination_link_hover_color_dark" "#fff"
"code_color" "#26323d"
"code_color_dark" "#c5d1dc"
"code_header_color" "#70808f"
"code_header_color_dark" "#99a7b5"
"code_header_background_color" "#dde6ef"
"code_header_background_color_dark" "#161f28"
"code_background_color" "#f3f7fb"
"code_background_color_dark" "#2a333d"
"code_error_color" "#dc3545"
"code_highlight_color" "#fff2b8"
"code_highlight_color_dark" "rgba(191, 144, 32, 0.28)"
"code_font_size" "0.875em"
"code_block_font_size" "0.875rem"
"github_corner_color" "#ffffff"
"github_corner_color_dark" "#000000"
-}}
{{- /* Derived defaults — values that follow other keys (see _variables.scss) */ -}}
{{- $derived := dict
"menu_active_color" (index $defaults "global_link_color")
"tag_cloud_start" (index $defaults "global_font_color_dark")
"tag_cloud_end" (index $defaults "global_font_color")
"tag_cloud_end_dark" (index $defaults "global_font_color_dark")
"pagination_link_color_dark" (index $defaults "global_font_color_dark")
-}}
{{- $defaults = merge $defaults $derived -}}
{{- return $defaults -}}
layouts/_partials/init/detection-deprecated.html
+11 -7
View File
@@ -6,26 +6,30 @@
{{- $warns = $warns | append "The parameter `params.externalIcon` is deprecated since v1.0.0, use `params.link.external_icon` instead." -}}
{{- end -}}
{{- with resources.Get "css/_custom.scss" -}}
{{- if fileExists "assets/css/_custom.scss" -}}
{{- $warns = $warns | append "The file `assets/css/_custom.scss` is deprecated. Please move your custom styles to `assets/scss/custom.scss`." -}}
{{- end -}}
{{- with resources.Get "css/_override.scss" -}}
{{- $warns = $warns | append "The file `assets/css/_override.scss` is deprecated. Please move your custom styles to `assets/scss/override.scss`." -}}
{{- if fileExists "assets/css/_override.scss" -}}
{{- $warns = $warns | append "The file `assets/css/_override.scss` is deprecated. Use `[params.appearance]` in your site configuration instead." -}}
{{- end -}}
{{- with resources.Get "css/_variables.scss" -}}
{{- if fileExists "assets/scss/override.scss" -}}
{{- $warns = $warns | append "The file `assets/scss/override.scss` is deprecated. Use `[params.appearance]` in your site configuration instead." -}}
{{- end -}}
{{- if fileExists "assets/css/_variables.scss" -}}
{{- $warns = $warns | append "The file `assets/css/_variables.scss` is deprecated. Please move your variables to `assets/scss/_variables.scss`." -}}
{{- end -}}
{{- with resources.Get "js/_custom.js" -}}
{{- if fileExists "assets/js/_custom.js" -}}
{{- $warns = $warns | append "The file `assets/js/_custom.js` is deprecated. Please move your custom scripts to `assets/js/custom.ts` or `assets/js/custom.js`." -}}
{{- end -}}
{{- if len $warns -}}
{{- warnf "FixIt deprecation warnings (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $warns "\n • ") -}}
{{- warnf "[FixIt] deprecation warnings (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $warns "\n • ") -}}
{{- end -}}
{{- if len $errors -}}
{{- errorf "FixIt deprecation errors (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $errors "\n • ") -}}
{{- errorf "[FixIt] deprecation errors (%v):\n • %v\n\n" (hugo.Store.Get "version") (delimit $errors "\n • ") -}}
{{- end -}}