hugo-terminal-theme — Hugo 作品集模板

SHA-256: cd105cc40af376769e486d9b4ceb7eb30b28b4eab9c3e9de7618b17cdee5942c

2026-10-01T00:16:54.855Z

# Hugo Terminal Theme

A minimal, terminal-inspired Hugo theme with dark/light mode support. Zero external dependencies — no npm, no JavaScript frameworks.

**Demo**: [rpsadarangani.github.io/hugo-terminal-theme](https://rpsadarangani.github.io/hugo-terminal-theme/)

## Features

- Dark/light mode toggle (persisted via localStorage, respects time of day)
- No flash of unstyled content (FOUC) on page load
- Career timeline component driven by front matter
- Skills grid with categories
- Blog with date-sorted posts, tags, and pagination
- Setup/gear page with terminal-styled sections
- Responsive design (mobile breakpoint at 600px)
- Hugo Pipes: CSS & JS concatenated, minified, fingerprinted with SRI
- Zero inline scripts — fully CSP compatible
- Open Graph and Twitter Card meta tags
- JSON-LD structured data (Person, BlogPosting)
- RSS feed (auto-generated by Hugo)
- Self-hosted JetBrains Mono font with preload
- Print styles
- Optional Giscus comments integration

## Quick Start

```bash
# Create a new Hugo site
hugo new site mysite
cd mysite

# Add the theme
git submodule add https://github.com/rpsadarangani/hugo-terminal-theme.git themes/terminal

# Copy example content
cp -r themes/terminal/exampleSite/content .
cp themes/terminal/exampleSite/hugo.toml .

# Start the dev server
hugo server -D
```

## Configuration

All configuration is in `hugo.toml`:

```toml
baseURL = "https://example.com/"
languageCode = "en-us"
title = "your name"
theme = "terminal"
[pagination]
  pagerSize = 7

[params]
  description = "your tagline"
  author = "Your Name"
  terminalPrompt = "~ you_"           # header branding with blinking cursor
  twitter = "@yourhandle"             # optional: twitter card meta tag

  # Optional: structured data for homepage
  # jobTitle = "Senior Software Engineer"
  # worksFor = "Acme Corp"
  # sameAs = ["https://github.com/you", "https://linkedin.com/in/you"]

  # Optional: giscus comments (https://giscus.app)
  # [params.giscus]
  #   repo = "your-username/your-repo"
  #   repoId = "your-repo-id"
  #   category = "Blog Comments"
  #   categoryId = "your-category-id"

[menu]
  [[menu.main]]
    name = "/home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "/blog"
    url = "/blog/"
    weight = 2
  [[menu.main]]
    name = "/contact"
    url = "/contact/"
    weight = 3

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
    noClasses = false
```

## Content Structure

```
content/
├── _index.md          # Home page (with timeline, education, skills)
├── blog/
│   ├── _index.md      # Blog list page
│   └── my-post.md     # Blog post
├── contact.md         # Contact page
├── setup/
│   └── _index.md      # Setup/gear page
└── privacy.md         # Optional: privacy policy
```

## Home Page Front Matter

The home page supports career timeline, education, and skills via front matter:

```yaml
---
title: "hey, i'm jane"
timeline:
  - role: "Senior Engineer"
    company: "Acme Corp"
    date: "01.2024 — present"
    current: true               # adds glow effect on timeline dot
  - role: "Software Engineer"
    company: "Startup Inc"
    date: "06.2021 — 12.2023"
education:
  - degree: "BSc Computer Science"
    school: "State University"
    date: "2015 — 2019"
skills:
  languages: ["Go", "Python", "TypeScript"]
  cloud: ["AWS", "GCP"]
  tools: ["Kubernetes", "Terraform"]
---

your intro text here.
```

## Blog Post Front Matter

```yaml
---
title: "my post title"
date: 2026-01-01
lastmod: 2026-01-01
description: "shown in the post list and meta tags"
tags: ["go", "kubernetes"]
---
```

## Customization

### Colors

All colors are CSS custom properties in `assets/css/variables.css`. Override them by creating your own CSS file:

```css
/* Dark theme */
:root, [data-theme="dark"] {
  --accent: #00ff88;        /* green accent */
  --bg: #0a0a0a;            /* background */
  --text: #e0e0e0;          /* primary text */
}

/* Light theme */
[data-theme="light"] {
  --accent: #007744;
  --bg: #fafafa;
  --text: #1a1a1a;
}
```

### Terminal Prompt

Set `terminalPrompt` in your config to customize the header branding:

```toml
[params]
  terminalPrompt = "~ myname_"
```

### Nav Links

Menu items are prefixed with `/` by convention (e.g., `/home`, `/blog`). Configure them in `[menu]`.

### Content Security Policy

This theme uses zero inline scripts. A recommended CSP header:

```
Content-Security-Policy: default-src 'self'; script-src 'self' https://giscus.app; style-src 'self' 'unsafe-inline' https://giscus.app; frame-src https://giscus.app; img-src 'self' data:; font-src 'self'; connect-src 'self'
```

## Requirements

- Hugo Extended v0.120.0 or later

## License

MIT

## Credits

Created by [Rahul Sadarangani](https://rahulsadarangani.com).