docs: 添加使用主题的案例展示页
This commit is contained in:
pengzhanbo
parent
2eeaf78fc5
commit
c54c4d8b09
@ -1,10 +1,12 @@
|
||||
import { type ClientConfig, defineClientConfig } from 'vuepress/client'
|
||||
import HeroTintPlateConfig from './themes/components/HeroTintPlateConfig.vue'
|
||||
import CanIUseConfig from './themes/components/CanIUseConfig.vue'
|
||||
import Demos from './themes/components/Demos.vue'
|
||||
|
||||
export default defineClientConfig({
|
||||
enhance({ app }) {
|
||||
app.component('HeroTintPlateConfig', HeroTintPlateConfig)
|
||||
app.component('CanIUseConfig', CanIUseConfig)
|
||||
app.component('Demos', Demos)
|
||||
},
|
||||
}) as ClientConfig
|
||||
|
||||
@ -16,6 +16,7 @@ export default defineUserConfig({
|
||||
head: [
|
||||
['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }],
|
||||
['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }],
|
||||
['meta', { name: 'google-site-verification', content: 'X5YSaTDn-pKqQBUKD_05_dQcxVItzEq7Rlbg2ZEU7AM' }],
|
||||
],
|
||||
|
||||
pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'],
|
||||
|
||||
@ -29,17 +29,24 @@ export const zhNavbar = [
|
||||
icon: 'material-symbols:article-outline',
|
||||
activeMatch: '^/(blog|article)/',
|
||||
},
|
||||
{
|
||||
text: '案例',
|
||||
link: '/demos/',
|
||||
icon: 'map:wind-surfing',
|
||||
},
|
||||
{
|
||||
text: '更多',
|
||||
icon: 'icon-park-outline:more-three',
|
||||
items: [
|
||||
{ text: '主题工具', link: '/tools/' },
|
||||
{ text: '友情链接', link: '/friends/' },
|
||||
{ text: '喝杯奶茶', link: '/sponsor/', icon: 'line-md:coffee-loop' },
|
||||
{ text: '主题工具', link: '/tools/', icon: 'jam:tools' },
|
||||
{ text: '友情链接', link: '/friends/', icon: 'carbon:friendship' },
|
||||
{
|
||||
text: 'Vuepress',
|
||||
icon: 'logos:vue',
|
||||
items: [
|
||||
{ text: '官方文档', link: 'https://v2.vuepress.vuejs.org' },
|
||||
{ text: '生态系统', link: 'https://ecosystem.vuejs.press/' },
|
||||
{ text: '官方文档', link: 'https://v2.vuepress.vuejs.org', icon: 'logos:vue' },
|
||||
{ text: '生态系统', link: 'https://ecosystem.vuejs.press/', icon: 'logos:vue' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
145
docs/.vuepress/themes/components/Demos.vue
Normal file
145
docs/.vuepress/themes/components/Demos.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
interface Demo {
|
||||
name: string
|
||||
desc: string
|
||||
logo: string
|
||||
repo: string
|
||||
url: string
|
||||
preview: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
list: Demo[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demos">
|
||||
<div v-for="demo in list" :key="demo.url" class="demo-item">
|
||||
<div class="demo-img">
|
||||
<a :href="demo.url" target="_blank" rel="noopener noreferrer">
|
||||
<img :src="demo.preview" :alt="demo.name" loading="lazy">
|
||||
</a>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<h3 class="demo-title">
|
||||
<span v-if="demo.logo" class="logo" :style="`background-image: url(${demo.logo})`" />
|
||||
<span class="title">
|
||||
<a :href="demo.url" target="_blank" rel="noopener noreferrer" :aria-label="demo.name" :title="demo.name">{{ demo.name }}</a>
|
||||
</span>
|
||||
<a v-if="demo.repo" :href="demo.repo" class="github" target="_blank" rel="noopener noreferrer"><span
|
||||
class="vpi-social-github"
|
||||
/></a>
|
||||
</h3>
|
||||
<p :title="demo.desc">
|
||||
{{ demo.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.demos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 20px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.demos {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
transition: var(--t-color);
|
||||
transition-property: border background box-shadow;
|
||||
}
|
||||
|
||||
.demo-item:hover {
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
.demo-img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-img img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.demo-item:hover .demo-img img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 10px auto 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.demo-title .logo {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.demo-title .title {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.demo-title .title a {
|
||||
color: var(--vp-c-text-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.demo-title .github {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-title .vpi-social-github {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.demo-content p {
|
||||
display: -webkit-box;
|
||||
margin: 6px auto 0;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
40
docs/demos.md
Normal file
40
docs/demos.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: 案例
|
||||
author: pengzhanbo
|
||||
createTime: 2024/04/18 19:22:07
|
||||
permalink: /demos/
|
||||
readingTime: false
|
||||
prev: false
|
||||
next: false
|
||||
article: false
|
||||
docs:
|
||||
-
|
||||
name: VuePress Plume
|
||||
desc: 一个简约的，功能丰富的 vuepress 文档&博客 主题。
|
||||
logo: /plume.png
|
||||
url: https://plume.pengzhanbo.cn
|
||||
repo: https://github.com/pengzhanbo/vuepress-theme-plume
|
||||
preview: /images/demos/plume.png
|
||||
blog:
|
||||
-
|
||||
name: 鹏展博
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
logo: https://pengzhanbo.cn/images/blogger-fav.png
|
||||
url: https://pengzhanbo.cn/
|
||||
repo: https://github.com/pengzhanbo/pengzhanbo.cn
|
||||
preview: /images/demos/pengzhanbo.png
|
||||
---
|
||||
|
||||
:::important
|
||||
你可以随时通过 [PR](https://github.com/pengzhanbo/vuepress-theme-plume/edit/main/docs/demos.md) 添加你的 文档 或 博客 到这个页面。
|
||||
|
||||
站点预览图片请放到 `docs/.vuepress/public/images/demos` 目录下。推荐使用远程链接，以便可以随时更新它。
|
||||
:::
|
||||
|
||||
## 文档
|
||||
|
||||
<Demos :list="$frontmatter.docs" />
|
||||
|
||||
## 博客
|
||||
|
||||
<Demos :list="$frontmatter.blog" />
|
||||
Loading…
x
Reference in New Issue
Block a user