molyun

主题功能一览

Sun, 05 Apr 2026 00:00:00 +0000

核心特性

响应式设计

完美适配桌面、平板和手机，所有页面均经过精心优化。

主题切换

支持亮色、暗色和跟随系统三种模式，用户偏好通过 localStorage 持久化。

多语言

完整的中英文双语支持，涵盖所有页面和交互文本。

极速加载

纯静态页面，无后端依赖
CSS/JS 自动压缩 + 指纹缓存
图片懒加载
按需加载数学公式

页面模块

首页落地页

诗句轮播（可配置中英文各 6 条）
主题/语言切换按钮
键盘回车快速进入

文章系统

卡片式主页列表
文章详情页（目录、字数统计、阅读时间）
分类和标签系统
上下篇导航
作者信息框（数据驱动）
CC BY-NC-SA 4.0 协议展示

时刻页

微信朋友圈风格
支持发布文字、图片、音乐、视频
点赞和评论功能
配置可控（发布/点赞/评论开关）

工具页

10 大分类工具集
数据驱动（data/tools.yaml）
点击子项展示模拟界面

归档页

按年份分组的时间线
标签弹幕（弹幕式标签云）
点击标签过滤文章

工坊页

CSS Grid 项目卡片
状态标签（进行中/草稿/已完成）
数据驱动（data/works.yaml 或 params.works）

评论系统

支持 5 种评论系统：

系统	特点
Waline	功能丰富，支持表情和统计
Giscus	基于 GitHub Discussions
Twikoo	轻量，支持多种部署
Artalk	自托管，功能完善
Utterances	基于 GitHub Issues

短代码

短代码	用途
`audio-163`	网易云音乐
`audio-qq`	QQ 音乐
`audio-kugou`	酷狗音乐
`video-bilibili`	Bilibili 视频
`video-youtube`	YouTube 视频
`video-tencent`	腾讯视频
`video-youku`	优酷视频
`katex`	数学公式
`code`	带标题的代码块

SEO

Open Graph 元标签
Twitter Card
结构化数据
Sitemap 自动生成
RSS 订阅

统计

Google Analytics (GA4)
百度统计

CMS

Decap CMS 集成
可视化内容管理
数据文件编辑

站点介绍

Wed, 01 Apr 2026 00:00:00 +0000

关于 MOL空间

MOL空间是一个基于 Hugo 构建的极简个人站点，融合了博客、时刻、工具和工坊等功能模块。

设计理念

极简主义

去除一切不必要的元素，让内容成为主角。干净的排版、充足的留白、克制的配色。

数字花园

不同于传统博客的线性时间流，MOL空间更像一座数字花园——想法在这里播种、生长、连接。

中英双语

完整的中英文支持，一键切换语言，所有内容都有双语版本。

功能模块

模块	路径	说明
首页	`/`	诗句轮播落地页
主页	`/home/`	文章卡片列表
时刻	`/moments/`	朋友圈风格动态
工具	`/tools/`	在线实用工具集
工坊	`/work/`	创作项目展示
归档	`/archive/`	文章时间线 + 标签弹幕
邮件	`/email/`	企业邮箱登录
关于	`/about/`	个人介绍与联系方式

技术栈

Hugo — 极速静态站点生成器
Go 模板 — 灵活的模板系统
CSS 变量 — 主题切换（亮/暗/跟随系统）
Vanilla JS — 零依赖前端交互
Font Awesome 6 — 图标库
Decap CMS — 可选的内容管理

开源

主题代码开源，欢迎 Star 和贡献。

统计分析指南

Sat, 28 Mar 2026 00:00:00 +0000

概述

主题内置了 Google Analytics 和百度统计的支持，可以在 params.toml 中一键启用。

Google Analytics

获取跟踪 ID

登录 Google Analytics
创建媒体资源，获取 Measurement ID（格式：G-XXXXXXXXXX）

配置

[analytics]
 enable_google = true
 google_ga_id = "G-XXXXXXXXXX"

启用后，主题会自动在每个页面加载 GA4 跟踪代码。

百度统计

获取跟踪代码

登录百度统计
添加网站，获取跟踪代码中的站点 ID

配置

[analytics]
 enable_baidu = true
 baidu_site_id = "your-site-id"

同时使用

两个统计服务可以同时启用：

[analytics]
 enable_google = true
 google_ga_id = "G-XXXXXXXXXX"
 enable_baidu = true
 baidu_site_id = "your-site-id"

隐私考虑

统计代码仅在配置启用后加载
建议在隐私政策中说明使用的统计服务
可配合 Cookie 同意弹窗使用

CMS 使用指南

Wed, 25 Mar 2026 00:00:00 +0000

什么是 Decap CMS

Decap CMS（前身为 Netlify CMS）是一个开源的内容管理系统，通过 Git 工作流管理站点内容。无需数据库，所有数据存储在 Markdown 文件中。

启用 CMS

1. 创建管理页面

在 static/admin/ 目录下创建两个文件：

static/admin/
├── index.html # CMS 入口页面
└── config.yml # CMS 配置文件

