Hugo 主题
Bootstrap-BP
基于 Bootstrap 的 Hugo 主题,支持开箱即用的最佳实践。
Bootstrap-BP Hugo 主题
基于 Bootstrap v5 的 Hugo 主题,提供开箱即用的最佳实践,如性能和 SEO 准备。特色图片将自动调整大小。这是基于 Hugo 文档、hugo-best-practices、前端检查清单和前端性能检查清单。包含四种不同的颜色主题。
Sebastian Pech 的其他主题:Bootstrap-BP、Materialize-BP、Bootstrap-BP Hugo 起始页。
目录
- Bootstrap-BP Hugo 主题
- 目录
- 功能
- 安装主题
- 更新主题
- 运行示例站点
- 配置和主题特定设置
- 配置截图
- Google Analytics
- 页面模板/原型
- Schema.org 支持
- 图片、Open Graph 和 Twitter 卡片
- 菜单
- 社交图标
- 自定义 CSS/JS
功能
- 颜色主题
- 支持 SEO 最佳实践 (Schema.org, open graph, 元信息, …)
- 自动调整图片大小
- 每个资源仅一个最小化文件(js、css)
- CDN 字体支持(Google Fonts,...)
- 起始页的可选 Masonry 模式
- 易于自定义布局和功能的设置
- 支持多种页面模板/原型
- 社交媒体图标
- 自定义 css/js
- 多语言和 i18n 支持
- …
安装主题
安装 Git 后,在 Hugo 站点文件夹中运行以下命令。如果尚未安装 Hugo,请在此处阅读设置指南。
mkdir themes
cd themes
git clone https://github.com/spech66/bootstrap-bp-hugo-theme.git
您可以从主页获取最新版本主题的 zip 文件,并将其解压到 themes 文件夹中。
更新主题
转到安装中的 themes 文件夹,然后运行以下命令。
git pull
运行示例站点
转到主题中的 exampleSite
文件夹 themes/bootstrap-bp-hugo-theme/exampleSite
,然后运行以下命令。
hugo server --themesDir ../..
配置和主题特定设置
大多数设置应使用 Hugo 特定变量完成。只有少数(可选)额外的 [params]
。使用 exampleSite
子目录中的 config.toml
作为基础。
startPageColumns = true
将以 Masonry 模式显示起始页。customDateFormat = "02.01.2006"
用于覆盖日期格式。showListsGrouped = true
为每一年添加标题。showPostSummary = true
仅在索引和列表中显示摘要。alwaysExpandMenu = true
在非移动设备上展开菜单,否则移动按钮将显示在所有设备上。themeColor
设置为深色、浅色、蓝色(不设置为 Bootstrap 默认值)。hideReadingTime
隐藏阅读时间。
配置截图
startPageColumns = false
startPageColumns = true
Google Analytics
已删除原生 Hugo Google Analytics 模板!
页面模板/原型
此主题支持以下原型。根据指定的类型,页面的布局和功能会略有变化。
- 页面(不在起始页上)
- 文章(常规文章/博客页面)
- 音频(在标题中显示 Spotify)
- 视频(在标题中显示 YouTube)
- 引用(突出显示引用和作者)
- 链接(显示带有页面标题的链接)
Schema.org 支持
提供一位作者以启用 Schema.org 支持。
[Author]
name = "Sebastian Pech"
图片、Open Graph 和 Twitter 卡片
此主题使用 Hugo 的 feature/cover
名称方法来设置优化的特色图片。名为 *feature*
或 *cover*
的图片用于文章的特色图片并调整大小。这也将位于 Twitter 卡片和 Open Graph 块中。
如果存在名为 *feature*
或 *cover*
的文件,则会自动添加标题图片。第一个通配符优先于第二个通配符。如果有多个图片,则使用第一个图片。
# Site Config toml
title = "My hugo site"
[params]
description = "Text about the site"
# Post yaml
---
title: "{{ replace .Name "-" " " }}"
date: {{ .Date }}
publishdate: {{ now.Format "2006-01-02" }}
lastmod: {{ now.Format "2006-01-02" }}
draft: true
description: "Text about this post"
tags:
- "tag 1"
---
菜单
主题中有两个菜单。main
和 footer
。在配置或内容标头中指定条目。
[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "/about/"
weight = 10
pre = "<i class='fas fa-newspaper'></i>"
[[menu.footer]]
identifier = "Imprint"
name = "Imprint"
url = "/imprint/"
weight = 10
[[menu.footer]]
identifier = "categories"
name = "Categories"
url = "/categories/"
weight = 20
[[menu.footer]]
identifier = "tags"
name = "Tags"
url = "/tags/"
weight = 30
---
[...]
menu = "main"
---
社交图标
社交媒体图标。将块添加到配置中。
# Sets Social Media icons to appear and link to your account. Value should be your
# username unless otherwise noted.
# Code from https://themes.gohugo.com.cn/future-imperfect/ theme
[social]
# Coding Communities
github = ""
gitlab = ""
stackoverflow = "" # User Number
bitbucket = ""
jsfiddle = ""
codepen = ""
# Visual Art Communities
deviantart = ""
flickr = ""
behance = ""
dribbble = ""
# Publishing Communities
wordpress = ""
medium = ""
# Professional/Business Oriented Communities
linkedin = ""
linkedin_company = ""
foursquare = ""
xing = ""
slideshare = ""
# Social Networks
facebook = ""
googleplus = ""
reddit = ""
quora = ""
youtube = ""
vimeo = ""
whatsapp = "" # WhatsApp Number
instagram = ""
tumblr = ""
twitter = ""
skype = ""
snapchat = ""
pinterest = ""
telegram = ""
discord = "" # invite link
# Email
email = ""
自定义 CSS/JS
主题提供了两种自定义 css/js 的方法。第一种方法是将您的样式写入 /assets/css/custom.css
,并将脚本写入 /assets/js/custom.js
。这将合并并最小化样式/脚本与主题特定文件,从而为整个网站生成一个文件。
第二种方法是使用站点配置或文章元数据来定位 /assets/
文件夹中的特定文件。这将导致每个脚本/样式一个导入行。
[params]
js=["/js/test_site.js"]
jscdn=["https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/vue.js"]
css=["/css/test_site.css"]
csscdn=["https://fonts.googleapis.com/css?family=Roboto&display=swap"]
---
js:
- /js/test.js
jscdn:
- https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/vue.js
css:
- /css/test.css
csscdn:
- https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900
---