Skip to content

Latest commit

 

History

History
252 lines (167 loc) · 10.2 KB

readme.md

File metadata and controls

252 lines (167 loc) · 10.2 KB

一、简介

Bluf 是一款慵懒的瀑布流网址导航 Hugo 主题，源于 Wolf Set（狼集） 导航的实践。

与传统“规整”的网址导航相比，自适应瀑布流的 bluf 要随性得多，长短随意，插图随心。还有标签或颜色筛选、深色模式、网站统计、访客问候等贴心功能，更支持多链接、多图画廊等模式。

一切只需 YAML 轻松配置。

狼集演示

二、安装

2.1 快速上手

本教程基于“无需修改代码”的难度，几乎无需付费，只需三步在 狼集 内容的基础上有一个属于自己的网址导航。

步骤 0：准备

  1. 确保你已注册 Github 与 Cloudflare 账号，我们将用此存储与发布网页。
  2. （可选但推荐）准备一个你自己的域名，有助于提高国内的访问速度。
继续浏览安装步骤…

步骤 1：复制仓库到你的 Github

  1. 点击 本页面 右上角的 fork 按钮，复制项目到你的 Github 仓库。
  2. 记住你复制时的仓库名。（稍后会用到）

步骤 2：修改网站的基础配置

  1. 在你刚 fork 的仓库首页，点开 hugo.toml 文件（根目录）。
  2. 根据文件中的注释，编辑文件，修改以下内容：
    • 网址、网站名称、首页标题、SEO 信息、授权信息、网站统计等。
    • 注意：如你还不确定网址，可先跳过，稍后记得修改。
    • 注意：toml 格式，不要丢失两侧的英文引号"。
# hugo.toml 文件部分示例：
baseURL = "https://ws.0000cd.com/" #你的网址
languageCode = "zh-CN"
title = "狼牌网址导航 - 狼集 Wolf Set" #网站名称
theme = "bluf"
#……

步骤 3：使用 Cloudflare Pages 发布网页

  1. 打开 Cloudflare Pages，点击创建 - Pages - 连接到 Git - Github，选择你刚记住仓库名的项目。
  2. 点击开始设置，修改以下内容：
    • 项目名称（注意：若没有你自己的域名，这将是你默认域名的一部分）
    • 预设框架，选择 Hugo （无需修改其他默认设置）。
  3. 点击保存并部署，通常会在一分钟内会完成，但首次部署你还需再等 2~3 分钟，才能点开预览链接在网上看到你的网页，请坐和放宽。
  4. 修改并绑定域名：
    • 如果你有自己的域名，请在项目内找到自定义域，按提示绑定域名。
    • 如果你没有自己的域名，请记住 Cloudflare 提供的默认域名（如 xxx.pages.dev）。
    • 确认之前 hugo.toml 的网址已完成修改。

常见问题

  • 访问异常：如你无法访问 Cloudflare 默认提供的域名，或访问速度过慢，请绑定你自己的域名。
  • 部署失败：
    • 如你部署失败，看一下部署日志，并检查你选对了仓库，以及 hugo.toml 内的格式。
    • 如你用的不是 Cloudflare，而是 Vercel 或 Netlify 等平台部署失败，你可能需要在选择预设框架时，配置环境变量 hugo 版本为较新版本，如 HUGO_VERSION = 0.117.0。

2.2 Hugo 开始

如果你对 Hugo 有一定了解，可直接用我们自写的 Bluf 主题来构建你的网站。只需先复制 themes/bluf 到你的项目，并在 hugo 中设置 theme = "bluf"。

Bluf 主题代码已经过多次测试，可稳定上线使用，但部分代码仍在清理中，因此暂不提供详细教程。如有任何问题或建议，欢迎通过 Issues 提交反馈！我们期待你的参与。

三、使用

如果你是按上面的教程 Cloudflare 部署的，您只需编辑对应的文件，在保存后 Cloudflare 会自动部署更改，片刻后更新到网页上。只需留意 TOML 或 YAML 格式，就能规避常见错误。

但即使你熟悉 Hugo，也推荐浏览一下使用说明。因为与大多数 Hugo 内容在 content 不同，Bluf 更接近单页主题，其主要在 data 目录下。

3.1 导航卡片

增删首页的导航卡片

请编辑 data/cards.yaml。该文件是 YAML 格式易于使用，如下：

- title: Humane by Design # 卡片标题
  hex: "#14151d" # （可选）卡片颜色，会自动颜色分类。注意引号
  tags: # 卡片标签，会标签分类
  - 网页
  - 设计
  - 想法
  date: "2024/04" # （可选）卡片时间
  description: 人性化的数字产品和服务指南。 # 卡片描述
  links: https://humanebydesign.com/ #卡片链接

提示：在 Markdown 文章中…

  • 插入 {{< random >}} 短码，可让该页面随机跳转所有导航网址。
  • 插入 {{< total >}} 或 {{< total "tags" >}} 短码，可统计所有或指定标签的导航卡片总数。如：本站共 {{< total >}} 个有趣网址导航，和 {{< total "开源" >}} 个开源项目！
