链接节点与图片节点

2.2.1 链接节点：枝条上挂网址

标准 Markdown 链接语法 [文字](网址) 可以直接用在节点里，渲染成可点击的链接节点：

# 常用文档入口
- 编程
  - [Python 官方文档](https://docs.python.org/zh-cn/3/)
  - [MDN Web 文档](https://developer.mozilla.org/zh-CN/)
- 工具
  - [KaTeX 语法手册](https://katex.org/docs/supported)
  - [Mermaid 在线编辑器](https://mermaid.live)

—— 渲染效果 ——

读者在阅读页点这些节点，会在新标签页打开对应网站。「资源导航」是链接节点最经典的用法：一张图就是一页收藏夹，而且每个链接都长在它的分类枝条上，比一列平铺的收藏夹好找得多。

链接文字可以和富文本组合，比如 [**官方** Python 文档](https://docs.python.org/zh-cn/3/)——加粗的链接节点在导航图里格外醒目。

2.2.2 一个反直觉的坑：裸网址不成链

直接把网址粘进节点，它只是一个普通文本节点，不可点击：

# 两种写法的差别
- 裸网址：https://www.wanxiangyundang.top
  - 只是文本，点不动
- 链接语法：[万象云档](https://www.wanxiangyundang.top)
  - 可点击跳转

—— 渲染效果 ——

想跳转，必须老老实实写 [文字](网址)。这个坑在快速粘贴资料时最常见——粘完记得补一对中括号和小括号。

2.2.3 图片节点：枝头上开花

Markdown 图片语法 ![说明](图片地址) 写进节点，Markmap 会把图片直接渲染在枝条上：

# 视觉笔记
- 万象云档的默认封面
  - ![默认封面](/static/images/book.png)
- 用法
  - 图片跟着节点走
  - 缩放脑图时同步缩放

—— 渲染效果 ——

图片节点在阅读页按原始尺寸渲染，缩放整图时会跟着一起缩放，非常适合「图文笔记」类场景：在分类枝条上挂示意图、截图、手绘。

三个实用注意点：

1. 图片地址写完整 URL 最稳（以 http 开头），站内相对路径（如上例的 /static/images/book.png）也可用；
2. 图片规格别太大：一张几 MB 的大图会让整个脑图加载变慢，截图先压一压；
3. 图挂在哪层都行，但挂得太深会被折叠藏起来——重要图片挂二、三层。

2.2.4 实战：一张「学习资源树」

把链接、图片、富文本揉在一起，就是一张实用的学习资源图——链接负责跳转，图片负责「看见」，样式负责分层：

# 前端学习资源
- **基础三件套**
  - HTML：[MDN HTML 教程](https://developer.mozilla.org/zh-CN/docs/Web/HTML)
  - CSS：[MDN CSS 教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS)
  - JavaScript：[现代 JS 教程](https://zh.javascript.info)
- **工具**
  - [GitHub](https://github.com)
  - [Can I Use](https://caniuse.com)（查浏览器兼容）
- **练习项目**
  - ==先做作品集==，再投简历

—— 渲染效果 ——

链接与图片让节点从「文字」升级成「入口」和「画面」。下一篇再进一步——让节点显示公式：数学、物理、金融笔记的刚需（见 《公式节点：在分支里写 KaTeX》）。