Hugo Theme Hello Friend NG 使用教程

Hugo Theme Hello Friend NG 使用教程

hugo-theme-hello-friend-ng Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing! 项目地址: https://gitcode.com/gh_mirrors/hu/hugo-theme-hello-friend-ng

1. 项目介绍

Hugo Theme Hello Friend NG 是一个基于 Hugo 的简单而优雅的博客主题。它受到了 Hello Friend 和 Hermit 主题的启发，并包含了多种功能，如暗/亮模式切换、代码高亮、社交图标、评论系统等。此主题非常适合快速搭建个人博客或网站。

2. 项目快速启动

首先，确保你已经安装了 Hugo。如果还没有安装，请访问 Hugo 官方网站获取安装指南。

接下来，通过以下步骤快速启动你的 Hugo 项目：

# 克隆主题到本地
git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

# 创建新的 Hugo 网站
hugo new site mysite

# 将主题添加到你的网站
cd mysite
git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

# 创建第一篇文章
hugo new posts/first-post.md

# 编辑你的文章
# 打开 posts/first-post.md 文件，并添加以下内容：
---
title: "我的第一篇文章"
date: 2023-04-01
draft: true
---

# 编写你的文章内容

# 启动 Hugo 服务器
hugo server -D

# 在浏览器中打开 http://localhost:1313 查看你的网站

3. 应用案例和最佳实践

添加社交图标

你可以在配置文件中添加社交图标链接，如下所示：

[params.social]
  [[params.social]]
    name = "GitHub"
    url = "https://github.com/yourusername"
  [[params.social]]
    name = "Twitter"
    url = "https://twitter.com/yourusername"

代码高亮

使用 Hugo 的内置短代码来高亮代码：

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

### 添加音频支持

在你的文章的 front matter 中添加音频路径：

```yaml
audio: "path/to/file.mp3"

然后在文章中插入音频短代码：

{{ if .Params.audio }}
<audio controls>
  <source src="{{ .Params.audio }}" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
{{ end }}

4. 典型生态项目

Hugo 社区中有许多基于 Hello Friend NG 主题的生态项目，例如：

• 个人博客
• 企业网站
• 项目文档页面
• 社区论坛

你可以通过查看 GitHub 上基于 Hello Friend NG 主题的项目来获取更多灵感。

hugo-theme-hello-friend-ng Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing! 项目地址: https://gitcode.com/gh_mirrors/hu/hugo-theme-hello-friend-ng