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.