Pehtheme Hugo

Pehtheme Hugo 是一个受 Material Design v3 启发，使用 Tailwind CSS 精心制作的开源 Hugo 主题。

在线演示

查看在线演示：Pehtheme Hugo 在线演示

性能测试

要评估您使用 Pehtheme Hugo 的网站性能，请使用 PageSpeed Insights 工具。点击下面的按钮运行 PageSpeed Insights 测试

PageSpeed Insights 测试

特性

• 使用 Tailwind CSS 构建
• 首页显示特色文章（为了在首页展示特色文章，Hugo 主题使用 feature 标签数据）
• 水平菜单、内容标签列表
• 无 JavaScript 依赖
• 原生 JS 切换按钮
• 双栏博客布局
• 带有最近文章列表的侧边栏
• 语义化 HTML
• 侧边栏广告框

安装

要开始使用 Pehtheme Hugo，请按照以下步骤操作

1. 安装 Hugo 并创建一个新站点。有关详细说明，请参阅 Hugo 的快速入门指南。

2. 将 Pehtheme Hugo 添加到您的项目

   $ git clone https://github.com/fauzanmy/pehtheme-hugo.git
   

3. 只需将 exampleSite 目录中的以下 2 个文件夹和 1 个内容复制到您的项目根目录

   exampleSite/
   ├── assets/
   ├── content/
   └── hugo.toml
   

4. 启动 Hugo

   hugo server
   

配置

您可以在您的 Hugo 项目中配置以下设置

• paginate = ‘6’ (设置每页主页文章的所需数量)
• summaryLength = ‘20’ (大约 160 个字符，20 个单词)
• googleAnalytics = ’’ (您的 GA-4 分析代码)
• disqusShortname = ’’ (您的 Disqus 短名称)

自定义主题

1. 确保您的桌面上安装了 NodeJS。

2. 将 Node.js 配置文件从 exampleSite 目录复制到您的 Hugo 项目的根目录

       exampleSite/
       ├── package.json
       ├── postcss.config.js
       └── tailwind.config.js
   

3. 此外，将 exampleSite/input.css 文件复制到您的 Hugo 项目的 assets/input.css 目录。

4. 运行以下命令安装必要的依赖项

   npm install
   

5. 使用以下命令使用 Tailwind CSS 自定义主题

   npm run dev
   

6. 要构建网站，请执行以下命令

   npm run build
   

许可

Pehtheme Hugo 使用 MIT 许可证。有关详细信息，请参阅 LICENSE 文件。

Logo 图标

煎蛋图标来源：Bootstrap 图标 - 煎蛋

图片来源

在线预览中使用的图片来源

```
Images resource:
- https://unsplash.com/photos/Smeer5L0tXM
- https://unsplash.com/photos/2q6C5zDJOsg
- https://unsplash.com/photos/UNd3lRKhwSw
- https://unsplash.com/photos/Ed2AELHKYBw
- https://unsplash.com/photos/rTZW4f02zY8
- https://unsplash.com/photos/OtXJhYjbKeg
- https://unsplash.com/photos/ZPP-zP8HYG0
- https://unsplash.com/photos/ydGRmobx5jA
- https://pixabay.com/vectors/email-newsletter-email-marketing-3249062/
```

另请参阅

• Kayal
• hugo-pure
• 个人博客和文档的 Bootstrap 主题
• Clean White
• Seven