Bluf 是一款慵懒的瀑布流网址导航 Hugo 主题，源于 Wolf Set（狼集） 导航的实践。
与传统“规整”的网址导航相比，自适应瀑布流的 bluf 要随性得多，长短随意，插图随心。还有标签或颜色筛选、深色模式、网站统计、访客问候等贴心功能，更支持多链接、多图画廊等模式。
一切只需 YAML 轻松配置。
本教程基于“无需修改代码”的难度，几乎无需付费，只需三步在 狼集 内容的基础上有一个属于自己的网址导航。
- 确保你已注册 Github 与 Cloudflare 账号，我们将用此存储与发布网页。
- （可选但推荐）准备一个你自己的域名，有助于提高国内的访问速度。
继续浏览安装步骤…
- 点击 本页面 右上角的 fork 按钮，复制项目到你的 Github 仓库。
- 记住你复制时的仓库名。（稍后会用到）
- 在你刚 fork 的仓库首页，点开
hugo.toml文件（根目录）。 - 根据文件中的注释，编辑文件，修改以下内容：
- 网址、网站名称、首页标题、SEO 信息、授权信息、网站统计等。
- 注意：如你还不确定网址，可先跳过，稍后记得修改。
- 注意：toml 格式，不要丢失两侧的英文引号
"。
# hugo.toml 文件部分示例：
baseURL = "https://ws.0000cd.com/" #你的网址
languageCode = "zh-CN"
title = "狼牌网址导航 - 狼集 Wolf Set" #网站名称
theme = "bluf"
#……- 打开 Cloudflare Pages，点击创建 - Pages - 连接到 Git - Github，选择你刚记住仓库名的项目。
- 点击开始设置，修改以下内容：
- 项目名称（注意：若没有你自己的域名，这将是你默认域名的一部分）
- 预设框架，选择
Hugo（无需修改其他默认设置）。
- 点击保存并部署，通常会在一分钟内会完成，但首次部署你还需再等 2~3 分钟，才能点开预览链接在网上看到你的网页，请坐和放宽。
- 修改并绑定域名：
- 如果你有自己的域名，请在项目内找到自定义域，按提示绑定域名。
- 如果你没有自己的域名，请记住 Cloudflare 提供的默认域名（如 xxx.pages.dev）。
- 确认之前
hugo.toml的网址已完成修改。
- 访问异常：如你无法访问 Cloudflare 默认提供的域名，或访问速度过慢，请绑定你自己的域名。
- 部署失败：
- 如你部署失败，看一下部署日志，并检查你选对了仓库，以及
hugo.toml内的格式。 - 如你用的不是 Cloudflare，而是 Vercel 或 Netlify 等平台部署失败，你可能需要在选择预设框架时，配置环境变量 hugo 版本为较新版本，如
HUGO_VERSION = 0.117.0。
- 如你部署失败，看一下部署日志，并检查你选对了仓库，以及
如果你对 Hugo 有一定了解，可直接用我们自写的 Bluf 主题来构建你的网站。只需先复制 themes/bluf 到你的项目，并在 hugo 中设置 theme = "bluf"。
Bluf 主题代码已经过多次测试，可稳定上线使用，但部分代码仍在清理中，因此暂不提供详细教程。如有任何问题或建议，欢迎通过 Issues 提交反馈！我们期待你的参与。
如果你是按上面的教程 Cloudflare 部署的，您只需编辑对应的文件，在保存后 Cloudflare 会自动部署更改，片刻后更新到网页上。只需留意 TOML 或 YAML 格式，就能规避常见错误。
但即使你熟悉 Hugo，也推荐浏览一下使用说明。因为与大多数 Hugo 内容在 content 不同，Bluf 更接近单页主题，其主要在 data 目录下。
请编辑 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请编辑 data/tag_classes.yaml，将管理用于筛选的标签的映射关系：
桌面："desktop"
移动："mobile"
网页："web"如你配置 桌面："desktop"，在 cards.yaml 的 tags 只需输入“桌面”，就能按“desktop”筛选导航卡片。
特别的，由于颜色筛选是算法自动完成的，不建议修改颜色筛选的值。
请编辑 data/navbar.yaml，分别在 external_links、categories、hot_tags 下配置外链、筛选、标签。
请编辑 hugo.toml，会在访问首页时随机展示问候，为空不启用；也可为移动端单独配置问候，用于引导：
[params]
greetings = [
#……
"Ctrl+D 收藏本站 ⭐",
"点击【标签】，筛选内容 🔖",
"点击 ●，切换深浅配色 🐼",
] #访客随机问候，为空不启用
mobileGreetings = [
"推荐电脑访问，体验更佳 💻",
] #移动端访客随机问候，为空使用 greetings输入喜欢的 emoji，会在用户清除筛选时庆祝撒花，感谢用户的访问，为空不启用：
confettiEmojis = [ '🥟', '🍜', '🍊', '🧧', '🧨', '🏮', '🎉', '🐺' ] # 清除筛选时撒花，为空不启用请编辑 hugo.toml 的 license，会写入网站的 Meta 信息（游客不会直接看到）。
可进一步在 layouts/partials/cc.html 配置页脚的授权信息（只在文章页脚，不会显示在首页），如不需要可删除。
访问 CC 授权 选择授权协议，并生成页脚授权的代码。
请在 static 下覆盖 logo、favcion 等文件修改图片，修改图标。推荐使用 favicon.io。
请编辑 hugo.toml，修改强调色，点击导航栏的 ⚫ 切换深浅配色：
[params]
lightColor = "#0000cd" # 浅色强调色，推荐较深
darkColor = "#fafafa" # 深色强调色，推荐较浅请编辑 hugo.toml 优化 SEO，支持隐私友好的开源 Umami 统计。
如你使用 Cloudflare 部署，可在该项目下的指标，开启 Web Analytics 进行统计。
可在 content/achrive 下放置历史数据，辅助优化搜索的 SEO。
如需 Search Console 等平台验证网站所有权，请将验证文件放在 static 下。
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（先行底行）是一种沟通方式，即在信息的开始部分先给出关键信息（即“底行”）。这样做可以让读者首先了解到最重要的信息。
本项目基于 Hugo 框架，并采用自建的 Bluf 主题：
content与data目录下的内容遵循 CC BY-NC 4.0 许可协议共享。- Bluf 主题因集成 Isotope，遵守 GPLv3 许可协议。
- 画廊模式：baguetteBox.js，MIT 协议。
- 庆祝撒花：js-confetti，MIT 协议。