Hugo 主题
Devise
一个快速、简约、响应式的 Hugo 博客主题。
要查看该主题的实时演示,请访问
- themes.gohugo.io/devise
- austingebauer.dev
功能
- Hugo 的所有内置内容管理
- 通过 Hugo 配置文件轻松安装 Google Analytics
- 快速加载,在 Google PageSpeed 上得分 95-100
- 能够在 Markdown 中通过 HTML/CSS 使用 Bootstrap 4 CSS 类
- 能够使用 Font Awesome 图标
- 能够通过 Sass 自定义主题样式
- 能够通过 Hugo 配置文件自定义以下项目
- Meta 描述
- 标题
- 副标题
- 图像
- 图像边框颜色
- 导航菜单
- 社交图标
- 最近的 ’n’ 篇帖子
- 背景颜色
- 字体系列
- 字体颜色
使用
以下指南介绍 Devise Hugo 主题的安装、配置和更新。
安装
在安装此主题之前,请务必安装 Hugo 并创建一个新站点。
要安装该主题,请从您的 Hugo 站点的根目录运行以下命令
$ git submodule add https://github.com/austingebauer/devise.git themes/devise
配置
接下来,打开 Hugo 站点根目录中的 config.toml
文件并设置主题
theme = "devise"
带有所有配置功能的 config.toml
文件示例
baseURL = "https://example.com"
title = "Your Website Title"
languageCode = "en-us"
theme = "devise"
relativeURLs = true
enableEmoji = true
googleAnalytics = ""
enableRobotsTXT = true
copyright = "© Copyright Year, Your Name"
# Main menu items
[menu]
[[menu.main]]
identifier = "about"
name = "About"
title = "About"
url = "/about/"
weight = -110
[[menu.main]]
identifier = "posts"
name = "Posts"
title = "Posts"
url = "/post/"
weight = -100
[[menu.main]]
identifier = "categories"
name = "Categories"
title = "Categories"
url = "/categories/"
weight = -90
# Configuration Features
[params]
description = "Your meta description" # Your meta description of the site
header_title = "Your Name" # Your header title
header_subtitle = "Your Creative Subtitle" # Your header subtitle
home_image = "/images/avatar.png" # Path to header image starting from the static directory (optional)
recent_posts = 5 # Max amount of recent posts to show
mainSections = ["posts", "post", "blog"] # Main sections to include in recent posts
[params.style] # CSS style overrides
backgroundColor = "#f8f9fa"
homeImageBorderColor = "#ffffff"
fontFamilyBase = "Helvetica Neue" # First-choice font
fontColor = "#212529"
[[params.social]]
fa_icon = "fab fa-github fa-1x" # Font Awesome icon class
href = "http://github.com/youruser" # Link to associate with icon (http://, https://, mailto:)
[[params.social]]
fa_icon = "fab fa-linkedin-in fa-1x"
href = ""
[[params.social]]
fa_icon = "fab fa-twitter fa-1x"
href = ""
[[params.social]]
fa_icon = "fas fa-at fa-1x"
href = ""
更新
要获取主题的更新,请从您的 Hugo 站点的根目录运行以下命令
$ git submodule update --remote themes/devise
添加自定义样式
向 devise 主题添加自定义样式很简单。 有两种选择可以做到这一点。
选项 1:
在您网站的 config.toml
文件中,您可以设置以下自定义样式参数
[params.style]
backgroundColor = "#f8f9fa"
homeImageBorderColor = "#ffffff"
fontFamilyBase = "Helvetica Neue"
fontColor = "#212529"
如果您想查看其他可作为配置参数的自定义样式,请提出一个问题。
选项 2:
要将自定义 Sass 样式添加到 devise 主题,您需要在站点的 assets 目录中添加以下文件
assets/sass/custom.scss
在该文件中,您可以使用 Sass 语法来声明您的自定义样式。 执行此操作后,您应该看到自定义样式已添加到您的基于 devise 的 Hugo 站点中。
演示
要在您的笔记本电脑上运行该主题的实时演示,请从 devise 主题的 exampleSite
目录运行以下命令
hugo server --themesDir ../.. --watch --verbose --cleanDestinationDir --disableFastRender
要查看该主题的实时演示,请访问
- themes.gohugo.io/devise
- austingebauer.dev
贡献
如果您有新功能的想法或发现错误,请随时使用 Github 问题告知我。
许可证
MIT