feat:增加布局组件
This commit is contained in:
@@ -79,7 +79,8 @@ export default withMermaid({
|
||||
items: [
|
||||
{ text: 'OpenObserve部署和使用', link: '/DevOps/OpenObserve' },
|
||||
{ text: 'Jenkins部署和使用', link: '/DevOps/Jenkins' },
|
||||
{ text: 'ElasticSearch部署和使用', link: '/DevOps/ElasticSearch' }
|
||||
{ text: 'ElasticSearch部署和使用', link: '/DevOps/ElasticSearch' },
|
||||
{ text: 'Docker简介和安装', link: '/DevOps/Docker' }
|
||||
]
|
||||
},
|
||||
{ text: 'Flutter',
|
||||
@@ -154,7 +155,8 @@ export default withMermaid({
|
||||
items: [
|
||||
{ text: 'OpenObserve部署和使用', link: '/DevOps/OpenObserve' },
|
||||
{ text: 'Jenkins部署和使用', link: '/DevOps/Jenkins' },
|
||||
{ text: 'ElasticSearch部署和使用', link: '/DevOps/ElasticSearch' }
|
||||
{ text: 'ElasticSearch部署和使用', link: '/DevOps/ElasticSearch' },
|
||||
{ text: 'Docker简介和安装', link: '/DevOps/Docker' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
@@ -1,10 +1,24 @@
|
||||
<template>
|
||||
<div v-if="!page.filePath.includes('index.md')" class="blog-stats">
|
||||
<p class="content">
|
||||
<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>
|
||||
字数: {{ wordCount }} 字
|
||||
<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 }} 分钟
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { computed, ref, onMounted, watch } from 'vue'
|
||||
import { countWord } from '../utils/functions'
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const wordCount = ref(0)
|
||||
const imageCount = ref(0)
|
||||
|
||||
const { page } = useData()
|
||||
|
||||
const wordTime = computed(() => {
|
||||
return ((wordCount.value / 275) * 60)
|
||||
})
|
||||
@@ -23,7 +37,6 @@ const readTime = computed(() => {
|
||||
return Math.ceil((wordTime.value + imageTime.value) / 60)
|
||||
})
|
||||
|
||||
|
||||
function analyze() {
|
||||
document.querySelectorAll('.meta-des').forEach(v => v.remove())
|
||||
const docDomContainer = window.document.querySelector('#VPContent')
|
||||
@@ -35,28 +48,25 @@ function analyze() {
|
||||
wordCount.value = countWord(words)
|
||||
}
|
||||
|
||||
watch(() => page.value.title, () => {
|
||||
// 路径变化时执行
|
||||
analyze()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化时执行一次
|
||||
analyze()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blog-stats {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="word">
|
||||
<p>
|
||||
<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>
|
||||
字数: {{ wordCount }} 字
|
||||
<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 }} 分钟
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.word {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 15px;
|
||||
.content {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
16
docs/.vitepress/theme/components/MyLayout.vue
Normal file
16
docs/.vitepress/theme/components/MyLayout.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import ArticleMetadat from './ArticleMetadata.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultTheme.Layout v-bind="$attrs">
|
||||
<template #doc-before>
|
||||
<ArticleMetadat />
|
||||
</template>
|
||||
|
||||
</DefaultTheme.Layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -9,9 +9,11 @@ import '../theme/style.css'
|
||||
import './style/var.css'
|
||||
import './style/vp-code.css'
|
||||
import './style/custom-block.css'
|
||||
import MyLayout from './components/MyLayout.vue';
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
Layout: MyLayout,
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const initZoom = () => {
|
||||
|
||||
Reference in New Issue
Block a user