hexo博客中增加知识图谱页

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>

过程大概是这个样子的，如果中间遇到什么问题欢迎与我联系。