Hugo 主题

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

Yuan

Hugo 的简约单页主题

下载
Yuan

Hugo 的简约单页主题 - 演示

一个超轻量的 Hugo 单页主题。只有可切换的鼠标跟踪动画使用了 JavaScript，其他响应式元素都是使用纯 HTML 和 CSS 生成的（如演示中所示）。

特性

  • 无需 JavaScript 的交互式设计
  • 用于社交链接的 SVG 图标包
  • 用于显示项目项的水平可滚动卡片视图
  • 移动友好的缩放
  • 可切换的鼠标跟踪动画（仅限 JS）
  • 优化的 CSS、JS 和 Web 字体（Yellow Lab Tools 分析）
  • 超小构建体积（~40 KB）

Hugo Themes Website GitHub code size in bytes GitHub

用法

安装主题的最简单方法是使用 git 子模块

$ git submodule add --depth=1 https://github.com/17ms/yuan.git themes/yuan
# Required when recloning the repository (e.g. during automated deployment)
$ git submodule update --init --recursive

使用下面的 hugo.yaml 模板来配置主题

# Note that due to performance reasons the custom webfont used in the site's
# titles is stripped to only contain unicode range U+0000-007F

baseURL: https://example.com/
title: Example
author: Example Author
language: en-GB
paginate: 10

theme: yuan

params:
  description: Example description

  # Mouse tracking animation
  enableMouseTracker: false

  # Trunaction limit of summaries inside projects display containers
  truncationLimit: 150

  # Logos, favicons, and theme colors
  assets:
    favicon: "favicon.ico"
    favicon16: "favicon-16x16.png"
    favicon32: "favicon-32x32.png"
    appleTouchIcon: "apple-touch-icon.png"
    safariPinnedTabIcon: "safari-pinned-tab.svg"
    safariPinnedTabColor: "#5bbad5"
    manifest: "manifest.json"
    msTileColor: "#2b5797"
    msTileIcon: "mstile-150x150.png"
    themeColor: "#040404"
    logo: "logo.svg"

  # Icons shown below the about text snippet
  # List of the available icons can be found in the /layouts/partials/svg.html file
  socialIcons:
    - name: email
      url: "mailto:example@example.com"
      display: Optional name shown in tooltips, defaults to capitalized name

  # List of displayed items (e.g. software projects)
  itemDisplays:
    - name: Example project
      url: "#"
      description: Project description example

另请参阅