Hugo 主题

上一个/下一个: 所有主题

Hugo Winston

Hugo Winston 是一个大胆的极简博客主题

下载
Hugo Winston

Hugo Winston 主题

Hugo Winston 是一个大胆的极简博客主题。

在线演示 | Zerostatic Themes

Hugo Winston Theme screenshot

主题功能

  • 文章（Markdown）
  • 基本页面（Markdown）
  • SCSS (Hugo Pipelines)
  • 响应式设计
  • 100/100 Google Lighthouse 速度评分
  • 100/100 Google Lighthouse SEO 评分
  • 100/100 Google Lighthouse 无障碍评分
  • 在 config.toml 中配置 Google Analytics
  • 使用环境变量 HUGO_GOOGLE_ANALYTICS_ID 配置 GID，与 Netlify 兼容。
  • 自动为每个页面生成标题、元描述和元标签
  • Facebook 和 Twitter 的 OG 元数据
  • 语义 HTML 文档结构

安装

1. 安装 Hugo

要使用此主题，您首先需要安装 Hugo。请按照官方安装指南进行操作

⚠️ 注意：检查您的 Hugo 版本 - 需要 Hugo Extended！

此主题使用 Hugo Pipes 来编译 SCSS 和缩小资源，这意味着如果您未使用 Hugo 扩展版本，则此主题将无法正常工作。要检查您的 Hugo 版本，请运行 hugo version。确保在版本号后看到 /extended，例如 Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown 您不需要专门使用 v0.51 版本，它只需要具有 /extended 部分即可。

2. 创建新的 Hugo 站点

这将在 mynewsite 文件夹中创建一个新的 Hugo 站点。

hugo new site mynewsite

3. 安装主题

将此主题下载或 git clone 到站点的 themes 文件夹 mynewsite/themes 中。您应该得到以下文件夹结构 mynewsite/themes/hugo-winston-theme

cd mynewsite
git clone https://github.com/zerostaticthemes/hugo-winston-theme.git themes/hugo-winston-theme

4. 复制示例内容

将 mynewsite/themes/hugo-winston-theme/exampleSite/ 文件夹的全部内容复制到您的 Hugo 站点的根文件夹，即 mynewsite/。要使用终端复制文件，请确保您仍在项目的根目录中，即 mynewsite 文件夹中。

cp -a themes/hugo-winston-theme/exampleSite/. .

6. 运行 Hugo

首次安装主题后，生成 Hugo 站点。

您从 Hugo 站点的根文件夹（即 mynewsite）运行此命令

hugo

对于本地开发，请运行 Hugo 的内置本地服务器。

hugo server

现在在浏览器的地址栏中输入 localhost:1313。

exampleSite 中的本地主机

您可以使用以下命令运行此站点，而无需将其安装为 hugo 主题。我将此用于主题开发。

hugo server --source=exampleSite --theme=../..

配置

配置选项 

# config.toml
[params]
  google_analytics_id = ""
  twitter_handle = "@zerostaticio"
  showAuthorOnHomepage = true
  showAuthorOnPosts = false
  showIntroContentOnHomepage = true
  showPostsOnHomepage = true
  usePaginationOnHomepage = false
  limitPostsOnHomepage = 3 # only used if usePaginationOnHomepage is false
  sortPostsByDateOldestFirst = false
  addDot = true
  addFrame = true
  highlightColor = '#7b16ff'
  baseColor = "#ffffff"
  baseOffsetColor = "#eaeaea"
  headingColor = "#1c1b1d"
  textColor = "#4e5157"
  dotColor = "#7b16ff"
  enableGoogleFonts = true 
  googleFontsUrl = "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
  fontFamilyHeading = "Poppins"
  fontFamilyParagraph = "Helvetica"
  fontFamilyMonospace = "monospace"

Google Analytics

将您的 Google Analytics ID 添加到 config.toml

# config.toml
[params]
  google_analytics_id="UA-132398315-1"

Plausible Analytics

将您的 plausbile analytics 域名添加到 config.toml 中。这是您的跟踪脚本代码中的 data-domain。

# config.toml
[params]
  plausible_analytics_domain = "example.com"

部署到 Netlify

Deploy to Netlify

此主题包含一个 netlify.toml 文件，该文件配置为从 exampleSite 文件夹部署到 Netlify。如果您已将此主题安装到新的 Hugo 站点中，并且 exampleSite 文件夹已复制或删除，则应删除 netlify.toml 文件。

Zerostatic 的更多 Hugo 主题

  • Hugo Hero - 开源企业主题
  • Hugo Whisper - 开源文档主题
  • Hugo Serif - 开源企业主题
  • Hugo Winston - 开源博客主题
  • Hugo Advance - 高级多页面企业和营销主题
  • Hugo Paradigm - 高级着陆页 + 站点构建器主题
  • Hugo Lever - 高级个人/个人简介主题
  • Hugo Shard - 高级 SAAS/着陆页主题

在 Built At Lightspeed 上查找数百个更多 Hugo 主题

Built At Lightspeed Hugo themes directory screenshot

另请参阅