Hugo 主题

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

Flex-BP-CV

基于 Flexbox 的 Hugo 简历主题，开箱即用，提供最佳实践。

下载
Flex-BP-CV

Flex-BP Hugo 简历

基于 Flexbox 的 Hugo 简历主题，开箱即用，提供最佳实践，如性能和 SEO 就绪。使用 hugo-best-practices、前端检查清单和前端性能检查清单。

Sebastian Pech 的其他主题：Bootstrap-BP、Materialize-BP、Bootstrap-BP hugo 开始页。

目录

  • Flex-BP Hugo 简历
    • 目录
    • 特性
    • 安装主题
    • 更新主题
    • 运行示例站点
    • 配置和主题特定设置
    • 配置截图
    • Google Analytics
    • Schema.org 支持
    • 社交图标
    • 自定义 CSS/JS
    • 其他

特性

  • 颜色主题
  • 打印 CSS 媒体
  • 支持 SEO 最佳实践 (Schema.org、open graph、元信息，…)
  • 自动调整图像大小
  • 每个资源只有一个最小化的文件 (js, css)
  • CDN 字体支持 (Google Fonts, …)
  • 易于自定义布局和功能的设置
  • 社交媒体图标
  • 自定义 css/js
  • 多语言和 i18n 支持
  • …

安装主题

安装 Git 后，在 Hugo 站点文件夹中运行以下命令。如果尚未安装 Hugo，请在此处阅读设置指南。

mkdir themes
cd themes
git clone https://github.com/spech66/flex-bp-hugo-cv.git

您可以从主页获取主题最新版本的 zip 文件，并将其解压到 themes 文件夹。

更新主题

转到安装时使用的 themes 文件夹，然后运行以下命令。

git pull

运行示例站点

转到主题的 exampleSite 文件夹 themes/flex-bp-hugo-cv/exampleSite，然后运行以下命令。

hugo server --themesDir ../.. --minify

配置和主题特定设置

暂无。有关最佳设置，请参阅 exampleSite 文件夹中的 config.toml。

最好使用 --minify 标志运行 hugo。

配置截图

CV Theme

Google Analytics

已删除原生 Hugo Google Analytics 模板！

Schema.org 支持

提供一位作者以启用 Schema.org 支持。

[params.author]  
  name = "Sebastian Pech"

社交图标

社交媒体图标。将此代码块添加到配置中。

# 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
[params.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        = ""
  tiktok           = "" # @username
  tumblr           = ""
  twitter          = ""
  skype            = ""
  snapchat         = ""
  pinterest        = ""
  telegram         = ""
  discord          = "" # invite link
  # Email
  email            = ""

自定义 CSS/JS

该主题提供了两种自定义 css/js 的方法。第一种方法是将样式写入 /assets/css/custom.css，将脚本写入 /assets/js/custom.js。这将合并并缩小样式/脚本与主题特定文件，从而为整个网站生成一个文件。

[params]
  js=["/js/test_site.js"]
  jscdn=["https://cdn.jsdelivr.net.cn/npm/vue@2.x/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/vue@2.x/dist/vue.js
css:
    - /css/test.css
csscdn:
    - https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900
---

其他

  • 狗狗照片 - 图片来自 Pixabay 的 Nikki Luijpers。
  • CSS Tricks - Web 上暗黑模式的完整指南

另请参阅