[{"content":"Welcome to Hugo Theme Stack Starter This is a ready-to-use blog template based on Hugo Theme Stack v4, featuring enhanced styling, bilingual support, and GitHub Actions auto-deployment. You can get started without installing anything locally.\nOption 1: GitHub Template — One Click Deploy (Recommended) The easiest way — everything happens in your browser.\nStep 1: Create your repository from this template Open this project\u0026rsquo;s GitHub page Click the green \u0026ldquo;Use this template\u0026rdquo; button → \u0026ldquo;Create a new repository\u0026rdquo; Enter a repository name (e.g., my-blog), select Public (required for free GitHub Pages) Click \u0026ldquo;Create repository\u0026rdquo; Step 2: Enable GitHub Pages In your new repository, go to Settings → Pages Under \u0026ldquo;Source\u0026rdquo;, select \u0026ldquo;GitHub Actions\u0026rdquo; Save Step 3: Update your configuration Edit config/_default/config.toml directly on GitHub:\n# Replace with your GitHub Pages URL baseurl = \u0026#34;https://your-username.github.io/repo-name/\u0026#34; title = \u0026#34;My Blog\u0026#34; Step 4: Push to trigger auto-deployment Every commit triggers GitHub Actions to build and deploy automatically. Wait 1–2 minutes, then visit your GitHub Pages URL to see your blog live!\nOption 2: Local Development If you prefer to write and preview locally:\nInstall Hugo (Extended edition) # macOS brew install hugo # Windows (Scoop) scoop install hugo-extended # Linux (apt) sudo apt install hugo Verify it\u0026rsquo;s the extended edition:\nhugo version # Output should include \u0026#34;extended\u0026#34; Clone and run git clone https://github.com/your-username/my-blog.git cd my-blog hugo server Visit http://localhost:1313 to preview your blog.\nConfiguration Guide All config files are in config/_default/:\nFile Purpose config.toml Site title, base URL, default language languages.toml Multilingual settings (zh/en) params.toml Theme parameters (comments, homepage layout) params.en.toml English-specific parameters (avatar, subtitle) menu.en.toml English navigation menu Required changes 1. Site title and URL (config.toml):\nbaseurl = \u0026#34;https://your-domain.com/\u0026#34; title = \u0026#34;My Blog\u0026#34; 2. Your avatar and bio (params.en.toml):\n[sidebar] subtitle = \u0026#34;Your personal tagline\u0026#34; avatar = \u0026#34;img/avatar.jpg\u0026#34; # replace assets/img/avatar.jpg 3. Blog launch date (params.toml):\n[footer] launchDate = \u0026#34;2024-01-01\u0026#34; # your blog\u0026#39;s start date Project Structure my-blog/ ├── .github/workflows/ # GitHub Actions (no changes needed) ├── assets/scss/ # Style customization │ ├── custom.scss # Colors, global styles │ └── partials/custom-components/ # Component styles ├── config/_default/ # All configuration files ├── content/ │ └── post/ # Blog posts (write here) ├── layouts/ # Custom layouts and Shortcodes └── static/ # Static assets (images, etc.) What\u0026rsquo;s Next 📖 Theme Customizations — What this template changes from the original 💬 Set Up Waline Comments — Add a comment section to your blog ✏️ Start Writing — Learn Markdown and multilingual posts Happy blogging! 🎉\n","date":"2026-04-09T00:00:00Z","permalink":"/hugo-stack-starter/en/post/hello-world/","title":"Quick Start: Deploy Your Blog with One Click"},{"content":"This template is developed based on Hugo Theme Stack v4. While maintaining the integrity of the original features, a series of visual and interactive enhancements have been made.\nAll modifications are implemented using Hugo\u0026rsquo;s override mechanism (by creating files with the same names in assets/ and layouts/), without modifying the original theme\u0026rsquo;s source code, making it easy to upgrade the theme version at any time.\n1. Global Color System The entire set of color variables has been redefined, adopting a deep blue + warm off-white color scheme:\nLight Mode:\nBackground color: Warm off-white #f8f7f2 (easier on the eyes than pure white) Accent color: Deep sea blue #1B365D Card background: #fdfdfb (slightly warm white) Dark Mode:\nBackground color: #101214 (dark grayish-black) Card background: #1c2128 (GitHub dark style) In dark mode, images are automatically dimmed, restoring brightness on hover Modification location: :root variables in assets/scss/custom.scss.\n2. Mac-Style Code Blocks The original theme\u0026rsquo;s code blocks are quite simple, but this template comprehensively beautifies them:\nTop Title Bar A macOS-style three-color dot decoration (red, yellow, green) has been added to every code block, simulating a terminal window appearance.\nRedesigned Copy Button Changed from an inconspicuous icon button to a text button floating on the right side of the title bar Light mode: Frosted glass style (backdrop-filter: blur) Dark mode: Dark translucent background Clicking the button changes the text to \u0026ldquo;✓ Copied!\u0026rdquo; Auto-Collapse Long Code Blocks Code blocks taller than 600px automatically collapse, with an \u0026ldquo;Expand Code\u0026rdquo; button at the bottom:\nWhen collapsed, a gradient overlay appears at the bottom After expanding, the button text changes to \u0026ldquo;Collapse Code\u0026rdquo; When collapsing, it automatically scrolls back to the top of the code block, preventing page layout confusion Beautified Scrollbars The horizontal scrollbar of code blocks is transparent by default and only appears on hover, keeping the interface clean.\n3. Homepage Two-Column Grid Layout On desktop screens (width ≥ 1024px), the homepage article list changes to a 2-column grid display:\nEach article is presented as a card containing a cover image, title, summary, and meta information Cards have a slight floating animation on hover Long article titles and summaries are automatically truncated (2 lines) Automatically reverts to a single-column list on mobile devices To enable: Set it in params.toml:\n[homepage] grid = true 4. Redesigned Mobile Navigation The original theme\u0026rsquo;s mobile navigation is relatively basic. This template completely rewrites the mobile experience:\nSticky Top Navigation Bar Fixed to the top (sticky), remaining visible as you scroll down the page Left side: Avatar + Site name (click to return home) Right side: Dark mode toggle, language switch, search, and hamburger menu Hamburger Menu Clicking expands the side menu with a fade-in animation The top bar title fades out when the menu expands to prevent overlap The current page\u0026rsquo;s menu item is highlighted Automatically closes when the screen width recovers (e.g., rotating device) Search Box The search box in the desktop sidebar has been redesigned to match the card style.\n5. Blog Stats Page A feature-rich /stats/ statistics page has been added, including:\nSummary Cards: Total articles, total words, running days (animated scrolling numbers) Category Distribution: Category list with progress bars, clickable to enter category pages Popular Tags: Tag cloud display (top 30 tags) Writing Habits: Posting habit analysis by day of the week and time of day (based on Git commit times) Yearly Heatmap: GitHub-style contribution heatmap (publishing record for the past year) Configuration page entry: Set layout: stats in content/stats/index.en.md.\n6. Footer Runtime The footer now displays the blog\u0026rsquo;s runtime, calculating the days, hours, and minutes since the launch date.\nClicking it navigates to the Stats page.\nConfigure launch date:\n[footer] launchDate = \u0026#34;2024-09-09\u0026#34; 7. Custom Shortcodes Timeline Suitable for displaying growth history, tech stack evolution, etc.:\n{{\u0026lt; timeline \u0026gt;}} {{\u0026lt; timeline-item date=\u0026#34;2024-01\u0026#34; \u0026gt;}} Started learning Hugo {{\u0026lt; /timeline-item \u0026gt;}} {{\u0026lt; timeline-item date=\u0026#34;2024-06\u0026#34; \u0026gt;}} Blog officially launched {{\u0026lt; /timeline-item \u0026gt;}} {{\u0026lt; /timeline \u0026gt;}} Title Divider Suitable for separating content sections like diaries or fitness logs:\n{{\u0026lt; title \u0026#34;Morning Run\u0026#34; \u0026#34;green\u0026#34; \u0026gt;}} Supported colors: red, orange, yellow, green, teal, blue, indigo, purple, pink, gray\nHow to Customize Colors Edit assets/scss/custom.scss, modifying the variables in :root:\n:root { --accent-color: #1B365D; /* Accent color (buttons, links, etc.) */ --body-background: #f8f7f2; /* Page background */ --card-background: #fdfdfb; /* Card background */ } After saving, Hugo will automatically recompile and refresh the browser in real-time.\n","date":"2026-04-10T00:00:00Z","permalink":"/hugo-stack-starter/en/post/theme-customization/","title":"Theme Customizations: What I Have Changed"},{"content":"Waline is a safe and concise comment system that supports Markdown, offers free deployment, and allows users to comment without registering.\nThis template has built-in integration for Waline. You just need to deploy the server-side application and fill in one line of configuration to enable it.\nStep 1: Deploy Waline Server Please refer to the Waline Official Quick Start Guide to complete the server deployment:\n👉 https://waline.js.org/en/guide/get-started/\nThe official documentation provides a free one-click deployment solution on Vercel. The entire process takes about 5 minutes.\nOnce deployed, you will receive a Waline service address, such as:\nhttps://your-waline-project.vercel.app/ (Default Vercel domain) Or your bound custom domain Save this address; you will need it in the next step.\nStep 2: Configure in This Template Edit config/_default/params.toml and fill in your service address:\n[comments] enabled = true provider = \u0026#34;waline\u0026#34; [comments.waline] serverURL = \u0026#34;https://your-waline-project.vercel.app/\u0026#34; # ← Fill in your address here pageview = true # Also enable article pageview statistics # Optional: Custom emoji package (default is Weibo emoji) emoji = [\u0026#34;https://unpkg.com/@waline/emojis@1.0.1/weibo\u0026#34;] # Required fields for comments requiredMeta = [\u0026#34;name\u0026#34;] [comments.waline.locale] admin = \u0026#34;Admin\u0026#34; # Administrator badge Save and restart hugo server, and the comment section will appear at the bottom of your article pages.\nFeatures Overview Pageview Statistics After setting pageview = true, pageviews will automatically be displayed at the top of the article (Requires Waline server support).\nComment Management Dashboard Visit https://your-waline-project.vercel.app/ui/ to access the management interface. The first registered account automatically becomes the administrator, who can review and delete comments.\nEmail Notifications You can be notified via email when someone replies. This requires configuring SMTP information in Vercel environment variables. See the Official Documentation - Notification for details.\nFAQ Comment section not showing up?\nCheck if there is a trailing slash / at the end of serverURL, and ensure the Vercel service is running normally (you should see the Waline welcome page when visiting the serverURL directly).\nCookie banner blocking the comment section?\nIf you have enabled the Cookie consent feature, users must accept \u0026ldquo;Functional Cookies\u0026rdquo; before the comment section will appear. You can disable the Cookie prompt in params.toml or instruct users to accept it.\n","date":"2026-04-11T00:00:00Z","permalink":"/hugo-stack-starter/en/post/waline-setup/","title":"Set Up Waline Comments"},{"content":"Create Your First Post Option 1: Using Commands (Recommended) # Create an English post hugo new content post/my-first-post/index.en.md # Create the corresponding Chinese version hugo new content post/my-first-post/index.zh.md Hugo will automatically populate initial content based on the archetypes/default.md template.\nOption 2: Manual Creation Create a new folder under content/post/, and then create index.en.md inside it:\ncontent/ └── post/ └── my-first-post/ ← Post directory (Name becomes the URL) ├── index.en.md ← English body ├── index.zh.md ← Chinese body (Optional) └── cover.jpg ← Cover image (Optional) Front Matter Explanation The section between the --- at the top of each article is called Front Matter, used to define article metadata:\n--- title: \u0026#34;Post Title\u0026#34; description: \u0026#34;Post summary, displayed on the list page and in SEO descriptions\u0026#34; date: 2026-04-12 # Publish date lastmod: 2026-04-23 # Last modified date (optional) draft: false # true = draft, will not be published categories: - Technology # Category (recommended to pick only one) tags: - Hugo # Tags (can have multiple) - Markdown image: cover.jpg # Cover image (relative to the post directory) --- Tip: The date determines the sort order of posts in lists. Posts with future dates require hugo server -F to be visible during local preview.\nBasic Markdown Syntax Headings ## Heading 2 ### Heading 3 #### Heading 4 Avoid using Heading 1 (# H1) in the article body because the title field is already an H1.\nText Formatting **Bold** Bold text *Italic* Italic text ~~Strikethrough~~ Strikethrough `Inline code` Code Result: Bold, Italic, Strikethrough, Inline code\nLinks and Images [Link text](https://example.com) [Internal link](/post/hello-world/) ![Image description](image.jpg) # Relative path (same directory) ![Image description](/img/photo.jpg) # Absolute path (in static directory) Lists - Unordered list item - Second item - Nested item 1. Ordered list 2. Second item 3. Third item Code Blocks ```python def hello(): print(\u0026#34;Hello, World!\u0026#34;) ``` Supports syntax highlighting for: python, go, javascript, bash, toml, yaml, markdown, etc.\nBlockquotes \u0026gt; This is a blockquote. \u0026gt; It can span multiple lines. Result:\nThis is a blockquote.\nTables | Column 1 | Column 2 | Column 3 | |----------|----------|----------| | Content 1| Content 2| Content 3| | Content 4| Content 5| Content 6| Horizontal Rule --- Multilingual Writing This template has built-in support for Chinese and English.\nFile Naming Convention Filename Language index.en.md English index.zh.md Chinese Place both files in the same directory, and Hugo will automatically link them as different language versions of the same post.\nWriting Only in English If you don\u0026rsquo;t want to write a Chinese version, just create index.en.md.\nAdding a Chinese Version Create index.zh.md in the same directory. Translate the article content (also translate title and description in the Front Matter). Images and other resources are shared between both language versions; no need to duplicate them. Example:\nindex.en.md:\n--- title: \u0026#34;My First Post\u0026#34; description: \u0026#34;This is my first blog post\u0026#34; date: 2026-04-12 --- Content... index.zh.md:\n--- title: \u0026#34;我的第一篇文章\u0026#34; description: \u0026#34;这是我的第一篇博客文章\u0026#34; date: 2026-04-12 --- 内容... Inserting Images Using Images from the Post Directory (Recommended) Place the image in the post directory, and reference it using a relative path:\ncontent/post/my-post/ ├── index.en.md ├── cover.jpg ← Cover image └── screenshot.png ← Image inside the post In Markdown:\n![Screenshot description](screenshot.png) Specify the cover image in the Front Matter:\nimage: cover.jpg Using Images from the static Directory Place the image in static/img/, and reference it using an absolute path:\n![Image](img/photo.jpg) Using Template Shortcodes Title Divider Suitable for separating paragraphs in diary-style posts:\n{{\u0026lt; title \u0026#34;Morning Run\u0026#34; \u0026#34;green\u0026#34; \u0026gt;}} Ran 5 km today, feeling great. {{\u0026lt; title \u0026#34;Afternoon Reading\u0026#34; \u0026#34;blue\u0026#34; \u0026gt;}} Read two chapters of \u0026#34;Deep Work\u0026#34;. Timeline Suitable for showing experiences and growth trajectories:\n{{\u0026lt; timeline \u0026gt;}} {{\u0026lt; timeline-item date=\u0026#34;2024-01\u0026#34; \u0026gt;}} Started learning programming {{\u0026lt; /timeline-item \u0026gt;}} {{\u0026lt; timeline-item date=\u0026#34;2024-06\u0026#34; \u0026gt;}} Completed first project {{\u0026lt; /timeline-item \u0026gt;}} {{\u0026lt; /timeline \u0026gt;}} Writing Tips The post directory name becomes the URL. It is recommended to use lowercase English letters and hyphens, like my-first-post. Cover images are recommended to be 1200×630px, which is the optimal size for social sharing. Keep the description under 160 characters for SEO friendliness. Use hugo server -D during local preview to view draft posts. Happy writing! ✍️\n","date":"2026-04-12T00:00:00Z","permalink":"/hugo-stack-starter/en/post/start-writing/","title":"Start Writing: Markdown Basics and Multilingual Posts"},{"content":"Hugo Shortcodes are a way to embed special components within Markdown. This article demonstrates the actual rendering effects of all custom Shortcodes included in this template.\nTitle Divider (title) Ideal for content that requires section headings, such as diaries, workout logs, or study notes.\nUsage:\n{{\u0026lt; title \u0026#34;Heading Text\u0026#34; \u0026#34;color\u0026#34; \u0026gt;}} Actual Effects — Different Colors:\nGreen Heading This is the content under the green divider, suitable for sports or health-related logs.\nBlue Heading This is the content under the blue divider, suitable for tech or study-related logs.\nOrange Heading This is the content under the orange divider, suitable for creative or design-related logs.\nPurple Heading This is the content under the purple divider, suitable for diaries or essays.\nCustom Color #E91E63 You can also use hex color codes directly.\nAll Built-in Colors:\nColor Name Preview red Red orange Orange yellow Yellow green Green teal Teal blue Blue indigo Indigo purple Purple pink Pink gray Gray Timeline Suitable for showcasing personal experiences, project milestones, tech growth trajectories, etc.\nUsage:\n{{\u0026lt; timeline \u0026gt;}} {{\u0026lt; timeline-item date=\u0026#34;2024-01\u0026#34; \u0026gt;}} Content... {{\u0026lt; /timeline-item \u0026gt;}} {{\u0026lt; /timeline \u0026gt;}} Actual Effect:\n2024-01\nStarted learning Hugo and understanding the benefits of static blogs. 2024-06\nBlog officially launched. Published the first technical article and gained the first batch of readers. 2025-01\nIntegrated the Waline comment system to interact with readers. The comment section is becoming active. 2025-09\nBeautified the blog theme, adding features like Mac-style code blocks and a comprehensive Stats page. Timeline content supports full Markdown, such as bold, inline code, links, etc.\nCode Block Features (Theme Enhancement) Code blocks are not Shortcodes themselves, but this template has enhanced them:\nCopy Button Every code block has a copy button in the top right corner (inside the macOS title bar):\n// Try clicking the copy button in the top right corner function greet(name) { return `Hello, ${name}!`; } console.log(greet(\u0026#34;Hugo\u0026#34;)); Auto-Collapse Long Code Code blocks taller than 600px automatically collapse, and an \u0026ldquo;Expand Code\u0026rdquo; button appears at the bottom. Here is a long snippet to test the collapse feature:\n# This code is long enough to trigger the auto-collapse import os import sys import json import time import datetime class BlogStats: def __init__(self, posts_dir: str): self.posts_dir = posts_dir self.posts = [] self.total_words = 0 self.categories = {} self.tags = {} def scan_posts(self): \u0026#34;\u0026#34;\u0026#34;Scan all article directories\u0026#34;\u0026#34;\u0026#34; for root, dirs, files in os.walk(self.posts_dir): for file in files: if file.endswith(\u0026#39;.md\u0026#39;): filepath = os.path.join(root, file) self.parse_post(filepath) def parse_post(self, filepath: str): \u0026#34;\u0026#34;\u0026#34;Parse front matter of a single article\u0026#34;\u0026#34;\u0026#34; with open(filepath, \u0026#39;r\u0026#39;, encoding=\u0026#39;utf-8\u0026#39;) as f: content = f.read() # Extract front matter if content.startswith(\u0026#39;---\u0026#39;): end = content.find(\u0026#39;---\u0026#39;, 3) if end \u0026gt; 0: front_matter = content[3:end].strip() body = content[end+3:].strip() self.total_words += len(body.split()) self.parse_front_matter(front_matter) def parse_front_matter(self, front_matter: str): \u0026#34;\u0026#34;\u0026#34;Parse YAML front matter\u0026#34;\u0026#34;\u0026#34; for line in front_matter.split(\u0026#39;\\n\u0026#39;): if line.startswith(\u0026#39;categories:\u0026#39;): pass # Simplified handling elif line.startswith(\u0026#39;tags:\u0026#39;): pass # Simplified handling elif line.startswith(\u0026#39; - \u0026#39;): tag = line.strip().lstrip(\u0026#39;- \u0026#39;) self.tags[tag] = self.tags.get(tag, 0) + 1 def get_report(self) -\u0026gt; dict: \u0026#34;\u0026#34;\u0026#34;Generate statistical report\u0026#34;\u0026#34;\u0026#34; return { \u0026#39;total_posts\u0026#39;: len(self.posts), \u0026#39;total_words\u0026#39;: self.total_words, \u0026#39;categories\u0026#39;: sorted( self.categories.items(), key=lambda x: x[1], reverse=True ), \u0026#39;tags\u0026#39;: sorted( self.tags.items(), key=lambda x: x[1], reverse=True )[:20], } if __name__ == \u0026#39;__main__\u0026#39;: stats = BlogStats(\u0026#39;./content/post\u0026#39;) stats.scan_posts() report = stats.get_report() print(json.dumps(report, ensure_ascii=False, indent=2)) Hugo Built-in Shortcodes Hugo comes with some very useful Shortcodes:\nFigure (Enhanced Images) {{\u0026lt; figure src=\u0026#34;image.jpg\u0026#34; title=\u0026#34;Image Title\u0026#34; caption=\u0026#34;Image Caption\u0026#34; \u0026gt;}} This adds titles and captions, which the standard ![](image.jpg) doesn\u0026rsquo;t support easily.\nGist {{\u0026lt; gist username gist-id \u0026gt;}} Embeds a GitHub Gist code snippet directly.\nHow to Create Your Own Shortcode Simply create an HTML file under layouts/shortcodes/. For example, create badge.html:\n\u0026lt;!-- layouts/shortcodes/badge.html --\u0026gt; \u0026lt;span style=\u0026#34; display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; background: {{ .Get 1 | default `var(--accent-color)` }}; color: {{ .Get 2 | default `#fff` }}; \u0026#34;\u0026gt;{{ .Get 0 }}\u0026lt;/span\u0026gt; Usage: {{\u0026lt; badge \u0026quot;New\u0026quot; \u0026quot;#059669\u0026quot; \u0026gt;}}\n","date":"2026-04-14T00:00:00Z","permalink":"/hugo-stack-starter/en/post/shortcodes-guide/","title":"Shortcodes Guide"},{"content":"The styling system of this template is based on SCSS. All custom styles are located in the assets/scss/ directory, so you do not need to modify the original theme files.\nModify Theme Colors Open assets/scss/custom.scss and modify the CSS variables inside :root:\n:root { /* Light Mode */ --accent-color: #1B365D; /* Accent color: buttons, links, highlights */ --accent-color-darker: #202A44; /* Darker accent: hover states */ --accent-color-text: #FFF; /* Text color on top of the accent color */ --body-background: #f8f7f2; /* Page background */ --card-background: #fdfdfb; /* Card background */ --body-text-color: #2D3748; /* Body text color */ \u0026amp;[data-scheme=\u0026#34;dark\u0026#34;] { /* Dark Mode Overrides */ --body-background: #101214; --card-background: #1c2128; /* ... */ } } After saving, Hugo automatically recompiles and the browser refreshes instantly.\nPopular Color Palette References Purple Scheme:\n--accent-color: #7C3AED; --accent-color-darker: #6D28D9; Green Scheme:\n--accent-color: #059669; --accent-color-darker: #047857; Orange Scheme:\n--accent-color: #EA580C; --accent-color-darker: #C2410C; Modify Code Block Styles Code block related styles are in assets/scss/partials/custom-components/_code.scss.\nDisable Mac-Style Title Bar If you don\u0026rsquo;t like the macOS three-color dots, comment out the following code:\n/* Comment out this before pseudo-element to disable the title bar */ /* .article-content .highlight:before { ... } */ Change Collapse Threshold In _code.scss and layouts/_partials/footer/custom.html, change 600 to your desired pixel value:\n/* _code.scss */ \u0026amp;.collapsed { max-height: 400px; /* Change to your desired height */ } /* JS in custom.html */ const MAX_HEIGHT = 400; /* Keep consistent with CSS */ Add Custom Fonts Add Google Fonts in assets/scss/custom.scss and set the font family:\n/* Import font */ @import url(\u0026#39;https://fonts.googleapis.com/css2?family=Outfit:wght@400;700\u0026amp;display=swap\u0026#39;); /* Apply to body */ body { font-family: \u0026#39;Outfit\u0026#39;, sans-serif; } /* Apply to article content */ .article-content { font-family: \u0026#39;Outfit\u0026#39;, sans-serif; line-height: 1.9; } Component Style Files Overview File Purpose custom.scss Global variables, TOC scrollbar _code.scss All code block styles _footer.scss Footer runtime button _homepage-grid.scss Homepage two-column grid _mobile-menu.scss Mobile top navigation bar _timeline.scss Timeline Shortcode styles _title.scss Title divider Shortcode styles Each file has a single responsibility and can be modified independently without affecting others.\nDisable Homepage Grid Layout If you prefer the traditional single-column list, edit params.toml:\n[homepage] grid = false Overriding Theme Layouts If you need to modify other layout files of the theme, simply create a file with the same name in the layouts/ directory to override it:\nFor example, to modify the article page layout, view the original file at hugo-theme-stack-v4/layouts/single.html, then copy it to layouts/single.html in your project root and modify it.\nHugo\u0026rsquo;s override mechanism prioritizes files in the project\u0026rsquo;s root directory over the theme\u0026rsquo;s files.\n","date":"2026-04-13T00:00:00Z","permalink":"/hugo-stack-starter/en/post/custom-style/","title":"Style Customization Guide"}]