Hugo 主题

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

Niello

一个简洁优雅的 Hugo 深色主题

下载
Niello

Niello - 高级 Hugo 深色主题

Niello 是一个现代且功能丰富的 Hugo 主题，旨在以时尚的深色美学优雅地展示您的内容。凭借其响应式设计，Niello 可以完美适应所有屏幕尺寸，带来流畅的浏览体验。该主题配备了 Google Analytics、AdSense 支持、Disqus 评论、社交分享和内置搜索功能，让您可以轻松管理和扩展您的在线形象。

注意：只有基于标签的发布版本才被视为稳定版本。

主要特性

  • 深色模式：提供时尚的深色主题，以增强可读性和视觉吸引力。

  • 响应式设计：无缝适应任何屏幕尺寸，提供流畅的浏览体验。

  • 多语言支持 (i18n)：通过内置的国际化功能为全球受众做好准备。

  • 内容搜索：通过集成的搜索功能轻松定位文章。

  • 自动图像提取：自动从文章中提取图像，以获得更丰富的呈现效果。

  • 盈利:

    • Google AdSense：支持广告，方便网站盈利。
    • Google Analytics：跟踪网站性能和用户参与度。

  • 增强的样式:

    • Tailwind CSS：由 Tailwind 提供支持，实现快速灵活的样式设计。
    • 语法高亮：为技术内容提供清晰的代码显示。

  • 有组织的存档：按日期显示过去的帖子，使内容更容易导航。

  • 忽略某些类别：隐藏您不想显示的帖子。

截图

Theme Screenshot

安装

要安装 Niello 主题，请在您的 Hugo 网站的根目录中运行以下命令

git clone https://github.com/guangmean/Niello.git themes/Niello

配置

以下是您的网站的 hugo.toml 文件（以前是 config.toml）的示例

baseURL = "https://www.angularcorp.com/" # Must end with splash
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true
disqusShortname = "yourDisqusShortname" // Add third-party comments system

staticDir = ["static", "themes/Niello/static"]

theme = "Niello"

[languages]
	[languages.en]
		title = "{CodeTrace} - Discover Issues, Share Solutions."
		languageCode = "en-us"
		LanguageName = "🇺🇸EN"
		contentDir = "content/en"
		weight = 1
		[[languages.en.menus.main]]
			name = 'Home'
			pageRef = '/'
			weight = 1
		[[languages.en.menus.main]]
			name = 'Categories'
			pageRef = '/categories'
			weight = 2
		[[languages.en.menus.main]]
			name = 'Tags'
			pageRef = '/tags'
			weight = 3
		[[languages.en.menus.main]]
			name = 'Contact'
			pageRef = '/contact'
			weight = 4
	[languages.zh]
		title = "{码途轨迹} - 发现问题，分享解决."
        languageCode = "zh-cn"
        LanguageName = "🇨🇳CN"
        contentDir = "content/zh"
        weight = 2
		[[languages.zh.menus.main]]
			name = '首页'
			pageRef = '/'
			weight = 1
		[[languages.zh.menus.main]]
			name = '文章分类'
			pageRef = '/categories'
			weight = 2
		[[languages.zh.menus.main]]
			name = '标签'
			pageRef = '/tags'
			weight = 3
		[[languages.zh.menus.main]]
			name = '联系我们'
			pageRef = '/contact'
			weight = 4
        
[params]
[params.google]
	google_ad_client = "ca-pub-******"  //Optional, replace ca-pub-****** with your content
	ga4 = "G-******" //Optional, replace G-****** with your Google Analytics GA4
[params.bannershowcase]
	categories = ["AI"]
	limit = 2
[params.email]
	contact = "angularcorp@outlook.com"
[params.ignore]
	categories = ["privacy", "terms", "archives", "cookie"]

copyright = "© 2019 ~ 2024 by guangmean. All Rights Reserved."
sharethis = ""  //Optional, Add hou ShareThis appid here

[outputs]
  home = ["HTML", "JSON"]

覆盖主题 i18n 键

如果您需要在不修改主题文件的情况下自定义某些翻译键，则可以在站点级别覆盖主题的 i18n 键。只需在站点的根目录中创建一个 i18n 文件夹，并在其中添加您想要覆盖的键。

要覆盖主题 i18n 文件中的 sitename、siteslogan、siteseokeywords 和 siteseodescription，请按照以下步骤操作

  1. 在站点的根目录中，创建一个 i18n 文件夹（如果它尚不存在）。
  2. 在 i18n 文件夹中，创建适当的语言文件（例如，en.toml）。
  3. 添加以下内容以覆盖主题的 i18n 键

   # File path: i18n/en.toml
   [sitename]
   other = "Site Name"

   [siteslogan]
   other = "Site Slogan"

   [siteseokeywords]
   other = "Site Home SEO Keywords"

   [siteseodescription]
   other = "Site Home SEO Description"

通过编辑源代码自定义主题

如果您计划修改此主题，请注意它是使用 TailwindCSS 构建的。在进行更改之前，请确保在您的项目中初始化 TailwindCSS 并按照设置说明正确配置您的开发环境。


cd themes/Niello

npm install -D tailwindcss

# Below cmd is not required
npx tailwindcss init # This will create the tailwind.config.js which already included in Niello

Google Adsense 和 Google Analytics 4 (GA4)

Niello 通过在 [params] 块中配置 googleadclient 参数来支持 Google AdSense，并通过在 hugo.toml 文件（以前的 config.toml）中设置 ga 参数来支持 Google Analytics 4 (GA4)，如上所示。

要启用搜索功能，您需要在 hugo.toml 文件中配置 JSON 输出，方法是添加以下内容

[outputs]
  home = ["HTML", "JSON"]

并且需要在 content 目录下创建一个带有 _index.md 文件的 search 文件夹，例如：content/en/search/_index.md

+++

title = “搜索结果”
date = 2024-12-13T15:00:00+08:00
draft = false
layout = “search”

+++

通过此设置，搜索 URL 将是 /en/search/?q=keywords

存档（选项）

要启用存档功能，您需要手动将 archives.md 文件添加到内容根目录

|--- content
|-------| archives.md

或者多语言示例

|--- content
|-------| en	
|----------| archives.md # English
|-------| zh	
|----------| archives.md # Chinese

内容应如下所示

+++
title = 'Archives'
date = 2024-10-25T09:16:03+08:00
draft = false
categories = ["archives"]
layout = "archives"
+++

忽略帖子（选项）

要排除 cookie.md、privacy.md 和 terms.md 等帖子，请按如下方式配置站点参数

[params]
[params.ignore]
	categories = ["privacy", "terms", "archives", "cookie"]

内容结构如下，要忽略的帖子必须在其前言中指定类别。

|---content/en
			|---cookie.md
			|---privacy.md
			|---terms.md
			|
			|---/example1
					|---example1-1.md
					|---example1-2.md
			|---/example2
					|---example2-1.md
					|---example2-2.md
					|---example2-3.md
|---content/fr
|---content/zh
|---content/de

ShareThis

Niello 支持通过 ShareThis 将您的内容分享到其他平台。

在线演示

完整演示可在此处获取：https://www.angularcorp.com

如何运行 exampleSite

在您的站点根目录中运行以下命令以启动示例站点

hugo server --source themes/Niello/exampleSite --themesDir ../.. --theme Niello

给我买杯咖啡

ko-fi

另请参阅