Hexo X Obsidian 实现关系图谱页面

前期准备

安装 hexo-filter-titlebased-link 插件：解决文章双向链接渲染

uuanqin/hexo-filter-titlebased-link: Transfer wiki links (based on the title) in Markdown files to permalink. 将基于标题的双向链接转换为 Hexo 设定的永久链接。 (github.com)

1	npm install hexo-filter-titlebased-link --save

准备 obsidian2cosma 脚本：转换 Obsidian 文章为 Cosma 可识别的文章

下载此脚本重命名为obsidian2cosma.py，存放在根目录my_scripts文件夹。
uuanqin/obsidian2cosma: Convert Obsidian vaults to collection of notes readable by Cosma and Zettlr (github.com)
因为本站文章的 abbrlink 非 int 类型而是 string 类型，该脚本不支持因而进行了些修改：

1
2
3

// 155 行处
-  return int("0x" + hex_abbr, 16)
+  return hex_abbr

安装 Cosma：将文章生成关系图谱网站

Github：graphlab-fr/cosma: Cosma is a document graph visualization tool. It modelizes interlinked Markdown files and renders them as an interactive network in a web interface. (github.com)
Officials Webstie：Cosma | Installing Cosma (arthurperret.fr)

1	npm install @graphlab-fr/cosma -g

修改 Cosma 源码：为部署进行适配

修改默认cosma配置文件

修改源码中的core\models\config.js

解决需要手动填写cosma c命令生成config.yml中files_origin的问题
调整cosma配置文件修改样式

static base = Object.freeze({
  select_origin: 'directory',
  files_origin: './', //源文件路径
  nodes_origin: '',
  links_origin: '',
  nodes_online: '',
  links_online: '',
  images_origin: '',
  export_target: '',
  history: true,
  focus_max: 2,
  record_types: { undefined: { fill: '#E6E7E7', stroke: '#858585' } }, //结点颜色
  link_types: { undefined: { stroke: 'simple', color: '#e1e1e1' } },
  references_as_nodes: false,
  references_type_label: 'references',
  record_filters: [],
  graph_background_color: '#ffffff',
  graph_highlight_color: '#ff6a6a',
  graph_highlight_on_hover: true,
  graph_text_size: 10,
  graph_arrows: true,
  node_size_method: 'degree',
  node_size: 10,
  node_size_max: 20,
  node_size_min: 2,
  attraction_force: 200,
  attraction_distance_max: 250,
  attraction_vertical: 0,
  attraction_horizontal: 0,
  views: {},
  record_metas: [],
  generate_id: 'always',
  link_context: 'tooltip',
  hide_id_from_record_header: false,
  title: '',
  author: '',
  description: '',
  keywords: [],
  link_symbol: '',
  csl: '',
  bibliography: '',
  csl_locale: '',
  css_custom: '',
  devtools: false,
  lang: 'en',
});

替换点击关系图谱中结点为跳转为文章页面

修改源码中的`core\static\bundle.js

1
2
3

- ("data-node",(function(t){return t.id})).append("a").attr("href",(function(t){return"#"+t.id})
+ ("data-node",(function(t){return t.id})).append("a").attr("href",(function(t){return"/posts/"+t.id+".html"})

（废弃）修剪页面只显示画布

该方法已废弃，新实现通过hexo的custom_css完成
修改源码中的 core\static\styles\styles.css

1
2
3

+ aside,main,.close-button,#graph-controls {
+   display: none;
+ }

操作部署

生成关系图谱页面

在根目录创建\source\DO_NOT_RENDER\cosmoscope\文件夹存在
将\source\DO_NOT_RENDER路径添加到_config.yml的skip_render
参考：Configuration | Hexo
1
skip_render: "source/DO_NOT_RENDER/**"
在根目录package.json中scripts项里添加以下：

"scripts": {
  "ob2co": "python my_scripts/obsidian2cosma.py -i source/_posts -o my_scripts/cosma_dir/data --ignore -f --method abbrlink --attrreplacement categories,types date,begin --verbose",
  "cosma-data": "cd my_scripts/cosma_dir/data && cosma c && cosma m",
  "cosma-copy": "copy \".\\my_scripts\\cosma_dir\\data\\cosmoscope.html\" \".\\themes\\butterfly\\layout\\includes\\page\\Html\\cosmoscope.html\" ",
  "cosma-rm-output": "echo \"删除转换后的输出文件 - Cosma\" && rmdir /s /q .\\my_scripts\\cosma_dir\\data\\",
  "gen-cosma": "npm run ob2co && npm run cosma-data && npm run cosma-copy && npm run cosma-rm-output"
},

脚本中cosma-copy将生成的html文件移动到了主题内文件夹，可以自定义移动路径
使用npm run gen-cosma生成关系图谱页面，每次更新改关系图谱页面时需手动执行该命令

配置到网页页面

[[Hexo 自定义Page - 音乐页面]]

参考自定义cosmoscope页面

配置cosmoscope.pug:

1 2	#cosmoscope-page include Html/cosmoscope.html

配置source/cosmoscope/index.md

使用custom_css对页面样式进行修改,主要是对除canvas进行裁剪：

/* Cosmoscope 文章星图页面 */ 
body:has(#cosmoscope-page)  { 
    display: block !important;
}

#content-inner:has(#cosmoscope-page) {
    display: block!important;
    max-width:none;
    padding: 0 !important;
    border: 0;
}

#content-inner:has(#cosmoscope-page) > #page {
    background: none;
}

.graph-wrapper {
    background: rgba(0,0,0,0) !important;
}

body:has(#cosmoscope-page) aside,#footer,main,.close-button,#graph-controls {
    display: none;
}

（可选）配置到网站导航

在主题配置文件中添加以下配置:

1 2	menu: 文图: /cosmoscope \|\| fas fa-arrow-right-arrow-left

（可选）配置到网站侧边栏

参考：自定義側邊欄 | Butterfly
创建`source/_data/widget.yml

- class_name: seamless-card
	id_name:
	name:
	icon:
	order:
	html: |
		<div style="height: 250px">
		<iframe src=\".\\themes\\butterfly\\layout\\includes\\page\\Html\\cosmoscope.html\"frameborder="no" style="width: 100%; height: 100%"></iframe>
		</div>

记录拓展

存在问题

当文章的文件名与其meta.title不一致时，无法生成正确的连接。
cosmoscope.html中的部分文段在执行命令时会报错(YAMLException: end of the stream or a document separator is expected (24:26))，无影响待解决。