Introducing Tdesign into vitepress and adding large image preview globally

29/09/2023 /

Original link: https://justin3go.com/%E5%8D%9A%E5%AE%A2/2023/09/29vitepress%E4%B8%AD%E5%BC%95%E5%85%A5Tdesign%E5% B9%B6%E5%85%A8%E5%B1%80%E5%A2%9E%E5%8A%A0%E5%A4%A7%E5%9B%BE%E9%A2%84%E8%A7% 88.html

Introduce tdesign into vitepress and add large image preview ​ globally

Preface ​

Recently, I encountered a problem that I had dealt with before. I was reading my previous articles, huh? I found that the pictures cannot be clicked to preview. I right-clicked to view them in a new tab, so I decided to add a large picture preview function to my blog, like this:

Introducing the large image preview component ​

Here you can just choose a commonly used UI component library according to your own habits, such as element-plus. The author here chooses tdesign . Basically, you can enter the configuration according to its official installation document . It is worth noting that:

The Vite configuration of Vitepress is configured in config.ts. You can refer to this Vitepress document link . The author’s configuration code is here.

tdesign combines with vitepress to switch dark/light mode ​

The requirements in tdesign are as follows:

ts

 // 设置暗色模式document . documentElement . setAttribute ( ' theme-mode ' , ' dark ' ) ; // 重置为浅色模式document . documentElement . removeAttribute ( ' theme-mode ' ) ;

The basic idea is as follows:

  1. Monitor the isDark responsive variable exposed by vitepress
  2. When isDark changes to true , set to dark mode through the above code
  3. When isDark changes to false , reset to light mode through the above code

Click to view code location

html

 < template ></ template > < script setup lang = " ts " > import { useData } from " vitepress " ; import { watch } from " vue " ; const { isDark } = useData () ; // tdesign暗色切换https://tdesign.tencent.com/vue-next/dark-mode watch ( isDark ,	() => {    if ( isDark . value ) {      document . documentElement . setAttribute ( ' theme-mode ' , ' dark ' ) ;    } else {      document . documentElement . removeAttribute ( ' theme-mode ' ) ;    }	},	{		immediate : true ,	} ) ; </ script >

Then wherever you use the tdesign component, just import the component and place it anywhere .

Combine with vitepress to bind this component &ZeroWidthSpace; to all pictures

The basic idea here is as follows:

  1. Find all images on the page
  2. Listen for click events on images
  3. Bind the image preview effect to the click event

The code is as follows, click to view the specific location . This part of the code refers to the writing method of this link . If you are using element-plus, you can directly copy the code of this link.

ts

 < template >  < div class = " image-viewer " >    < t - image - viewer v - model : visible = " show " :images = " previewImageInfo.list " : default - index = " previewImageInfo.idx " :key = " previewImageInfo.idx " @ close = " show = false " >    </ t - image - viewer >    < tdesign - dark > </ tdesign - dark >  </ div > </ template > < script setup lang = " ts " > import { onMounted , onUnmounted , reactive , ref } from ' vue ' import tdesignDark from ' ./tdesignDark.vue ' ; const show = ref ( false ) const previewImageInfo = reactive <{ url : string ; list : string [] ; idx : number }> (  {    url : '' ,    list : [] ,    idx : 0  } ) function previewImage ( e : Event ) {  const target = e . target as HTMLElement  const currentTarget = e . currentTarget as HTMLElement  if ( target . tagName . toLowerCase () === ' img ' ) {    const imgs = currentTarget . querySelectorAll < HTMLImageElement > (      ' .content-container .main img ' )    const idx = Array . from ( imgs ) . findIndex ( el => el === target )    const urls = Array . from ( imgs ) . map ( el => el . src )    const url = target . getAttribute ( ' src ' )    previewImageInfo . url = url !    previewImageInfo . list = urls    previewImageInfo . idx = idx    // 兼容点击main之外的图片    if ( idx === - 1 && url ) {      previewImageInfo . list . push ( url )      previewImageInfo . idx = previewImageInfo . list . length - 1    }    show . value = true  } } onMounted ( () => {  const docDomContainer = document . querySelector ( ' #VPContent ' )  docDomContainer ?. addEventListener ( ' click ' , previewImage ) } ) onUnmounted ( () => {  const docDomContainer = document . querySelector ( ' #VPContent ' )  docDomContainer ?. removeEventListener ( ' click ' , previewImage ) } ) </ script > < style > /* 不提供下载功能，隐藏下载按钮，tdesign下载有问题*/ . t - image - viewer__modal - icon : nth - child ( 7 ) {  display : none ! important ; } </ style >

Finally &ZeroWidthSpace;

As soon as I entered the blog, it was as deep as the sea, and I couldn’t help but want to play around with it.

This article is reproduced from: https://justin3go.com/%E5%8D%9A%E5%AE%A2/2023/09/29vitepress%E4%B8%AD%E5%BC%95%E5%85%A5Tdesign%E5% B9%B6%E5%85%A8%E5%B1%80%E5%A2%9E%E5%8A%A0%E5%A4%A7%E5%9B%BE%E9%A2%84%E8%A7% 88.html
This site is for inclusion only, and the copyright belongs to the original author.