Dream 主题

星期四, 12月 26, 2024 | 6分钟阅读

MyraZ
Dream 主题

关于Dream主题的安装与配置！

环境准备

  • 一个 GitHub 账号（自行注册）
  • 一个 https://vercel.com/ 账号（该账号无需注册，直接使用 GitHub 登录即可）
  • 安装 Git（本文略）
  • 安装 Hugo（见下文）

安装 Hugo

  • 解压hugo_extended_withdeploy_0.139.4_windows-amd64.zip文件，例如解压到D:\hugo
  • 将解压目录配置为环境变量
  • 检查环境变量
C:\Users\mrhelloworld>hugo version
hugo v0.139.4-3afe91d4b1b069abbedd6a96ed755b1e12581dfe+extended+withdeploy windows/amd64 BuildDate=2024-12-09T17:45:23Z VendorInfo=gohugoio

安装主题

hugo new site mrhelloworld_dream
cd mrhelloworld_dream
git clone https://github.com/g1eny0ung/hugo-theme-dream.git themes/dream

配置主题

　　使用文本准备好的hugo.toml文件（内容如下）覆盖mrhelloworld_dream/hugo.toml文件。

# 已发布站点的绝对 URL（协议、主机、路径和尾部斜杠）
baseurl = "https://mrhelloworld.com"
defaultContentLanguage = "zh"
# languageCode 用于设置 <html> 标记中的 lang 属性
languageCode = "zh-Hans"
# 网站标题
title = "哈喽沃德先生"
# 网站主题
theme = "dream"

# 可选，关于 robots.txt 的设置
enableRobotsTXT = true
# 由于博客是用中文写的，需要设置它来更正阅读时间 {{ .ReadingTime }}
hasCJKLanguage = true

# [services]
# Disqus 评论服务
# [services.disqus]
# shortname = ""
# Google 网站分析服务
# [services.googleAnalytics]
# ID = ""

[params]
# 禅模式，沉浸式阅读
# zenMode = true

# 浅色主题
lightTheme = "emerald"
# 深色主题
darkTheme = "forest"

# 定义浅色主题的全局背景图像
# backgroundImage = "img/background.jpg"
# 定义深色主题的全局背景图像
# backgroundImageDark = ""

# 网站作者，<meta name="author" content="哈喽沃德先生" />
author = "哈喽沃德先生"
# 网站详细描述，例如 <meta name="description" content="哈喽沃德先生的生活记录～" />
description = "哈喽沃德先生的生活记录～"
# 作者头像
avatar = "me/mrhelloworld.png"
# 网站全局标题
headerTitle = "哈喽沃德先生的博客"
# 座右铭
motto = "道阻且长，行则将至；行而不辍，未来可期。"

# 页脚底部文本，用于在网站页脚底部的 siteStartYear 字段下方显示文本。此字段支持 HTML
footerBottomText = "　"

# 启用 RSS
rss = true

# Utterances 评论服务的 GitHub 评论仓库
# Utterances 是基于 GitHub Issues 构建的轻量级评论小组件。通过设置 utterancesRepo，每个帖子都将有一个由 GitHub Issues 提供支持的评论部分
# utterancesRepo = ""

# Valine 评论服务
# valine = true
# LEANCLOUD_APP_ID = ""
# LEANCLOUD_APP_KEY = ""

# Waline 评论服务
# waline = true
# walineServer = ""

# email = ""

# 设置网站的开始年份，它将在网站页脚中显示为 siteStartYear - currentYear（例如：2016 - 2020）
siteStartYear = 2024

# 网站图标，自定义网站图标，将其放在 static 文件夹中
favicon = "favicon.ico"

# 是否开启自定义语法高亮
# Syntax highlighting
# customSyntaxHighlighting = true

# options
# 使导航栏在滚动时具有粘性
# stickyNav = true
# 对导航项重新排序，默认值为：reorderNavItems = ["search", "rss", "posts", "categories", "tags"]
# reorderNavItems = ["search", "rss", "posts", "categories", "tags"]
# 将特定导航项折叠到下拉菜单中。在移动端中，此参数不会生效，因为所有导航项都会折叠到下拉菜单中
# collapseNavItems = ["posts", "categories", "tags"]
# 如果未在文章的 front matter 中指定封面字段，则摘要卡中将显示默认封面图像。如果不希望此行为，可以将此参数设置为 true
# noDefaultSummaryCover = true
# 是否在文章页面中显示目录
showTableOfContents = true
# 是否在文章页面中显示摘要封面图片
showSummaryCoverInPost = true
# 是否在在文章页面中显示上一篇文章和下一篇文章链接
showPrevNextPost = true
# 对单个文章页面中的分享按钮重新排序，默认值为：reorderShares = ["x", "facebook", "whatsapp"]
# reorderShares = ["x", "facebook", "whatsapp"]

# [params.navItems]

# [params.advanced]
# 添加自定义 CSS 文件。例如，在 static 下创建一个名为 css 的文件夹，然后将 custom.css 添加到其中
# customCSS = ["css/custom.css"]
# 添加自定义 JS 文件
# customJS = []

# [params.experimental]
# 使用 Luxon 库替换 Hugo 内置的 .Format 函数。这可以更灵活地定义时间格式
jsDate = true
# 日期格式化
jsDateFormat = "yyyy年MM月dd日"

启动测试

cd mrhelloworld_dream
hugo server

　　访问：http://localhost:1313/，效果如下。

![](E:\Informations\MSB\technical_information\git\myraZ_dream\content\posts\Dream 主题\index.assets\image-20241212161209721.png)

页面配置

Post Page 文章

cd mrhelloworld_dream
hugo new content content/posts/Dream 主题/index.md

　　文章内容如下。