继续浏览使用，如：导航卡片、导航栏、筛选、问候语、授权、个性化、SEO…

导航卡片配置多条链接

如果上文的 links，需要多条链接，你还可以这样写：

- title: Neal.fun
  hex: "#ffc7c7"
  tags:
  - 网页
  - 有趣
  date: "2024/12"
  description: 希望你有美好的一天… 游戏互动可视化等其他奇怪的东西。
  links:
  - name: 官网 #注意，第一条链接不会展示，而是作为卡片整体的链接
    url: https://neal.fun/
  - name: 设置密码？
    url: https://neal.fun/password-game/
  - name: 赞助
    url: https://buymeacoffee.com/neal

导航卡片头图、画廊模式

无需额外配置，只需将与卡片 title 名称一致的图片，放入 assets/img 文件夹下即可，如 assets/img/Neal.fun.webp。支持 jpg、png、gif、webp 格式，建议图片宽度大于 300px，但过大会影响加载速度。提示：可以获取网站的 Open Graph 用于插图。

请编辑 hugo.toml，先 gallery = true 开启画廊模式。之后在 assets/gallery 创建与卡片 title 名称一致的的文件夹（注意特殊符号），并放入多张图片（按文件名排序），再点击卡片头图就能进入画廊模式，浏览多张图片。适合像相册一样分享图片合集使用，如：

- assets
  - gallery
    - Humane by Design
      - a.jpg
      - 2.webp
      - Cat.gif

3.2 标签筛选与导航栏

配置导航卡片标签

请编辑 data/tag_classes.yaml，将管理用于筛选的标签的映射关系：

桌面："desktop"
移动："mobile"
网页："web"

如你配置 桌面："desktop"，在 cards.yaml 的 tags 只需输入“桌面”，就能按“desktop”筛选导航卡片。

特别的，由于颜色筛选是算法自动完成的，不建议修改颜色筛选的值。

配置导航栏外链、筛选、标签

请编辑 data/navbar.yaml，分别在 external_links、categories、hot_tags 下配置外链、筛选、标签。

3.3 更多特色功能

网站问候、庆祝撒花

请编辑 hugo.toml，会在访问首页时随机展示问候，为空不启用；也可为移动端单独配置问候，用于引导：

[params]

  greetings = [
    #……
    "Ctrl+D 收藏本站 ⭐",
    "点击【标签】，筛选内容 🔖",
    "点击 ●，切换深浅配色 🐼",
] #访客随机问候，为空不启用
  mobileGreetings = [
    "推荐电脑访问，体验更佳 💻",
] #移动端访客随机问候，为空使用 greetings

输入喜欢的 emoji，会在用户清除筛选时庆祝撒花，感谢用户的访问，为空不启用：

confettiEmojis = [ '🥟', '🍜', '🍊', '🧧', '🧨', '🏮', '🎉', '🐺' ] # 清除筛选时撒花，为空不启用

配置 CC 授权信息

请编辑 hugo.toml 的 license，会写入网站的 Meta 信息（游客不会直接看到）。

可进一步在 layouts/partials/cc.html 配置页脚的授权信息（只在文章页脚，不会显示在首页），如不需要可删除。

访问 CC 授权 选择授权协议，并生成页脚授权的代码。

网站个性化、图标、配色

请在 static 下覆盖 logo、favcion 等文件修改图片，修改图标。推荐使用 favicon.io。

请编辑 hugo.toml，修改强调色，点击导航栏的 ⚫ 切换深浅配色：

[params]

  lightColor = "#0000cd" # 浅色强调色，推荐较深
  darkColor = "#fafafa" # 深色强调色，推荐较浅

优化 SEO、网站统计

请编辑 hugo.toml 优化 SEO，支持隐私友好的开源 Umami 统计。

如你使用 Cloudflare 部署，可在该项目下的指标，开启 Web Analytics 进行统计。

可在 content/achrive 下放置历史数据，辅助优化搜索的 SEO。

如需 Search Console 等平台验证网站所有权，请将验证文件放在 static 下。

Bluf theme

Quality Gate Status

Bluf 是一款简明扼要的瀑布流卡片式 Hugo 主题，非常适合脑暴、作品集、链接导航、等需要简单分享的场景。部分代码由 GPT-4o 与 Claude-3.5 AI 协助。

灵感

Blue + Wolf = Bluf

BLUF (bottom line up front) is the practice of beginning a message with its key information (the "bottom line"). This provides the reader with the most important information first. BLUF（先行底行）是一种沟通方式，即在信息的开始部分先给出关键信息（即“底行”）。这样做可以让读者首先了解到最重要的信息。

License

本项目基于 Hugo 框架，并采用自建的 Bluf 主题：

  • content 与 data 目录下的内容遵循 CC BY-NC 4.0 许可协议共享。
  • Bluf 主题因集成 Isotope，遵守 GPLv3 许可协议。
  • 画廊模式：baguetteBox.js，MIT 协议。
  • 庆祝撒花：js-confetti，MIT 协议。