2. index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>内容管理</title>
 <script src="https://unpkg.com/decap-cms" crossorigin="anonymous"></script>
</head>
<body></body>
</html>

3. config.yml

backend:
 name: github
 repo: username/repo
 branch: main

media_folder: "static/img/uploads"
public_folder: "/img/uploads"

collections:
 - name: "posts_zh"
 label: "中文文章"
 folder: "content/zh/posts"
 create: true
 fields:
 - { label: "标题", name: "title", widget: "string" }
 - { label: "发布日期", name: "date", widget: "datetime" }
 - { label: "描述", name: "description", widget: "text" }
 - { label: "分类", name: "categories", widget: "list" }
 - { label: "标签", name: "tags", widget: "list" }
 - { label: "封面图", name: "image", widget: "image" }
 - { label: "正文", name: "body", widget: "markdown" }

数据文件集合

CMS 也可以管理 data/ 目录下的 YAML 数据文件：

评论系统配置

Fri, 20 Mar 2026 00:00:00 +0000

概述

主题支持 5 种评论系统，文章页和时刻页可以独立配置不同的评论系统。

在 config/_default/params.toml 中配置：

[comment.article]
 provider = "waline" # 文章页评论

[comment.moment]
 provider = "twikoo" # 时刻页评论

Waline

Waline 是一款功能丰富的评论系统，支持表情、访问量统计、评论排序等。

部署

参考 Waline 官方文档部署服务端。

配置

[comment.article]
 provider = "waline"
 waline_server_url = "https://your-waline.vercel.app"
 waline_emoji = ["https://cdn.jsdelivr.net/npm/@waline/emojis/weibo"]
 waline_visitor = true
 waline_comment_sorting = "latest"
 waline_pageview = true

Giscus

基于 GitHub Discussions 的评论系统，适合技术博客。

前置条件

仓库必须为公开
安装 Giscus App
在 giscus.app 获取配置

配置

[comment.article]
 provider = "giscus"
 giscus_repo = "username/repo"
 giscus_repo_id = "R_xxx"
 giscus_category = "Announcements"
 giscus_category_id = "DIC_xxx"
 giscus_mapping = "pathname"
 giscus_label = "comment"

Twikoo

轻量级评论系统，支持多种部署方式。

[comment.article]
 provider = "twikoo"
 twikoo_env_id = "your-env-id"
 twikoo_region = "ap-shanghai"

Artalk

自托管评论系统，功能完善。

短代码使用教程

Sun, 15 Mar 2026 00:00:00 +0000

什么是短代码

短代码（Shortcode）是 Hugo 提供的模板片段，可以在 Markdown 文章中嵌入复杂内容。使用 {{< shortcode >}} 语法调用。

音频嵌入

网易云音乐

{{< audio-163 id="1234567890" >}}

QQ 音乐

{{< audio-qq id="003ZPMGY3SiLbZ" >}}

酷狗音乐

{{< audio-kugou id="12345" >}}

视频嵌入

Bilibili

{{< video-bilibili bvid="BV1xx411c7mD" >}}

支持自动 16:9 比例响应式布局。

YouTube

{{< video-youtube id="dQw4w9WgXcQ" >}}

腾讯视频

