move img.title generator to Video component

This commit is contained in:
polv committed 2026-02-03 12:58:31 +07:00
1 parent 62c6775e67
commit 8fc5e03758
2 files changed
+17 -32

No files matched your search

-15
View File
@@ -30,21 +30,6 @@ export default defineConfig({
image: {
lazyLoading: true,
},
config(md) {
md.renderer.rules.image = function (tokens, idx, options, env, slf) {
const token = tokens[idx];
// Get the alt if it exists
const alt = token.attrGet('alt') || token.content || '';
// Fill the title attribute with the alt if it exists
if (!token.attrGet('title')) {
token.attrSet('title', alt);
}
return slf.renderToken(tokens, idx, options)
}
}
},
vite: {
clearScreen: false,
+17 -17
View File
@@ -1,41 +1,41 @@
<template>
<Teleport to="body">
<video v-if="videoURL" controls :src="videoURL" ref="video">
Hello
</video>
<video v-if="videoURL" controls :src="videoURL" ref="video">Hello</video>
</Teleport>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed, useTemplateRef, watch } from 'vue'
import { useData } from "vitepress";
import { computed, useTemplateRef, watch } from "vue";
const { frontmatter } = useData<{ video?: string }>()
const videoURL = computed(() => frontmatter.value?.video)
const { frontmatter } = useData<{ video?: string }>();
const videoURL = computed(() => frontmatter.value?.video);
const videoEl = useTemplateRef("video");
function setImgClick(){
function setImgClick() {
const v = videoEl.value;
if (!v) {
return;
}
document.querySelectorAll('img').forEach((img) => {
const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || []
const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null
document.querySelectorAll("img").forEach((img) => {
const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || [];
const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null;
if (!t) return;
img.title = img.title || img.alt;
img.onclick = () => {
v.currentTime = t
}
})
v.currentTime = t;
};
});
}
watch(videoURL, () => {
setImgClick()
})
setImgClick();
});
setTimeout(() => setImgClick(), 500)
setTimeout(() => setImgClick(), 500);
</script>
<style scoped>