企业官网建设流程全解析

把Obsidian主页做成仪表盘：人生进度条、卡片式布局与知识管理模板一次说清

【免费下载链接】obsidian-homepageObsidian homepage - Minimal and aesthetic template (with my unique features)项目地址: https://gitcode.com/gh_mirrors/obs/obsidian-homepage

先讲一个我朋友的故事。她的库不算小，几百篇笔记塞了两年，但每次打开 Obsidian，第一眼看到的永远是那串按字母排序的文件列表。找东西靠搜索，回忆靠运气，主页是什么？不存在的。直到某个周日晚上，她照着网上的模板折腾了两个小时，第二天早上打开软件，屏幕上是四张分类卡片、一行自动问候语，旁边还挂着一根写着"人生进度"的进度条。她跟我说，那一刻突然觉得这个软件"活"过来了。

后来她把这套东西分享给我，我才知道它叫 obsidian-homepage，一个主打极简与美学的 Obsidian 主页模板。这个模板解决的不是"怎么记笔记"，而是"打开笔记软件的第一眼，你看到了什么"。如果你也受够了默认的空白欢迎页，这篇文章大概能帮上忙。

打开后的第一印象：主页原来是门面，不是仓库

把模板导入库里运行起来，你会注意到它和传统主页的根本区别：它不是一堵贴满链接的墙，而是一张经过排版的信息面板。

模板在Homepage目录下提供了好几套方案，我印象最深的是Homepage v1.0 New Version.md。顶部是整幅横幅图片，中间是三张横向排开的卡片，分别叫 Self、Personal、Others，每张卡片里用 Obsidian 的内部链接和标签把你笔记库的顶层结构（比如00. Obsidian、10. Personal、50. Journal）全部收纳进去。右侧还有两栏嵌着人生进度和倒计时的折叠块，整个页面主次分明，一眼就知道该往哪里点。


这种"卡片式主页"的设计思路，说白了就是把"导航"这件事从文字列表升级成了视觉分区。你的笔记还是那些笔记，但入口变得有层次了。我个人很喜欢它用 CSS 片段实现卡片和横幅的做法——不是靠截图拼出来的假页面，而是纯 Markdown 加样式，意味着你可以随便改。


如果你偏爱更安静的风格，Homepage v1.0 Minimalist.md用的是一张浅粉底色的极简横幅，连标题都换成了日文假名，适合不喜欢信息堆砌的人。


从零到一：一个普通用户的花式搭建过程

我自己照着走了一遍，整个过程比想象中顺。别把它想成什么高深工程，本质上就是"拿模板、放进来、开开关"四件事。

先拿到模板本体。仓库里真正要用的只有Farouk's Homepage - Shiba Inu这一个文件夹，克隆下来之后，把它整个放进你的库目录即可：

git clone https://gitcode.com/gh_mirrors/obs/obsidian-homepage

再让 Obsidian 认识它。在软件里选择"打开其他库"，导航到克隆下来的目录，把它作为独立的库打开。这一步的坑在于：如果你不想和现有笔记混在一起，最好单独建库；如果只想借样式，也可以只把Homepage和Others Features两个子文件夹搬进现有库。

关键一步是启用 CSS 片段。卡片、多栏、横幅这些视觉效果，全指望Farouk's Homepage - Shiba Inu/.obsidian/snippets里那几个以【Main】开头的样式文件。打开 Obsidian 设置里的"外观 → CSS 片段"，把【Main】ITS callouts (infobox, cards).css拖进片段文件夹，刷新一次页面，卡片才会真正显示出来。跳过这一步的后果就是——页面长得跟普通纯文本一样，别问我是怎么知道的。

最后是首次运行。主页里的人生进度依赖 Dataview 插件，模板的.obsidian/plugins里已经带了对应插件目录，在社区插件市场里搜索安装 Dataview，然后去它的设置里把 dataviewjs 开启。倒计时和问候语则分别依赖 Templater 等插件，README 里都有说明。全部就绪后打开主页文件，你会看到问候语、卡片、进度条一起出现，那一刻还挺有成就感的。

深度玩法：把"人生进度条"调成你自己的刻度

