自定义 on KOK博客

颜色主题

Mon, 01 Jan 0001 00:00:00 +0000

颜色主题

PrimeEdge 支持深色模式和自定义主题色，你可以根据喜好调整博客的整体色调。

深色模式

自动切换

主题默认跟随系统深色模式设置，无需额外配置。当系统切换到深色模式时，博客会自动适配。

手动切换

在 hugo.toml 中配置默认模式：

[params.theme]
  defaultTheme = "auto"    # 可选：auto、light、dark
  toggle = true            # 是否显示切换按钮

auto — 跟随系统设置
light — 始终使用浅色模式
dark — 始终使用深色模式

切换按钮

当 toggle = true 时，页面右下角会显示一个主题切换按钮，读者可以手动切换深浅模式。

自定义主题色

主色调

修改 hugo.toml：

[params.style]
  primaryColor = "#3b82f6"    # 主题主色（蓝色）

主色调会影响以下元素：

链接颜色
按钮背景
导航栏激活状态
分类标签
部分图标

CSS 变量覆盖

如需更精细地控制颜色，可在 assets/css/custom.css 中覆盖 CSS 变量：

:root {
  --primary: #3b82f6;          /* 主色 */
  --primary-rgb: 59, 130, 246; /* 主色 RGB */
  --text: #1f2937;             /* 正文颜色 */
  --text2: #6b7280;            /* 次要文字 */
  --bg-card: #ffffff;          /* 卡片背景 */
  --bg-solid: #f9fafb;         /* 纯色背景 */
  --border-light: #e5e7eb;     /* 边框颜色 */
}

[data-theme="dark"] {
  --text: #f3f4f6;
  --text2: #9ca3af;
  --bg-card: #1f2937;
  --bg-solid: #111827;
  --border-light: #374151;
}

玻璃拟态效果

PrimeEdge 在部分组件上使用了玻璃拟态（Glassmorphism）效果，可以通过 CSS 调整透明度：

字体设置

Mon, 01 Jan 0001 00:00:00 +0000

字体设置

PrimeEdge 支持自定义正文字体和代码字体，你可以使用系统字体或引入第三方字体。

使用系统字体

主题默认使用系统字体栈，无需额外配置即可获得良好的显示效果：

/* 默认字体栈 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

这种方式的优点是加载速度快，无需下载额外字体文件。

使用 Google Fonts

1. 选择字体

访问 Google Fonts 选择你喜欢的字体，推荐使用：

正文: Noto Sans SC、LXGW WenKai
标题: Noto Serif SC
代码: JetBrains Mono、Fira Code

2. 引入字体

在 layouts/partials/custom/head.html 中添加：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

3. 应用字体

在 assets/css/custom.css 中配置：

body {
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

code, pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

使用本地字体

1. 放置字体文件

将字体文件放入 static/fonts/ 目录：

static/fonts/
├── LXGWWenKai-Regular.woff2
├── LXGWWenKai-Bold.woff2
└── JetBrainsMono-Regular.woff2

2. 定义 @font-face

在 assets/css/custom.css 中：

自定义代码

Mon, 01 Jan 0001 00:00:00 +0000

自定义代码

PrimeEdge 支持在不修改主题文件的情况下注入自定义 CSS 和 JavaScript，方便你进行个性化调整。

自定义 CSS

创建自定义样式文件

在站点根目录创建 assets/css/custom.css：

/* 自定义样式 */
.custom-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

主题会自动加载此文件，无需额外配置。

常用自定义场景

修改文章宽度

.article-content {
  max-width: 800px;
}

隐藏特定元素

/* 隐藏文章页脚的作者信息 */
.article-footer .author-info {
  display: none;
}

添加自定义动画

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-animate {
  animation: fadeIn 0.5s ease-out;
}

自定义 JavaScript

创建自定义脚本文件

在站点根目录创建 assets/js/custom.js：

// 自定义脚本
console.log('PrimeEdge Custom Script Loaded');

// 示例：页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 你的代码
});

常用自定义场景

添加统计代码

// 百度统计
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?your-id";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

添加交互效果

// 点击复制代码
document.querySelectorAll('pre code').forEach(block => {
  block.addEventListener('click', function() {
    navigator.clipboard.writeText(this.textContent);
    // 显示提示
  });
});

自定义头部模板

如需在 <head> 中注入自定义内容，创建 layouts/partials/custom/head.html：

多语言

Mon, 01 Jan 0001 00:00:00 +0000

多语言

PrimeEdge 支持 Hugo 的多语言功能，你可以创建同一内容的不同语言版本。

启用多语言

在 hugo.toml 中配置：

defaultContentLanguage = 'zh'

[languages]
  [languages.zh]
    languageName = '简体中文'
    weight = 1
    contentDir = 'content'
  [languages.en]
    languageName = 'English'
    weight = 2
    contentDir = 'content.en'

目录结构

content/           # 默认语言内容（中文）
content.en/        # 英文内容

创建多语言内容

方式一：独立目录

为每种语言创建独立的内容目录：

content/
├── posts/
│   └── hello.md
content.en/
├── posts/
│   └── hello.md

方式二：同文件多语言

在同一文件中定义多语言内容（适用于少量页面）：

---
title: "文章标题"
translations:
  en:
    title: "Article Title"
---

语言切换

主题会在导航栏显示语言切换器，读者可以在不同语言版本之间跳转。如果当前页面没有对应语言的翻译，会跳转到该语言的首页。

配置语言专属参数

每种语言可以有独立的参数配置：

[languages.zh]
  languageName = '简体中文'
  [languages.zh.params]
    site_name = '我的博客'
    bio = '记录生活与技术'

[languages.en]
  languageName = 'English'
  [languages.en.params]
    site_name = "My Blog"
    bio = "Recording life and tech"

翻译主题界面

主题界面文本（如"阅读更多"“上一篇"等）支持多语言。如需添加新的翻译：