---
title: Dream 主题
date: 2024-12-12T21:08:36+08:00
lastmod: 2024-12-12T21:08:36+08:00
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# images:
#   - /img/cover.jpg
categories:
  - category1
tags:
  - tag1
  - tag2
# nolastmod: true
draft: true
---

Cut out summary from your post content here.

<!--more-->

The remaining content of your post.

Parameters 参数

Parameter Description Auto-generated
title 文章标题 Yes
date 发布日期 Yes
lastmod 文章最后修改日期 Yes
author 文章作者，如果未设置，将使用全局作者 No
avatar 作者头像 No
authorlink 当前作者的自定义链接 No
cover 文章封面图片 No
images 用于 og:image 元标记 No
categories 文章分类 No
tags 文章标签 No
nolastmod 禁用最后修改日期 No

Alerts 警告

> [!NOTE]
> Useful information that users should know, even when skimming content.
 
> [!TIP]
> Helpful advice for doing things better or more easily.
 
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
 
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
 
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

　　如果要更改警报的默认标题，可以添加 markdown 属性 命名文本如下所示：

> [!NOTE]
> The default alert title is changed to "Hello".
{text="Hello"}

修改前言

　　修改文章前言如下。

---
title: Dream 主题
date: 2024-12-12T21:08:36+08:00
# lastmod: 2024-12-12T21:08:36+08:00
author: 哈喽沃德先生
avatar: /me/mrhelloworld.png
# authorlink: https://mrhelloworld.com
cover: dream.png
images:
  - dream.png
categories:
  - Hugo
  - category1
tags:
  - Hugo
  - Theme
  - tag1
  - tag2
nolastmod: true
# draft: true
---

　　注意：dream.png封面图片的名称支持自定义，但是目录结构必须如下。

content
├── posts
│   ├── Dream 主题
│   │   ├── index.md
│   │   └── dream.png

编写文章

注意：文章请按以下格式进行编写。

more 标签之前是缩略图中的文章简介。
<!--more-->
more 标签之后是文章的正文内容。

　　编写步骤：

  • 在mrhelloworld_dream/content/posts目录下创建一个见名知意的目录（支持中文），例如Dream 主题；
  • 进入该目录，新建index.md文档，将文章缩略图和index.md文档同路径存放；
  • 按格式要求编写文档内容。

About Page 关于我

cd mrhelloworld_dream
hugo new about/me.md

　　关于我内容如下。

---
title: Me
date: 2024-12-12T16:05:37+08:00
draft: true
---

Cut out summary from your post content here.

<!--more-->

The remaining content of your post.

　　然后在 about 文件夹中创建一个 index.md 并将以下内容放入其中：

---
headless: true
---

　　为什么需要创建 index.md。因为 Dream 不希望 about 文件夹输出为RegularPages（普通页）。

　　有两种方法可以访问 About （关于） 页面：

  • 单击右上角导航栏中的 About 链接；
  • 单击左上角导航栏中的头像。

　　可以添加多个 .md 文件，它们都将在砌体布局中一一呈现。

hugo new about/desc1.md
hugo new about/desc2.md

![](E:\Informations\MSB\technical_information\git\myraZ_dream\content\posts\Dream 主题\index.assets\image-20241212161251302.png)

Archives Page 档案

　　档案页面是按时间轴列出的所有文章的列表。它将呈现为 /posts。

　　可以通过在 content/posts 中放置 _index.md 来自定义档案页面的标题。

　　例如，将下面的 _index.md 粘贴到下面：

---
title: Archives
---
 
All posts by timeline.

　　这些将呈现为：

<h1 class="text-3xl">Archives</h1>
<p class="text-sm">All posts by timeline.</p>

　　一个是标题，另一个是描述。

　　默认情况下，时间线按年份分组。可以使用自定义布局按月份或任何其他方式进行分组。这可以通过在 _index.md 文件的 front matter 中添加 groupLayout 字段来完成。

　　例如，在 content/posts/_index.md 中：

---
groupLayout: Jan 2006
---

　　关于布局的定义方法，请参考 layout string。

Search 搜索

　　Dream 具有内置的搜索功能，可以搜索网站上的内容。通过将 _index.md 文件添加到 content/search 目录来启用它。此文件可以为空，但必须存在。Dream 将自动生成搜索页面 （/search）。

编译网站

　　编译 md 文档为 html css，在网站根目录下打开 cmd，输入hugo。

　　编译后的文件在网站根目录下的public目录中。

上传网站

　　上传编译后的文件至 GitHub。

新建仓库

![](E:\Informations\MSB\technical_information\git\myraZ_dream\content\posts\Dream 主题\index.assets\image-20241213110532199.png)

添加远程仓库

　　进入mrhelloworld_dream/public，git base here 添加远程仓库。

git init
git remote add origin git@github.com:5mrhelloworld/dream.git

编写脚本

　　编写push.bat文件。

d:
cd D:\mrhelloworld_dream\public
git config --global user.name "mrhelloworld"
git config --global user.email "mrhelloworld@126.com"
git add .
git commit -m "..."
git branch -M main
git push origin main
pause

　　修改后双击运行该脚本上传文件。

关联仓库

使用 Vercel 关联仓库。

  • 创建 GitHub 仓库；
  • 编写前端项目（通过 Hugo 框架完成）；
  • 编写 .bat 脚本；
  • 上传前端项目；
  • 通过 https://vercel.com/ 使用 GitHub 账号登录；
  • 在 Vercel 中创建项目并选择 GitHub 仓库进行构建；
  • 网站创建成功。
下一页 FreeMarker

© 2024 - 2025 雪中烛

　

我是谁

我是MyraZ.

👉百度

Me

Cut out summary from your post content here.

The remaining content of your post.

Desc2

Cut out summary from your post content here.

The remaining content of your post.