maxchang3 / hexo-markmap Goto Github PK

View Code? Open in Web Editor NEW

55.0 55.0 8.0 3.25 MB

A hexo plugin insert mindmap in your hexo blog by markmap. 在 hexo 博客中插入思维导图。

Home Page: https://www.npmjs.com/package/hexo-markmap

License: MIT License

JavaScript 100.00%

hexo markmap markmap-lib mindmap

hexo-markmap's Introduction

Hi, It's Max! :P

me . blog . use . projects

Majoring in Data Science, currently attempting to be a coder.

El · Psy · Kongroo

hexo-markmap's People

Contributors

Stargazers

Watchers

Forkers

phamour galensgan hotarugali 17laifun appotry fly542 xzenyu 593413198

hexo-markmap's Issues

解决 KaTeX 字体渲染问题

最新版 markmap-view 下由于 KaTeX 字体使用 webfontloader 加载，若字体后于 markmap-view 加载，可能导致公式渲染错误。

控制台报错

报错信息：uncaught DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.
版本："hexo-markmap": "^1.1.5",
报错图片：

咋用啊

是在博客的文件夹安装然后在markdown中使用吗？
为啥我在markdown中写报错 'unknown block tag: markmap'

一个想法💡

感觉可以开发一个vs code 插件，就在vs code原有的markdown预览的基础上扩展，把预览思维导图的功能添加进去，这样的话在用vs code编写博客文件时，可以实时预览

在生成的分页数据中，没有包含 markmap 脚本，导致在首页无法显示

heox 会预先生成静态的分页数据，我发现当有很多文章时，在分页的html里不会包含 markmap 相关的脚本，导致无法加载markup。
见文件 516 行
index.zip

一个大胆的想法🤓

大佬你好，有一个想法就是能不能用butterfly主题用的 fancybox 这个图片点击放大的功能让思维导图放大全屏显示，大概就像下面图片一样，放大后也能操做思维导图的节点。
这样屏幕利用率会很高，看着也很得劲，不知道这个能不能实现。

您的博客不知道留言成功没有，一刷新我这不显示了，所以来这里了🤣

cdn.jsdelivr.net 在**境内无法访问，是否考虑替换为fastly.jsdelivr.net

可选链操作符有兼容性问题

INFO Validating config
ERROR {
err: /root/code_file/wiki/itdocs/node_modules/hexo-markmap/index.js:14
pjaxEnable: config?.hexo_markmap?.pjax || config?.theme_config?.pjax,
^

SyntaxError: Unexpected token '.'
at new Script (vm.js:88:7)
at createScript (vm.js:261:10)
at runInThisContext (vm.js:309:10)
at /root/code_file/wiki/itdocs/node_modules/hexo/lib/hexo/index.js:303:18
at tryCatcher (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/promise.js:547:31)
at Promise._settlePromise (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/promise.js:604:18)
at Promise._settlePromise0 (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/promise.js:649:10)
at Promise._settlePromises (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/promise.js:729:18)
at _drainQueueStep (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/async.js:93:12)
at _drainQueue (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/async.js:86:9)
at Async._drainQueues (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/async.js:102:5)
at Immediate.Async.drainQueues [as _onImmediate] (/root/code_file/wiki/itdocs/node_modules/bluebird/js/release/async.js:15:14)
at processImmediate (internal/timers.js:461:21)
} Plugin load failed: %s hexo-markmap

可以把导图设定成不可点击吗

写文章插入导图的时候，在浏览文章时如果鼠标放到导图上的话滚轮就不能控制页面滚动了。同时也会把思维导图的位置搞得乱七八糟的。

能否添加一个选项，使思维导图不能被点击。

无法渲染以下markdown

{% markmap 400px %}

