1. 增加页面
新建知识图谱页面
hexo new page "graph"
执行完成之后在source 下面会增加 graph 文件夹以及文件夹中增加一个 index.md 文件
2. 配置菜单
在 主题下面的_config.yml 文件中配置图谱页面菜单,在 menu下添加:
# 配置菜单导航的名称、路径和图标icon.
menu:
Index:
url: /
icon: fas fa-home
Graph:
url: /graph #增加的图谱菜单
icon: fa fa-graduation-cap
3. 配置中文菜单名称
在 languages 路径下的 zh-CN.yml 文件添加配置:
graph: 知识图谱
4. 创建图片关系数据
在source 下的 _data 路径下新建 graphs.json 文件里面存放的是图谱展示的数据
[
{ "id": "root", "isroot": true, "topic": "知识图谱" ,"isLink": false},
{ "id": "Language", "parentid": "root", "isLink": false, "topic": "Language", "direction": "right", "expanded": true},
{ "id": "Bigdata", "parentid": "root", "topic": "大数据", "direction": "right" , "isLink": false, "expanded": true},
{ "id": "Bigdata1", "parentid": "Bigdata", "topic": "计算引擎", "isLink": false, "expanded": true},
{ "id": "Bigdata2", "parentid": "Bigdata", "isLink": false, "topic": "数据存储", "expanded": true},
{ "id": "Bigdata3", "parentid": "Bigdata", "topic": "消息队列", "isLink": false , "expanded": true},
{ "id": "Bigdata4", "parentid": "Bigdata", "topic": "其他框架", "isLink": false , "expanded": true},
{ "id": "other", "parentid": "root", "topic": "其他", "direction": "right" , "isLink": false, "expanded": true}
]
节点简单说明:
isLink:是否是连接
expanded:是否展开子节点
5. 增加模板引擎
在主题路径下的 layout 下增加 graph.ejs,这里就是真正使用数据生成图谱的位置。
需要引入脑图的 css 和 js 文件
kmsjsmap.css
kmsjsmap.js
<main class="content">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=8">
<link rel="stylesheet" type="text/css" href="https://images.hnbian.cn/kmsjsmap.css">
<style>
#jsmind_container {
height: 900px;
background: #ffffff00;
}
</style>
<script src="https://images.hnbian.cn/jquery.min.mind.js"></script>
<script src="https://images.hnbian.cn/kmsjsmap.js" type="text/javascript"></script>
<div id="jsmind_container"></div>
<!--引入图JSON数据-->
<% var graphs = site.data.graphs; %>
<p id="graphsValue" hidden>[
<% for (var i = 0, len = graphs.length; i < len; i++) { %>
<% var graph = graphs[i]; %>
<% if (i == graphs.length -1) { %>
{
"id": "<%- graph.id %>",
"parentid": "<%- graph.parentid %>",
"direction":"<%- graph.direction %>",
"topic": "<%- graph.topic %>",
"expanded":"<%- graph.expanded %>",
"isLink": <%- graph.isLink %> ,
"link":"<%- graph.link %>"
}
<% } else if (i == 0){%>
{
"id": "<%- graph.id %>",
"isroot": true,
"parentid": "<%- graph.parentid %>",
"direction":"<%- graph.direction %>",
"topic": "<%- graph.topic %>",
"expanded":"<%- graph.expanded %>",
"isLink": <%- graph.isLink %> ,
"link":"<%- graph.link %>"
},
<% }else { %>
{
"id": "<%- graph.id %>",
"parentid": "<%- graph.parentid %>",
"direction":"<%- graph.direction %>",
"topic": "<%- graph.topic %>",
"expanded":"<%- graph.expanded %>",
"isLink": <%- graph.isLink %> ,
"link":"<%- graph.link %>"
},
<% } %>
<% } %>
]
</p>
<script type="text/javascript">
var jsondata = jQuery.parseJSON( $("#graphsValue").text());
kmsjsmap.init({
container: "jsmind_container",
data: jsondata,
editable: false,
onRelation: function (item) {
//console.log('当前选择中的是', item)
kmsjsmap.setLinkStatus({
id: item.id,
isLink: item.data.isLink === true ? true : false
})
if (true == item.data.isLink) {
window.open(item.data.link);
}
}
});
</script>
</main>
过程大概是这个样子的,如果中间遇到什么问题欢迎与我联系。