Hi, It's Max
! :P
Majoring in Data Science, currently attempting to be a coder.
El · Psy · Kongroo
A hexo plugin insert mindmap in your hexo blog by markmap. 在 hexo 博客中插入思维导图。
Home Page: https://www.npmjs.com/package/hexo-markmap
License: MIT License
最新版 markmap-view 下由于 KaTeX 字体使用 webfontloader 加载,若字体后于 markmap-view 加载,可能导致公式渲染错误。
是在博客的文件夹安装然后在markdown中使用吗?
为啥我在markdown中写报错 'unknown block tag: markmap'
感觉可以开发一个vs code 插件,就在vs code原有的markdown预览的基础上扩展,把预览思维导图的功能添加进去, 这样的话在用vs code编写博客文件时 ,可以实时预览
heox 会预先生成静态的分页数据,我发现当有很多文章时,在分页的html里不会包含 markmap 相关的脚本,导致无法加载markup。
见文件 516 行
index.zip
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
写文章插入导图的时候,在浏览文章时如果鼠标放到导图上的话滚轮就不能控制页面滚动了。同时也会把思维导图的位置搞得乱七八糟的。
能否添加一个选项,使思维导图不能被点击。
{% 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
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 的位置。
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
增加自定义 CDN 配置项
Originally posted by @maxchang3 in #20 (comment)
如题,可以看看吗 @maxchang3
当某篇使用了mark-map的文章位于非第1页(比如第2页)时,当切换到那一页时,无法显示脑图
当使用搜索栏搜索文章,然后点击跳转时,也无法显示脑图。
主题名称:[email protected]
用了一段时间了,我主要是用在站点的文档导航,感觉挺好的。谢谢作者的贡献。
然后就是一些关于插件的建议或者说想法
注意到在markmap文档里有配置选项,比如自定义颜色、层级、线条宽度、额外的css之类的,咱插件能否给个选项options
,让使用者进行个性化配置呢?
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.yml
文件配置
url: http://yoursite.com/blog
root: /blog/
此时js的路径为/blog/js/markmap.js
参数配置如下
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 %}
可以达到效果,但是感觉不太灵活
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地址还是有更好的配置方法?
fastly.jsdelivr.com 这个可用多久还不一定,支持cdn地址自定义参数设置,和js本地插入就好了
hexo首页有多个思维导图,无法同时渲染,每次打开首页只能看到最上面的思维导图,下面的都没有渲染(什么都没有!),有没有办法fix一下
thank you!
参考网站lblk.github.io/single_site
for hexo-theme-next
pjax: false
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
思维导图过多时,可能看着还不是很方便,是否可以尝试添加全屏,类似图片全屏
我用了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))
这个是插件的依赖已经被弃用了导致的吧。大佬有解决方案么?
外挂标签引入之后在不支持hexo的md查看器中会看到{% markmap 800px 1%} {% endmarkmap %}包裹的内容,这样如果思维导图比较大的话会比较烦,我觉得可以考虑在包裹内容内加md专属的注释符号把内容注释掉来使用这个功能,这样就能实现本地预览器看不到包裹的内容而又可以在博客正常生成思维导图的效果,一个小小的建议。
因为我是想使用这个插件来做一个目录的,这样如果目录层级多的话会给本地预览带来很多不便,我提的这个建议其实只需稍微变更一下匹配规则就可以更完美一些。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.