- 全部初始化
  - 按顺序赋值
    - int a[[2](https://github.com/maxchang3/hexo-markmap/issues/new#)][3]={1,2,3,4,5,6};
  - 按行赋值
    - int a[[2](https://github.com/maxchang3/hexo-markmap/issues/new#)][3]={{1,2,3},{4,5,6}};

  - 全部初始化
    - 按顺序赋值c
      - `int a[2][3]={1,2,3,4,5,6};`
    - 按行赋值
      - `int a[2][3]={{1,2,3},{4,5,6}};`

  - 部分初始化
    - 按顺序赋值，其余为0
      - `int a[2][3]={1,2,3,4};`
    - 按行赋值，其余为0
      - `int a[2][3]={{1,2},{4}};`

  - 未初始化
    - 随机取值
      - `int a[2][3];`

{% endmarkmap %}

导图处空白

{% markmap 300px %}
- markmap
  - Demo
    - links
    - **inline** ~~text~~ *styles*
    - multiline
      content
    - HTML code is quite long      
  - Test
{% endmarkmap %}

$ hexo -v
INFO  Validating config
hexo: 6.3.0
hexo-cli: 4.3.1
os: win32 10.0.19045
node: 18.16.1
acorn: 8.8.2
ada: 1.0.4
ares: 1.19.1
brotli: 1.0.9
cldr: 42.0
icu: 72.1
llhttp: 6.0.11
modules: 108
napi: 8
nghttp2: 1.52.0
nghttp3: 0.7.0
ngtcp2: 0.8.1
openssl: 3.0.9+quic
simdutf: 3.2.2
tz: 2022g
undici: 5.21.0
unicode: 15.0
uv: 1.44.2
uvwasi: 0.0.15
v8: 10.2.154.26-node.26
zlib: 1.2.13

$ npm ls --depth=0
[email protected] F:\testBlog
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

如何设置根主题上的文字？

希望有个demo

进入文章界面后，必须要点刷新才能显示脑图

作者你好！我用的是 NEXT 模板，clean 后再 generate，然后发布，发现打开文章时，不会显示脑图，必须要点一下刷新才行，请问这是什么原因导致的呢？
链接：https://galens.uamazing.cn/posts/2022/1C9ATGS.html

Support auto fit

markmap-view provides the option to auto fit position by the content, its false by default. By testing, when set autoFit true in options, you can triiger fit function manually to reset its position by the content.

markmap-view 中提供了提供了根据内容适应的配置项，这默认是关闭的，经过测试，在 options 中增加 autoFit 配置，再手动触发 fit 函数可以重新根据内容适配 markmap 的位置。

An error occurs when KaTeX or Prism is disabled.

If you set katex: false and prism: false, the current logic will produce two blank strings in the array, leading to a loadCSS error and causing the markmap to fail to initialize.

related: #51

add custom CDN links config

增加自定义 CDN 配置项

Originally posted by @maxchang3 in #20 (comment)

页面出现 undefined 无法显示内容

如题，可以看看吗 @maxchang3

pjax 开启后从无 markmap 页面跳转无法正确将页面中的 script 插入

当某篇使用了mark-map的文章位于非第1页(比如第2页)时，当切换到那一页时，无法显示脑图
当使用搜索栏搜索文章，然后点击跳转时，也无法显示脑图。

主题名称：[email protected]

设想：关于插件的想法

用了一段时间了，我主要是用在站点的文档导航，感觉挺好的。谢谢作者的贡献。
然后就是一些关于插件的建议或者说想法

如果支持热点统计(访问点击哪个节点)，或者热点排序应该会挺好的。不过要对接后端估计是个问题
单节点可以自定义是否展开
鼠标滚轮进入图的会放大和缩小，但是因为没有明显的界限，所以我经常因为想滚动屏幕而缩小图了(一瞬间会让人有点错愕感)。

不过对于这点也没有好的建议。感觉加个边框，配合框内滚轮放大缩小的提示什么的可能会更好？
现在的可以用Ctrl+鼠标滚轮放大缩小，不过放大/缩小的比例不够精细。如果更精细的话，可能在区域内禁用鼠标滚轮会更好?
又测试了下，单独按住滚轮，可以控制精细的放大/缩小，就是比较费劲。这个应该我的鼠标也占一部分原因。。

组合效果：支持正常1倍的固定大小+禁止缩放+不可移动+自定义节点的展开收起

增加markmap的配置选项

注意到在markmap文档里有配置选项，比如自定义颜色、层级、线条宽度、额外的css之类的，咱插件能否给个选项options，让使用者进行个性化配置呢？

升级 markmap 到最新版本

出现错误，Unexpected end of JSON input

md文件

渲染之后

提示此处json解析有错

但主题本身没有使用pjax时，渲染报错

06:46:13.479 ERROR {
  err: TypeError: Cannot read properties of undefined (reading 'pjax')
      at getInnerData (/app/node_modules/hexo-markmap/index.js:22:91)
      at Hexo.<anonymous> (/app/node_modules/hexo-markmap/index.js:41:21)
      at Hexo.tryCatcher (/app/node_modules/bluebird/js/release/util.js:16:23)
      at Hexo.<anonymous> (/app/node_modules/bluebird/js/release/method.js:15:34)
      at /app/node_modules/hexo/lib/extend/filter.js:67:52
      at tryCatcher (/app/node_modules/bluebird/js/release/util.js:16:23)
      at Object.gotValue (/app/node_modules/bluebird/js/release/reduce.js:166:18)
      at Object.gotAccum (/app/node_modules/bluebird/js/release/reduce.js:155:25)
      at Object.tryCatcher (/app/node_modules/bluebird/js/release/util.js:16:23)
      at Promise._settlePromiseFromHandler (/app/node_modules/bluebird/js/release/promise.js:547:31)
      at Promise._settlePromise (/app/node_modules/bluebird/js/release/promise.js:604:18)
      at Promise._settlePromiseCtx (/app/node_modules/bluebird/js/release/promise.js:641:10)
      at _drainQueueStep (/app/node_modules/bluebird/js/release/async.js:97:12)
      at _drainQueue (/app/node_modules/bluebird/js/release/async.js:86:9)
      at Async._drainQueues (/app/node_modules/bluebird/js/release/async.js:102:5)
      at Async.drainQueues [as _onImmediate] (/app/node_modules/bluebird/js/release/async.js:15:14)
      at process.processImmediate (node:internal/timers:471:21)
} Render HTML failed: posts/cf0f47fd/index.html
06:46:13.483 ERROR TypeError: Cannot read properties of undefined (reading 'pjax')
    at getInnerData (/app/node_modules/hexo-markmap/index.js:22:91)
    at Hexo.<anonymous> (/app/node_modules/hexo-markmap/index.js:41:21)
    at Hexo.tryCatcher (/app/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/app/node_modules/bluebird/js/release/method.js:15:34)
    at /app/node_modules/hexo/lib/extend/filter.js:67:52
    at tryCatcher (/app/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/app/node_modules/bluebird/js/release/reduce.js:166:18)
    at Object.gotAccum (/app/node_modules/bluebird/js/release/reduce.js:155:25)
    at Object.tryCatcher (/app/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/app/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/app/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromiseCtx (/app/node_modules/bluebird/js/release/promise.js:641:10)
    at _drainQueueStep (/app/node_modules/bluebird/js/release/async.js:97:12)
    at _drainQueue (/app/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/app/node_modules/bluebird/js/release/async.js:102:5)
    at Async.drainQueues [as _onImmediate] (/app/node_modules/bluebird/js/release/async.js:15:14)
    at process.processImmediate (node:internal/timers:471:21)

使用hexo 主题 matery

config里面配置root路径后，会导致/js/markmap.js访问404

config里面配置root路径后，会导致/js/markmap.js访问404

_config.yml文件配置

url: http://yoursite.com/blog
root: /blog/

此时js的路径为/blog/js/markmap.js

新版运行报错 markmap.js:34 Uncaught SyntaxError: Unexpected token ':' (at markmap.js:34:14)

参数配置如下

hexo_markmap:
  pjax: false
  katex: true
  prism: true # true | false
  userCDN:
    d3_js: https://fastly.jsdelivr.net/npm/d3@6
    markmap_view_js: https://fastly.jsdelivr.net/npm/[email protected]
    katex_css: 'https://fastly.jsdelivr.net/npm/[email protected]/dist/katex.min.css'
    # prism_css: https://fastly.jsdelivr.net/npm/[email protected]/themes/prism.css
    prism_css: 'https://blog.17lai.site/libs/prism/prism.min.css'
  lockView: false
  fixSVGAttrNaN: false

生成的markmap.js代码如下

const initMarkmap = async () => {
    const debounce = (callback, wait) => {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => callback.apply(this, args), wait);
        };
    }
    const markmapResize = new CustomEvent('markmapResize')
    const robserver = new ResizeObserver((entries) => {
        entries.forEach(entry => entry.target.dispatchEvent(markmapResize))
    })

    const autoFit = (el, obj) => {
        robserver.observe(el.parentNode)
        el.parentNode.addEventListener('markmapResize', debounce(() => obj.fit(), 100))
    }
    const createMarkmap = () => {
        document.querySelectorAll('.markmap-container>svg').forEach(el => {
            let obj = markmap.Markmap.create(el, {
                autoFit: true
            }, JSON.parse(el.getAttribute('data')))
            autoFit(el, obj)

        })
    }

    if (window.markmap && Object.keys(window.markmap).length != 0) {
        createMarkmap();
        return
    }
    const CDN = {
        "js": {
            "d3": "https://fastly.jsdelivr.net/npm/d3@6",
            "markmap_view": "https://fastly.jsdelivr.net/npm/[email protected]",
        },
        "css": [
        https: //fastly.jsdelivr.net/npm/[email protected]/dist/katex.min.css
        https: //blog.17lai.site/libs/prism/prism.min.css
      ],
    }
    const loadElement = (elname, attr) => {
        const el = document.createElement(elname)
        for (let [name, value] of Object.entries(attr)) {
            el[name] = value
        }
        document.body.appendChild(el);
        return new Promise((res, rej) => {
            el.onload = res
            el.onerror = rej
        })
    }
    const loadScript = (url) => loadElement('script', {
        'src': url
    })
    const loadCSS = (url) => loadElement('link', {
        'href': url,
        'rel': "stylesheet"
    })
    const loadStyle = (style) => document.head.insertAdjacentHTML("beforeend",
        "<style>.markmap-container{display:flex;justify-content:center;margin:0 auto;width:90%;height:500px}.markmap-container svg{width:100%;height:100%}@media(max-width:768px){.markmap-container{height:400px}}</style>"
    )
    loadStyle()
    await loadScript(CDN.js.d3)
    await loadScript(CDN.js.markmap_view)
    await Promise.all(CDN.css.map(loadCSS))

    createMarkmap()
}
if (document.querySelector('.markmap-container')) {
    initMarkmap()
}

用AI助手查了下，AI的回复如下

这个错误是因为在第34行的 CDN 对象定义中的 css 属性赋值有语法错误:

"css": [
  https://fastly.jsdelivr.net/npm/[email protected]/dist/katex.min.css
  https://blog.17lai.site/libs/prism/prism.min.css 
]

数组元素之间使用的是冒号 ":",而不是逗号 ","。

应该修改为:

"css": [
  "https://fastly.jsdelivr.net/npm/[email protected]/dist/katex.min.css",
  "https://blog.17lai.site/libs/prism/prism.min.css"
]

使用逗号分隔数组元素,并添加引号将地址作为字符串。

这是一个典型的 JavaScript 语法错误,应该仔细检查对象字面量中的属性定义,确保使用了正确的语法。

可以支持自定义字体吗?

因为发现现在主题的字体对这个渲染不起作用。
=> 可以在配置里自定义字体吗？
比如

font:
  xmind:
    external: true
    family: Microsoft YaHei,sans-serif

现在的

{% markmap 666px %}
  - RPC
    - [<font face="Consolas">NIO</font>](xxxxlinksxxxxx) 
{% endmarkmap %}

可以达到效果,但是感觉不太灵活

Error: <g> attribute transform: Expected number, "translate(NaN,NaN) scale(N…".

I noticed that in the hexo-theme-volantis some errors are occurring for unknown reasons, such as the following: "Error: attribute transform: Expected number, "translate(NaN, NaN) scale(N…".

prism css 其它地方已经加载了的时候，是配置和其它地方一样的prism css地址还是有更好的配置方法？

如题 prism css 其它地方已经加载了的时候，是配置其它地方一样的prism css地址还是有更好的配置方法？

cdn.jsdelivr.net域名已经被投毒，需要换一下内部cdn地址，目前fastly.jsdelivr.com可用

fastly.jsdelivr.com 这个可用多久还不一定，支持cdn地址自定义参数设置，和js本地插入就好了

初始化默认查看时候可以调大小么

比较宽使得字体比较小，怎样默认调大呢？
多行字体时候行高不够，调大后出现超出了彩色线。

v1.3.0

#55
- #56
  - #59
#57

无法在一个页面中渲染多张图

hexo首页有多个思维导图，无法同时渲染，每次打开首页只能看到最上面的思维导图，下面的都没有渲染（什么都没有！），有没有办法fix一下
thank you!
参考网站lblk.github.io/single_site

pjax config structure is different in different themes

for hexo-theme-next

pjax: false

for hexo-theme-butterfly

pjax:
  enable: false
  exclude:
    # - xxxx
    # - xxxx

this might cause problems using just a single option theme_config.pjax to detective whether pjax is turned on in theme config

是否可以尝试添加全屏操作

思维导图过多时，可能看着还不是很方便，是否可以尝试添加全屏，类似图片全屏

npm install hexo-markmap 无法安装

我用了GitHub的action进行部署：

jobs:
  pages:
    runs-on: ubuntu-latest #使用的系统
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v3 #调用官方的脚本，直接复制我们的项目文件到系统 
      - name: 安装node
        uses: actions/setup-node@v2 #安装node环境
        with:
          node-version: "18"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: |
          npm install
          npm install hexo-markmap
          npm install hexo-theme-next
          npm install hexo-word-counter
          npm install hexo-related-posts
          npm install hexo-generator-searchdb

每次执行到安装Install Dependencies时候，都会报错

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated cuid@[2](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:4:2).1.8: Cuid and other k-sortable and non-cryptographic ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Use @paralleldrive/cuid2 instead.
added 247 packages, and audited 248 packages in 10s
26 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
added 1 package, and audited 249 packages in 908ms
26 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
added 1 package, and audited 250 packages in 1s
26 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
added 2 packages, and audited 252 packages in 3s
26 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
added 9 packages, and audited 261 packages in 3s
[29](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:4:29) packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
added 1 package, and audited 262 packages in 7[30](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:4:30)ms
29 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

到了后面build之后就会出现：

Run npm run build
> [email protected] build
> hexo generate
INFO  Validating config
ERROR Plugin load failed: hexo-markmap
Error: Cannot find module 'markmap-lib'
Require stack:
- /home/runner/work/07blog/07blog/node_modules/hexo-markmap/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:107[5](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:6):15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at req (/home/runner/work/07blog/07blog/node_modules/hexo/lib/hexo/index.js:292:23)
    at /home/runner/work/07blog/07blog/node_modules/hexo-markmap/index.js:1:90
    at /home/runner/work/07blog/07blog/node_modules/hexo/lib/hexo/index.js:305:14
    at tryCatcher (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/util.js:1[6](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:7):23)
    at Promise._settlePromiseFromHandler (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/promise.js:604:1[8](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:9))
    at Promise._settlePromise0 (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/promise.js:64[9](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:10):[10](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:11))
    at Promise._settlePromises (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/promise.js:729:18)
    at _drainQueueStep (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/async.js:93:[12](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:13))
    at _drainQueue (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/async.js:102:5)
    at Async.drainQueues [as _onImmediate] (/home/runner/work/07blog/07blog/node_modules/bluebird/js/release/async.js:15:[14](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:15))
    at process.processImmediate (node:internal/timers:476:[21](https://github.com/android1122/07blog/actions/runs/5373061572/jobs/9747067041#step:5:22))

这个是插件的依赖已经被弃用了导致的吧。大佬有解决方案么？

标签包裹的 markdown 会在编辑器预览中被渲染，易与正文混淆且影响版面

外挂标签引入之后在不支持hexo的md查看器中会看到{% markmap 800px 1%} {% endmarkmap %}包裹的内容，这样如果思维导图比较大的话会比较烦，我觉得可以考虑在包裹内容内加md专属的注释符号把内容注释掉来使用这个功能，这样就能实现本地预览器看不到包裹的内容而又可以在博客正常生成思维导图的效果，一个小小的建议。
因为我是想使用这个插件来做一个目录的，这样如果目录层级多的话会给本地预览带来很多不便，我提的这个建议其实只需稍微变更一下匹配规则就可以更完美一些。