update all
This commit is contained in:
zibright
@@ -1,11 +1,28 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="prose lg:prose-xl mx-auto">
|
||||
<ContentDoc />
|
||||
<article class="prose prose-slate lg:prose-lg dark:prose-invert mx-auto px-4 py-8">
|
||||
<ContentDoc :path="route.path" v-slot="{ doc }">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold mb-4">{{ doc.title }}</h1>
|
||||
<div class="flex items-center gap-4 text-gray-500">
|
||||
<time :datetime="doc.date">{{ new Date(doc.date).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}) }}</time>
|
||||
<div v-if="doc.tags" class="flex gap-2">
|
||||
<span v-for="tag in doc.tags" :key="tag"
|
||||
class="px-2 py-1 bg-gray-100 rounded-full text-sm">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContentRenderer :value="doc" :components="{ prose }" />
|
||||
</ContentDoc>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.prose {
|
||||
max-width: 65ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
44
pages/about.vue
Normal file
44
pages/about.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white rounded-2xl shadow-sm p-8 mb-8">
|
||||
<div class="flex flex-col md:flex-row items-center gap-8">
|
||||
<div class="w-48 h-48 rounded-full overflow-hidden">
|
||||
<img src="/avatar.jpg" alt="头像" class="w-full h-full object-cover"
|
||||
onerror="this.src='https://api.dicebear.com/7.x/adventurer/svg?seed=custom'"/>
|
||||
</div>
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<h1 class="text-3xl font-bold mb-4">ZiBright</h1>
|
||||
<p class="text-gray-600 mb-4">在不停学习中~</p>
|
||||
<div class="flex justify-center md:justify-start space-x-4">
|
||||
<a href="https://github.com/yourusername" target="_blank"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<svg class="h-6 w-6 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://space.bilibili.com/yourid" target="_blank"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<svg class="h-6 w-6 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="mailto:your@email.com"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<svg class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm p-8">
|
||||
<h2 class="text-2xl font-bold mb-6">关于我</h2>
|
||||
<div class="prose max-w-none">
|
||||
<p>这里是一段关于我的介绍，你可以写一些个人经历、兴趣爱好等。</p>
|
||||
<p>支持 Markdown 格式，可以自由发挥～</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
45
pages/articles.vue
Normal file
45
pages/articles.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-4">所有文章</h1>
|
||||
<div class="text-gray-600">记录学习与生活的点点滴滴</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6">
|
||||
<ContentList path="/" :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
|
||||
<div v-for="article in list" :key="article._path"
|
||||
class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
|
||||
<NuxtLink :to="article._path" class="block group">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold mb-2 group-hover:text-blue-600 transition-colors">
|
||||
{{ article.title }}
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-4 line-clamp-2">{{ article.description }}</p>
|
||||
<div class="flex items-center text-sm text-gray-500 gap-4">
|
||||
<span>
|
||||
{{ new Date(article.date).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}) }}
|
||||
</span>
|
||||
<span v-if="article.tags" class="flex gap-2">
|
||||
<span v-for="tag in article.tags" :key="tag"
|
||||
class="px-2 py-1 bg-gray-100 rounded-full text-xs">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="article.cover" class="flex-shrink-0">
|
||||
<img :src="article.cover" :alt="article.title"
|
||||
class="w-32 h-24 object-cover rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</ContentList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
57
pages/friends.vue
Normal file
57
pages/friends.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script setup>
|
||||
const friends = [
|
||||
{
|
||||
name: '示例博客',
|
||||
avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=demo1',
|
||||
url: 'https://example.com',
|
||||
description: '这是一个示例博客'
|
||||
},
|
||||
{
|
||||
name: '另一个博客',
|
||||
avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=demo2',
|
||||
url: 'https://example2.com',
|
||||
description: '这是另一个示例博客'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-4">友链</h1>
|
||||
<div class="text-gray-600">友情链接</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<a v-for="friend in friends" :key="friend.name" :href="friend.url" target="_blank"
|
||||
class="block bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-all">
|
||||
<div class="flex items-center gap-4">
|
||||
<img :src="friend.avatar" :alt="friend.name" class="w-16 h-16 rounded-full" />
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-1">{{ friend.name }}</h3>
|
||||
<p class="text-gray-600 text-sm">{{ friend.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 bg-white rounded-lg shadow-sm p-6">
|
||||
<h2 class="text-xl font-bold mb-4">申请友链</h2>
|
||||
<p class="text-gray-600 mb-4">如果您想要申请友链，请确保您的网站满足以下条件：</p>
|
||||
<ul class="list-disc list-inside text-gray-600 mb-6">
|
||||
<li>网站内容合法合规</li>
|
||||
<li>网站能够正常访问</li>
|
||||
<li>网站已添加本站友链</li>
|
||||
</ul>
|
||||
<p class="text-gray-600">
|
||||
符合条件的朋友可以通过以下格式发送邮件至
|
||||
<a href="mailto:your@email.com" class="text-blue-600 hover:underline">your@email.com</a>：
|
||||
</p>
|
||||
<pre class="bg-gray-50 p-4 rounded-lg mt-4 text-sm">
|
||||
名称：您的网站名称
|
||||
简介：网站简介
|
||||
链接：网站链接
|
||||
头像：头像链接</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,18 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold mb-8">最新文章</h1>
|
||||
<div class="grid gap-6">
|
||||
<ContentList path="/" v-slot="{ list }">
|
||||
<div v-for="article in list" :key="article._path" class="bg-white shadow rounded-lg p-6">
|
||||
<NuxtLink :to="article._path">
|
||||
<h2 class="text-2xl font-bold mb-2">{{ article.title }}</h2>
|
||||
<p class="text-gray-600">{{ article.description }}</p>
|
||||
<div class="mt-4 text-sm text-gray-500">
|
||||
{{ new Date(article.date).toLocaleDateString() }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- 个人信息卡片 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-8 mb-8">
|
||||
<div class="flex flex-col md:flex-row items-center gap-8">
|
||||
<div class="w-48 h-48 rounded-full overflow-hidden">
|
||||
<img src="/avatar.jpg" alt="头像" class="w-full h-full object-cover"
|
||||
onerror="this.src='https://api.dicebear.com/7.x/adventurer/svg?seed=custom'"/>
|
||||
</div>
|
||||
</ContentList>
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<h1 class="text-3xl font-bold mb-4">ZiBright</h1>
|
||||
<div class="text-lg text-gray-600 mb-6">这里是我的博客</div>
|
||||
<div class="flex justify-center md:justify-start gap-4">
|
||||
<NuxtLink to="/about" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
|
||||
<span>关于我</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/friends" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
|
||||
<span>朋友们</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最新文章 -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold">最新文章</h2>
|
||||
<NuxtLink to="/articles" class="text-gray-600 hover:text-gray-900">
|
||||
查看全部 →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="grid gap-6">
|
||||
<ContentList path="/" :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
|
||||
<div v-for="article in list.slice(0, 5)" :key="article._path"
|
||||
class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
|
||||
<NuxtLink :to="article._path" class="block group">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2 group-hover:text-blue-600 transition-colors">
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 mb-4 line-clamp-2">{{ article.description }}</p>
|
||||
<div class="flex items-center text-sm text-gray-500 gap-4">
|
||||
<span>
|
||||
{{ new Date(article.date).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}) }}
|
||||
</span>
|
||||
<span v-if="article.tags" class="flex gap-2">
|
||||
<span v-for="tag in article.tags" :key="tag"
|
||||
class="px-2 py-1 bg-gray-100 rounded-full text-xs">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="article.cover" class="flex-shrink-0">
|
||||
<img :src="article.cover" :alt="article.title"
|
||||
class="w-32 h-24 object-cover rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</ContentList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user