109 lines
6.6 KiB
Vue
109 lines
6.6 KiB
Vue
<template>
|
||
<div class="title">
|
||
<span>{{ page.frontmatter.title }}</span>
|
||
</div>
|
||
|
||
<div v-if="!page.filePath.includes('index.md')" class="blog-stats">
|
||
<div v-if="page.frontmatter.isGreat" class="item">
|
||
<svg t="1765851905856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11930" width="16" height="16"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="11931"></path><path d="M136.533333 307.2a34.133333 34.133333 0 0 1 34.133334-34.133333h682.666666a34.133333 34.133333 0 0 1 34.133334 34.133333v437.3504a68.266667 68.266667 0 0 1-35.566934 59.938133l-274.5344 149.7088a136.533333 136.533333 0 0 1-130.730666 0L172.100267 804.522667A68.266667 68.266667 0 0 1 136.533333 744.5504V307.2z" fill="#bd34fe" p-id="11932"></path><path d="M68.266667 136.533333a68.266667 68.266667 0 0 1 68.266666-68.266666h750.933334a68.266667 68.266667 0 0 1 68.266666 68.266666v117.4528a34.133333 34.133333 0 0 1-16.247466 29.0816l-373.828267 230.058667a102.4 102.4 0 0 1-107.3152 0L84.514133 283.0336A34.133333 34.133333 0 0 1 68.266667 253.952V136.533333z" fill="#bd34fe" p-id="11933"></path><path d="M496.605867 339.490133a17.066667 17.066667 0 0 1 30.788266 0L576.853333 443.050667a17.066667 17.066667 0 0 0 13.175467 9.557333l113.800533 15.018667a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018666a17.066667 17.066667 0 0 0-5.051733 15.496534l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090666l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090666l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496534l-83.217066-79.018666a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018667a17.066667 17.066667 0 0 0 13.175466-9.557333l49.425067-103.560534z" fill="#FFFFFF" p-id="11934"></path></svg>
|
||
精品
|
||
</div>
|
||
|
||
<div class="item">
|
||
<svg t="1765933533911" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15052" width="16" height="16"><path d="M718.6 227.3c13.2 0 24.5-8.2 24.5-18.6V83.3c0-10.4-10.9-18.6-24.5-18.6-13.2 0-24.1 8.2-24.1 18.6v125.3c0 10.5 10.5 18.7 24.1 18.7zM305.4 227.3c13.2 0 24.1-8.2 24.1-18.6V83.3c0-10.4-10.9-18.6-24.1-18.6-13.2 0-24.5 8.2-24.5 18.6v125.3c0 10.5 10.9 18.7 24.5 18.7z" fill="#5CAF82" p-id="15053"></path><path d="M949.3 230.9c0-47.7-44-86.3-98.5-86.3H770v64.5c0 24.5-22.7 44.5-50.9 44.5s-50.9-20-50.9-44.5v-64.5H354.9v64.5c0 24.5-22.7 44.5-50.9 44.5s-50.9-20-50.9-44.5v-64.5h-79.9c-54.5 0-98.5 38.6-98.5 86.3V319h875v-88.1h-0.4zM74.3 873c0 47.7 44 86.3 98.5 86.3h677.5c54.5 0 98.5-38.6 98.5-86.3V363.1H74.3V873z m238.4-255.2c14.5-12.7 38.6-8.2 51.3 6.4L469.3 745 680 503c12.7-14.5 35-16.8 50.9-5.4 16.3 11.8 11.8 40 1.4 50.4L492.5 824c-12.7 14.5-33.1 14.5-45.9 0l-134-153c-12.2-14.6-15.4-39.6 0.1-53.2z" fill="#5CAF82" p-id="15054"></path></svg>
|
||
日期: {{ page.frontmatter.date.split('T')[0] }}
|
||
</div>
|
||
|
||
<div class="item">
|
||
<svg t="1724571760788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6125" width="16" height="16"><path d="M204.8 0h477.866667l273.066666 273.066667v614.4c0 75.093333-61.44 136.533333-136.533333 136.533333H204.8c-75.093333 0-136.533333-61.44-136.533333-136.533333V136.533333C68.266667 61.44 129.706667 0 204.8 0z m307.2 607.573333l68.266667 191.146667c13.653333 27.306667 54.613333 27.306667 61.44 0l102.4-273.066667c6.826667-20.48 0-34.133333-20.48-40.96s-34.133333 0-40.96 13.653334l-68.266667 191.146666-68.266667-191.146666c-13.653333-27.306667-54.613333-27.306667-68.266666 0l-68.266667 191.146666-68.266667-191.146666c-6.826667-13.653333-27.306667-27.306667-47.786666-20.48s-27.306667 27.306667-20.48 47.786666l102.4 273.066667c13.653333 27.306667 54.613333 27.306667 61.44 0l75.093333-191.146667z" fill="#1890FF" p-id="6126"></path><path d="M682.666667 0l273.066666 273.066667h-204.8c-40.96 0-68.266667-27.306667-68.266666-68.266667V0z" fill="#52C41A" p-id="6127"></path></svg>
|
||
字数: {{ formatNumberUnit(wordCount) }} 字
|
||
</div>
|
||
|
||
<div>
|
||
<svg t="1724572797268" class="icon" viewBox="0 0 1060 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15031" width="16" height="16"><path d="M556.726857 0.256A493.933714 493.933714 0 0 0 121.929143 258.998857L0 135.021714v350.390857h344.649143L196.205714 334.482286a406.820571 406.820571 0 1 1-15.908571 312.649143H68.937143A505.819429 505.819429 0 1 0 556.726857 0.256z m-79.542857 269.531429v274.907428l249.197714 150.966857 42.422857-70.070857-212.114285-129.389714V269.787429h-79.542857z" fill="#FA8C16" p-id="15032"></path></svg>
|
||
时长: {{ readTime }} 分钟
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, ref, onMounted, watch } from 'vue'
|
||
import { countWord, formatNumberUnit } from '../utils'
|
||
import { useData } from 'vitepress'
|
||
|
||
const wordCount = ref(0)
|
||
const imageCount = ref(0)
|
||
|
||
// 获取页面数据
|
||
const { page } = useData()
|
||
|
||
// 文字阅读时间
|
||
const wordTime = computed(() => {
|
||
return ((wordCount.value / 275) * 60)
|
||
})
|
||
|
||
// 图片阅读时间
|
||
const imageTime = computed(() => {
|
||
const n = imageCount.value
|
||
if (imageCount.value <= 10) {
|
||
// 等差数列求和
|
||
return n * 13 + (n * (n - 1)) / 2
|
||
}
|
||
return 175 + (n - 10) * 3
|
||
})
|
||
|
||
// 阅读时间
|
||
const readTime = computed(() => {
|
||
return Math.ceil((wordTime.value + imageTime.value) / 60)
|
||
})
|
||
|
||
const analyze = () => {
|
||
// 选择文档内容区域
|
||
const docDomContainer = window.document.querySelector('#VPContent')
|
||
// 统计图片数量
|
||
const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>('.content-container .main img')
|
||
imageCount.value = imgs?.length || 0
|
||
|
||
// 统计文字数量（textContent：提取纯文本）
|
||
const words = docDomContainer?.querySelector('.content-container .main')?.textContent || ''
|
||
wordCount.value = countWord(words)
|
||
}
|
||
|
||
watch(() => page.value.title, () => {
|
||
// 路径变化时执行
|
||
analyze()
|
||
})
|
||
|
||
onMounted(() => {
|
||
// 初始化时执行一次
|
||
analyze()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.blog-stats {
|
||
margin-bottom: 10px;
|
||
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 5px;
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
font-size: 32px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
background: -webkit-linear-gradient(10deg, #3DC8F0 5%, #8036FA 15%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.icon {
|
||
display: inline-block;
|
||
transform: translate(0px , 2px);
|
||
}
|
||
</style> |