图片 caption 不能正常渲染

[tisonkun]

Issue Checklist

• I am using NexT version 8.0 or later.
• I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
• I have already searched for current issues, which does not help me.

Expected behavior

图片的 caption 能正常渲染。

Actual behavior

https://www.tisonkun.org/2023/05/19/git-branch-and-release/

1. 独立快速迭代，分支内部评审合并
2. **定期合并上游的变更**
3. 稳定后提交到上游

[OpenJDK](https://github.com/openjdk/) 是特性分支的成熟实践者，他们甚至会为特性分支创建单独的代码仓库。

{% asset_img openjdk-projects.png OpenJDK 的特性分支仓库 %}

上图中，loom / amber / valhalla 都对应到一个或多个 JDK 功能提案，最终都是会以合入 JDK 主分支结束自己的生命周期。

Steps to reproduce the behavior

同上，{% asset_img openjdk-projects.png OpenJDK 的特性分支仓库 %} 有 caption 内容，但不显示。

Node.js and NPM Information

部署在 Vercel 上

* Node 18
* Yarn 3.5.1

Package dependencies Information

• https://github.com/tisonkun/blog/blob/main/package.json
• https://github.com/tisonkun/blog/blob/main/yarn.lock

Hexo Configuration

https://github.com/tisonkun/blog/blob/main/_config.yml

NexT Configuration

https://github.com/tisonkun/blog/blob/main/_config.next.yml

Other Information

<a class="fancybox" href="http://localhost:4000/2023/05/19/git-branch-and-release/openjdk-projects.png" itemscope="" itemtype="http://schema.org/ImageObject" itemprop="url" data-fancybox="default" title="OpenJDK 的特性分支仓库" data-caption="OpenJDK 的特性分支仓库"><img src="/2023/05/19/git-branch-and-release/openjdk-projects.png" class="" title="OpenJDK 的特性分支仓库"></a>

生成的 HTML 如上，看出来是有内容的，但是渲染不正常。

[tisonkun]

我记得在以前的某个时间，这个 caption 是可以正常工作的，后来我应该没改配置也没加减依赖，但是跟着 Dependent Bot 升级了某些依赖的版本，也没仔细检查效果。今天写的新文里有图片才发现不对。

[stevenjoezhang]

可以参考 hexojs/hexo-renderer-marked#264 和 #677
这个图片 caption 功能之前是 markdown 插件支持了一部分，NexT 主题支持了一部分（而且还和 fancybox 耦合了），比较混乱，重构之后把它们分开了。
不过现在 hexo-renderer-marked 还没有发布新版本，所以还用不了……我近期发布一下

[tisonkun]

好的，我看下。

而且还和 fancybox 耦合了

对的，我记得之前有个 popup zoom-in/zoom-out 还是啥类似的需求，我开了 fancybox 功能..

[tisonkun]

@stevenjoezhang 所以现在的状况是等 hexo-renderer-marked 发新版本后升级上去就行，还是需要手动再改某个配置呢？

[stevenjoezhang]

等 hexo-renderer-marked 发新版本就行～

[tisonkun]

我在本地更新 "hexo-renderer-marked": "^6.2.0" 以后似乎 preview 没有改变，或许你可以在我的 blog repo 上升级下看看？

[tisonkun]

或者可以直接看 vercel 的 preview tisonkun/blog#100

• https://blog-3wpmgh2oz-tisonkun.vercel.app/2023/05/19/git-branch-and-release/

[stevenjoezhang]

改一下Hexo的_config.yml

marked:
  figcaption: true

[tisonkun]

还是不行，我下面发了录屏。如果你测试是 OK 的话，或许提个 PR 可以在 Vercel Preview 上 Verify ？

Screen.Recording.2023-12-09.at.09.19.26.mov

[tisonkun]

@stevenjoezhang 我看生成的页面有这个 caption 的信息，但是没 render 出来：

<img src="/2023/05/19/git-branch-and-release/openjdk-projects.png" class="" title="OpenJDK 的特性分支仓库">

[stevenjoezhang]

是的，很尴尬，生成的 caption 只在 figure 元素里面是显示的，否则会被浏览器忽略。我没考虑这一点，之后还要改改……

[tisonkun]

行，有相关 issue 或者 PR 可以 ping 我 subscribe 一下 ..

[stevenjoezhang]

hexo-renderer-marked 的下个版本 6.3.0 应该能好 hexojs/hexo-renderer-marked#279

@tisonkun 6.3.0 版本发布了，你升级一下试试

[Chandler-Lu]

hexo-renderer-marked 的下个版本 6.3.0 应该能好 hexojs/hexo-renderer-marked#279

@tisonkun 6.3.0 版本发布了，你升级一下试试

如果使用标准 Markdown 写作，是可以的：

![test](https://example.com/1.jpg)

<figure><a class="fancybox" href="https://example.com/1.jpg" itemscope="" itemtype="http://schema.org/ImageObject" itemprop="url" data-fancybox="default" title="test" data-caption="test"><img src="https://example.com/1.jpg" alt="test"></a><figcaption aria-hidden="true">test</figcaption></figure>

如果用 img 标签，则依然无法显示：

<img src="https://example.com/1.jpg" alt="test" style="zoom: 50%;" />

<a class="fancybox" href="https://example.com/1.jpg" itemscope="" itemtype="http://schema.org/ImageObject" itemprop="url" data-fancybox="default" title="test" data-caption="test"><img src="https://example.com/1.jpg" alt="App Center" style="zoom: 50%;"></a>

[stevenjoezhang]

嗯嗯，因为你写html元素的话markdown渲染器是不会修改的，这是预期行为。

[tisonkun]

{% asset_img openjdk-projects.png OpenJDK 的特性分支仓库 %}

<img src="[/2023/05/19/git-branch-and-release/openjdk-projects.png](http://localhost:4000/2023/05/19/git-branch-and-release/openjdk-projects.png)" class="" title="OpenJDK 的特性分支仓库">

似乎还是有点问题，会渲染成这样

换成

![OpenJDK 的特性分支仓库](git-branch-and-release/openjdk-projects.png)

能显示 caption，但是跟 asset folder 不兼容，图片会裂开。用 Markdown 语法的话，图片怎么放置引用合适呢？

[stevenjoezhang]

@tisonkun 你可以试试hexo-renderer-marked的postAsset选项（默认是关闭的），它会自动把asset的路径加上，避免图片裂开

[tisonkun]

不行，已经是 true 了。我推个分支，你有兴趣可以看看怎么回事。我现在已经摆烂不管了（x）

[tisonkun]

tisonkun/blog#113

[stevenjoezhang]

@tisonkun 你把

![OpenJDK 的特性分支仓库](git-branch-and-release/openjdk-projects.png)

改成

![OpenJDK 的特性分支仓库](openjdk-projects.png)

就行了。这个postAsset选项非常智能，会帮你找到子目录的。

[tisonkun]

好的，可以了。虽然 GitHub 上 markdown 会裂，但是渲染的 OK 了。

感谢！

[stevenjoezhang]

Hexo这个设计确实被吐槽的比较多，因为和typora之类的编辑器能识别的路径不一样。我自己一般直接写绝对路径，也不用可视化预览，就没有这个烦恼了hh