Question: Figure Cross Reference | 询问：图片交叉引用

[Social-Mean]

Does Docsify support figure cross reference? This need a caption Figure 1. XXXXXX. under each figure, and it can be referenced in the body of the text with corresponding hyperlinks to jump to.

---

Docsify 支持图片的交叉引用吗？这需要在每个图片下面添加一个类似 图1 XXXXXX 的图注，并且可以在正文中引用，并有对应的超链接可供跳转。

[Koooooo-7]

Hi @Social-Mean , do you wanna jump images only within one page or cross pages by image anchors ?

[Social-Mean]

Hi @Social-Mean , do you wanna jump images only within one page or cross pages by image anchors ?

Hi @Koooooo-7 , thank you for your reply. Just within one page is ok for me now, and cross pages is even better :)

[Koooooo-7]

I'm not sure if there were a plugin already made for it or not, you could search it first.

Within one page, I suppose you could do the trick if nothing plugins helps for now:

i.e.

• Add anchor id for the images you wanna do reference :id=NeedUniqueForEachImg.

![Image](myImg.png ':id=myImgAnchor')

• Add the jump links with the :id=TheImageAnchorId in your content and disable the link jumping default behavior.

Click the refer [MyImg](any ':id=myImgAnchor :disabled') and jump to it.

• Add a doneEach hook to handle the refer img link click event.

 hook.doneEach(() => {
 // search all refer links
 const anchors = document.querySelectorAll('a[id]');
 anchors.forEach(anchor => {
 // add click handler
 anchor.addEventListener('click', e => {
 // get the refer click target image id
 const target = anchor.getAttribute('id');
 // search target image id in current page
 const selector = `img[id="${target}"]`;
 // jump to it
 document.querySelector(selector)?.scrollIntoView({
 behavior: 'smooth',
 });
 });
 });
 });

On cross page, I suppose you may need handle the jump target in higher scope after page change.

[Social-Mean]

Thank you @Koooooo-7 .

A very silly question: where should I put the doneEach function?

[Koooooo-7]

Hi @Social-Mean
It is one of the docsify hooks, you can config it like this:

window.$docsify = {
 plugins: [
 function (hook, vm) {
 hook.doneEach(() => {
 ...
 });
 }
 ],
};

You could refer to the plugin hook doc and the examples.