{{< video-tencent id="v1234abcd >}}

优酷视频

{{< video-youku id="XNTE12345 >}}

代码块

使用 code 短代码可以添加标题栏：

{{< code language="python" title="hello.py" >}}
def hello():
 print("Hello, World!")
{{< /code >}}

数学公式

使用 katex 短代码在文章中插入数学公式：

部署指南

Tue, 10 Mar 2026 00:00:00 +0000

本地构建

部署前先在本地验证构建：

hugo --gc --minify

public/ 目录即为构建产物，可上传到任何 Web 服务器。

Cloudflare Pages

将代码推送到 GitHub/GitLab
登录 Cloudflare Dashboard → Pages → 创建项目
连接仓库，设置构建命令：
- Build command: hugo --gc --minify
- Build output directory: public
点击部署，等待完成后即可获得 URL

自定义域名

在 Cloudflare Pages 项目设置中添加自定义域名，按提示配置 DNS 记录。

Vercel

登录 Vercel → New Project → 导入仓库
Framework Preset 选择 Hugo
环境变量添加 HUGO_VERSION（如 0.165.0）
点击 Deploy

Netlify

登录 Netlify → New site from Git
选择仓库，设置：
- Build command: hugo --gc --minify
- Publish directory: public
添加环境变量 HUGO_VERSION = 0.165.0

GitHub Pages

使用 GitHub Actions 自动部署，创建 .github/workflows/deploy.yml：

配置指南

Thu, 05 Mar 2026 00:00:00 +0000

配置文件结构

主题使用 Hugo 的多文件配置结构，所有配置文件位于 config/_default/ 目录下：

config/_default/
├── config.toml # 站点基础配置
├── params.toml # 主题参数（18 个配置块）
├── menus.toml # 导航菜单
└── taxonomies.toml # 分类法定义

站点基本信息

site_name = "molyun"
logo = "/img/logo.png"
show_logo = true
default_author = "zhizhi"
enable_lang_switch = true
enable_theme_switch = true
description = "个人站点描述"
author = "molyun"

首页落地页

[landing]
 quotes_zh = ["海上生明月 & 天涯共此时", ...]
 quotes_en = ["The moon rises over the sea...", ...]

诗句支持中英文各 6 条，随机展示。

主页列表

[home]
 paginate = 20 # 每页文章数
 columns = 4 # 卡片列数
 show_images = true # 是否显示封面图
 summary_length = 120

文章详情

[article]
 show_toc = true # 显示目录
 toc_levels = ["h2", "h3"] # 目录层级
 show_word_count = true # 字数统计
 show_author_box = true # 作者信息框
 show_license = true # 版权协议
 donate_max_qr = 6 # 赞赏码最大数量

评论系统

支持 5 种评论系统，文章和时刻页可独立配置：

快速开始

Sun, 01 Mar 2026 00:00:00 +0000

环境准备

在开始之前，请确保你的开发环境满足以下要求：

Hugo v0.120.0 或更高版本（推荐 extended 版）
Git 用于版本控制
一个你喜欢的文本编辑器

安装 Hugo

macOS

brew install hugo

Windows

winget install Hugo.Hugo.Extended

Linux

参考 Hugo 官方安装指南。

创建站点

hugo new site my-site
cd my-site

安装主题

将主题放入 themes/ 目录：

git clone https://github.com/your-repo/hugo-theme-molyun themes/hugo-theme-molyun

在配置文件中指定主题：

theme = "hugo-theme-molyun"

基础配置

编辑 config/_default/config.toml：

baseURL = "https://your-site.com/"
title = "我的站点"
theme = "hugo-theme-molyun"
languageCode = "zh-CN"
defaultContentLanguage = "zh"

创建第一篇文章

hugo new posts/my-first-post.md

编辑生成的文件，写入你的内容，然后：

hugo server

打开浏览器访问 http://localhost:1313 即可预览。

下一步

阅读配置指南了解所有配置选项
阅读部署指南将站点发布到互联网

数字花园的种植艺术

Tue, 10 Feb 2026 00:00:00 +0000

什么是数字花园

数字花园是一种不同于传统博客的内容组织方式。它不是按时间倒序排列的文章列表，而是一个有机生长的知识网络。

种植的几个原则

1. 持续耕耘

不要期待一次种植就能收获。定期回来照料你的思想，让它们随着时间发展。

2. 相互联结

让想法之间建立联系，形成知识网络。一个成熟的想法会连接到多个相关概念。

3. 公开生长

不要等到完美才分享。让思想在公开的环境中生长，获得反馈和启发。

我的种植实践

我开始用 Hugo 搭建这个站点时，就把它当作一个数字花园。这里有不完善的想法，有待发展的观点，也有成熟的文章。

收获的季节

当你持续耕耘一段时间后，会惊喜地发现：

想法之间的连接越来越丰富
新的想法更容易生根发芽
你能清晰地看到自己的思维成长轨迹

总结

数字花园是一种长期主义的内容策略。不追求短期的流量和热度，而是专注于思想的深度和连接。

极简主义的设计原则

Sun, 01 Feb 2026 00:00:00 +0000

少即是多

极简主义不仅仅是减少元素，更重要的是在简化过程中保留核心价值。每一个设计决策都应该回答：这个元素是否必要？

功能与形式的平衡

真正的极简主义设计需要在以下方面找到平衡：

视觉效果: 干净、留白、层次分明
功能性: 每个元素都有明确目的
用户体验: 直观、高效、愉悦

实践案例

以个人博客主题为例，我们只保留了最核心的功能：

内容展示: 清晰的文章阅读体验
导航: 简单的页面跳转
交互: 必要的评论和分享

极简设计示例

总结

极简主义不是目的，而是手段。通过去除不必要的干扰，让用户更专注于内容本身。

用 Hugo 搭建个人站点的心路历程

Thu, 15 Jan 2026 00:00:00 +0000

为什么选择 Hugo

在尝试了 WordPress、Hexo、Jekyll 之后，最终选择了 Hugo。原因很简单：

速度快 — Go 编写的构建引擎，千篇文章也能秒级构建
单文件部署 — 生成的纯静态文件，任何 Web 服务器都能托管
灵活的模板系统 — Go 模板虽然学习曲线陡峭，但功能强大

主题开发要点

开发这个主题时，最核心的设计理念是极简：

:root {
 --bg: #fafafa;
 --text: #333;
 --card-bg: #fff;
 --border: #e8e8e8;
}

通过 CSS 变量实现主题切换，配合 localStorage 持久化用户偏好。

数学公式支持

主题支持 LaTeX 公式，行内公式如 $E = mc^2$，以及独立公式：

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

总结

搭建个人站点的过程本身就是一次学习之旅。不追求完美，只追求表达。

提示

如果你也想搭建自己的 Hugo 站点，建议从官方文档开始：gohugo.io