模板里我最推荐上手的功能是Others Features/Life Progress.md里的人生进度条。它用 dataviewjs 算出一串百分比：今年的进度、本月的进度、今天的进度，以及你人生的进度。配上一个拉丁语副标题"メメント・モリ"（记得你终将死去），每次打开都像被温和地提醒了一句"时间在走"。

配置原理不复杂，核心就是DateTime对象。你只需要改三行，把出生日期换成自己的：

const lifespan = { year: 80 } const birthday = DateTime.fromObject({ year: 2000, // 改成你的出生年份 month: 10, // 改成你的出生月份 day: 20 // 改成你的出生日期 });

lifespan里的 80 是你设定的目标寿命，改成 90 或 75，人生进度就会按新的分母重算。剩下的年、月、日进度是代码自动推导的，不用管。如果你想调它的展示位置，回到主页文件里找![[Life Progress]]那两行，把它从右侧折叠块挪到卡片上方，页面的信息优先级就变了。

倒计时同理，在Others Features/Countdown.md里维护一个日期，它就会一直倒数：

let edate = moment("2023-12-31", "yyyy-MM-DD");

把日期改成你真正在乎的日子——考试、发薪日、某个纪念日都行。我习惯把"今年还剩多少天"和"人生进度"放在一起看，两个数字一对比，拖延症能被治好一半。

新手容易踩的四个坑

卡片死活不显示。十有八九是 CSS 片段没生效。检查片段文件名是否完整拖进了外观 → CSS 片段，并且确认开关是打开的。另外注意，片段文件夹在.obsidian/snippets下，和插件目录不要搞混。

进度条全部是 0% 或者不更新。这不是模板坏了，是 Dataview 的 dataviewjs 没启用，或者你的日期填错了格式。月份和日期必须是数字，别写"1月"这种中文，也别漏掉冒号。改完记得重开一次笔记页。

倒计时显示负数或者不跳。Countdown.md用的是 Templater 的动态语法，得先装好 Templater 插件并允许它在笔记里执行模板代码。如果日期已经过去，代码里的edate.add(1, "year")会自动把它顺延到下一年，所以看到"跳到明年"也不用慌，那是有意的设计。

主页加载偏慢。通常是横幅和卡片里引用了太多远程图片。模板默认用 GitHub 图床的壁纸，国内网络访问时快时慢。建议把图片下载到本地Attachements目录，改用![[本地文件名.png]]引用，速度会稳定很多。

灵感拓展：把主页当成你的"个人操作系统"

一旦跑通基础版，你会发现它像一套可以无限拼装的积木。

做多套主页切换。仓库里已经有Homepage v1.0 New Version、Minimalist、Dashboard几个版本，它们的定位各不相同。可以给"工作模式"配一套深色横幅，给"学习模式"配一套极简横幅，用 Workspaces 插件按场景切换。

把快捷按钮搬上主页。Others Features/Shiba Buttons.md里提供了大量现成的按钮代码，从切换深浅色、刷新页面、全屏聚焦，到一键打开维基百科和地图都有。Button Dash.md把常用命令排成了列表，配合 Buttons 插件，主页就能变成真正的控制台。

加入日记入口。Others Features/Table Links.md展示了如何用 dataview 动态生成"本月""今年"的日记链接，让主页每天自动长出当天的入口，再配合 Periodic Notes 插件，主页和日记体系就打通了。

换横幅、换配色。每个主页文件的 frontmatter 里都有banner、banner_y这些字段，改一行就能换一张横幅图。Shiba Buttons.md里还有一整套按钮配色方案（btn_blue、btn_red、btn_purple……），想调成自己的主题色也就是改个 class 的事。

结尾

一个顺手的知识管理系统，不该以"打开软件看到一堆文件"开始。obsidian-homepage 的价值不在于功能多花哨，而在于它把"我今天要干什么、这一年过到哪了"直接摆在了你面前。模板是开源的，拿回去随便改，哪怕只留下其中的卡片布局，也足够让你的笔记库体面不少。

想动手的话，克隆仓库https://gitcode.com/gh_mirrors/obs/obsidian-homepage，导入库，开好 CSS 片段，然后把出生日期填上——你的主页，今晚就能开张。

【免费下载链接】obsidian-homepageObsidian homepage - Minimal and aesthetic template (with my unique features)项目地址: https://gitcode.com/gh_mirrors/obs/obsidian-homepage