next-theme
图片 caption 不能正常渲染
Issue Checklist
- [X] I am using NexT version 8.0 or later.
- [X] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
- [X] 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 如上，看出来是有内容的，但是渲染不正常。
我记得在以前的某个时间，这个 caption 是可以正常工作的，后来我应该没改配置也没加减依赖，但是跟着 Dependent Bot 升级了某些依赖的版本，也没仔细检查效果。今天写的新文里有图片才发现不对。
可以参考 https://github.com/hexojs/hexo-renderer-marked/pull/264 和 https://github.com/next-theme/hexo-theme-next/pull/677 这个图片 caption 功能之前是 markdown 插件支持了一部分，NexT 主题支持了一部分（而且还和 fancybox 耦合了），比较混乱，重构之后把它们分开了。 不过现在 hexo-renderer-marked 还没有发布新版本，所以还用不了……我近期发布一下
好的，我看下。
而且还和 fancybox 耦合了
对的，我记得之前有个 popup zoom-in/zoom-out 还是啥类似的需求，我开了 fancybox 功能..
我在本地更新 "hexo-renderer-marked": "^6.2.0" 以后似乎 preview 没有改变，或许你可以在我的 blog repo 上升级下看看？
或者可以直接看 vercel 的 preview https://github.com/tisonkun/blog/pull/100
- https://blog-3wpmgh2oz-tisonkun.vercel.app/2023/05/19/git-branch-and-release/
还是不行，我下面发了录屏。如果你测试是 OK 的话，或许提个 PR 可以在 Vercel Preview 上 Verify ？
https://github.com/next-theme/hexo-theme-next/assets/18818196/bbce0c1b-462b-4a94-a407-c30523e872ce
@stevenjoezhang 我看生成的页面有这个 caption 的信息，但是没 render 出来：
<img src="/2023/05/19/git-branch-and-release/openjdk-projects.png" class="" title="OpenJDK 的特性分支仓库">
hexo-renderer-marked 的下个版本 6.3.0 应该能好 https://github.com/hexojs/hexo-renderer-marked/pull/279
@tisonkun 6.3.0 版本发布了，你升级一下试试
hexo-renderer-marked 的下个版本 6.3.0 应该能好 hexojs/hexo-renderer-marked#279
@tisonkun 6.3.0 版本发布了，你升级一下试试
如果使用标准 Markdown 写作，是可以的：
<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>
{% 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 的特性分支仓库">
似乎还是有点问题，会渲染成这样
换成
能显示 caption，但是跟 asset folder 不兼容，图片会裂开。用 Markdown 语法的话，图片怎么放置引用合适呢？
@tisonkun 你可以试试hexo-renderer-marked的postAsset选项（默认是关闭的），它会自动把asset的路径加上，避免图片裂开
@tisonkun 你把
改成
就行了。这个postAsset选项非常智能，会帮你找到子目录的。
Hexo这个设计确实被吐槽的比较多，因为和typora之类的编辑器能识别的路径不一样。我自己一般直接写绝对路径，也不用可视化预览，就没有这个烦恼了hh