《构建个人知识图谱》015：使用知识图谱生成导航网站 - 1

化繁为简，给个人知识图谱增加一个新的展现（使用）形式 -- 网站导航。

灵感

昨天刷抖音，看到有人推荐 AI 资源站，AI 工具导航资源站在去年 5、6月份 的时候特别火爆，再次看到历史感。

一般大家都是使用 CMS 工具(比如WordPress)搭建一个网站，把流行的工具丢上去。 既能自己备忘，又方便他人。

然后我就想到知识图谱工具，无论在 2D、3D 还是 网站类型的图谱呈现，我们再使用的时候脑子里面想的都是知识库图、节点、联系等等。 不免有点儿累，不如浏览普通网站那么轻松。何不如把两者工具结合起来，对特定结构的知识图书节点进行导航。

设计

接下来我们设计一下 UI。

关于设计 设计无非是为了让你做的东西 能用，以及 更好用。 对于导航这个展示方式来说，看了看各家的导航站，几乎都 一样，而且都 挺好用。 说明这个方式基本符合能用以及好用两个标准，我们直接依照着实现一个简化版本就好了。

整体布局

用最经典的三分法，把页面分成三部分：

实现的话 CSS 都不用写，直接去 Element Plus 文档上拷贝一个 Demo。

• • Element Plus 文档：https://element-plus.org/zh-CN/component/container.html^[1]

头部

头部咱们也简单一点，加一个Logo得了。

为了清楚点区分三部分，加个背景图，给头部加一个小阴影样式 shadow。

侧边分组

应为个人图谱数据比较多，我们侧边分组用知识图谱的标签 Label 来分组，

关于分组 部分图谱数据很多，可能有大几百条。所以之前考虑过拿每个标签的二级子节点来当做目录。 这样就有一个切换标签的操作，为了简单期间，我还是把一级标签作为左侧导航分组。

我当前只有这么几个分组：

放在界面上的效果：

这里还是使用 Element Plus 的菜单组件 Demo 代码修改。

内容

节点 Logo

为了让其更美观，节点Logo是少不了的，如果都是文本，肯定不好看。

比如这样，我们很难有浏览的兴致：

下面我们就给相关节点都增加 Logo 数据，首先在系统里面增加对应的字段存储，考虑到Logo有不同的版式 （比如横版、竖版、黑色、白色等），我们用五个位置存储五个Logo图片备用。

为了方便查找图表，我们放了两个搜索引擎的超链接，点击即可搜搜对应的Logo图片：

一般前几个图片就能满足我们的需求。

经过漫长的等待，看到 Logo 都更新了，当然其中不免有一些奇奇怪怪的东西（暂时先不管）。

我们把图片和简介给放到界面上，每个节点用 Flex 布局一下。

鼠标悬浮的时候，增加一个浮动阴影效果，点击即可打开对应网站。

总结

我们把还是图谱作为数据组织的方式，用工具导航的页面作为数据展示的方式，实现了今天的扩展。 同时用到了知识节点的许多属性：

• • 名称

• • Logo图片

• • 介绍

• • 主页地址（用于跳转）

节点关系 由于导航的浏览方式简单（简单正是它的优点），所以这次扩展没有对关系做过多的设计和开发。

引用链接

[1]: https://element-plus.org/zh-CN/component/container.html

---

--- END ---