修改分享到微信按钮至HeaderLinks
组件. 并修改博客文章头样式,加入日期显示
This commit is contained in:
@@ -70,6 +70,7 @@ defineOgImageComponent('Docs', {
|
||||
headline: headline.value
|
||||
})
|
||||
|
||||
|
||||
const editLink = computed(() => {
|
||||
if (!appConfig.github) {
|
||||
return
|
||||
@@ -99,14 +100,14 @@ const links = computed(() => {
|
||||
return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
|
||||
})
|
||||
|
||||
// ===== 微信分享(测试按钮用)=====
|
||||
const wxShareActive = ref(false)
|
||||
// const contentRoot = ref<HTMLElement | null>(null)
|
||||
// // ===== 微信分享(测试按钮用)=====
|
||||
// const wxShareActive = ref(false)
|
||||
// // const contentRoot = ref<HTMLElement | null>(null)
|
||||
|
||||
const shareLink = computed(() => 'https://lijue.me' + decodeURIComponent(path.value))
|
||||
const shareTitle = computed(() => title)
|
||||
const shareDesc = computed(() => description || title)
|
||||
const shareImg = page?.value?.img
|
||||
// const shareLink = computed(() => 'https://lijue.me' + decodeURIComponent(path.value))
|
||||
// const shareTitle = computed(() => title)
|
||||
// const shareDesc = computed(() => description || title)
|
||||
// const shareImg = page?.value?.img
|
||||
// const shareImg = ref<string>('/images/default-blog.jpg')
|
||||
|
||||
// onMounted(() => {
|
||||
@@ -118,17 +119,17 @@ const shareImg = page?.value?.img
|
||||
// }
|
||||
// })
|
||||
|
||||
// Toast:点击测试分享后给出指引
|
||||
const toast = useToast()
|
||||
function handleShareClick() {
|
||||
wxShareActive.value = true
|
||||
toast.add({
|
||||
title: '已获取分享接口',
|
||||
description: '点击右上角分享吧',
|
||||
duration: 3000,
|
||||
icon: 'i-lucide-share-2'
|
||||
})
|
||||
}
|
||||
// // Toast:点击测试分享后给出指引
|
||||
// const toast = useToast()
|
||||
// function handleShareClick() {
|
||||
// wxShareActive.value = true
|
||||
// toast.add({
|
||||
// title: '已获取分享接口',
|
||||
// description: '点击右上角分享吧',
|
||||
// duration: 3000,
|
||||
// icon: 'i-lucide-share-2'
|
||||
// })
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -144,6 +145,7 @@ function handleShareClick() {
|
||||
wrapper: 'flex-row items-center flex-wrap justify-between '
|
||||
}"
|
||||
>
|
||||
<span v-if="page" class="text-sm text-pretty text-muted mt-4"> {{ page.date }} </span>
|
||||
<template #links>
|
||||
<UButton
|
||||
v-for="(link, index) in page.links"
|
||||
@@ -178,7 +180,7 @@ function handleShareClick() {
|
||||
编辑页面
|
||||
</UButton>
|
||||
or
|
||||
<!-- <UButton
|
||||
<UButton
|
||||
variant="link"
|
||||
color="neutral"
|
||||
:to="`${appConfig.github.url}/issues/new/choose`"
|
||||
@@ -187,9 +189,9 @@ function handleShareClick() {
|
||||
:ui="{ leadingIcon: 'size-4' }"
|
||||
>
|
||||
提交问题
|
||||
</UButton> -->
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
<!-- <UButton
|
||||
variant="link"
|
||||
color="neutral"
|
||||
icon="lucide-share-2"
|
||||
@@ -197,19 +199,19 @@ function handleShareClick() {
|
||||
@click="handleShareClick()"
|
||||
>
|
||||
微信分享
|
||||
</UButton>
|
||||
</UButton> -->
|
||||
</div>
|
||||
</USeparator>
|
||||
<UContentSurround :surround="surround" />
|
||||
|
||||
<!-- 激活后挂载分享组件(无可视内容) -->
|
||||
<!-- 激活后挂载分享组件(无可视内容)
|
||||
<SharedWxShare
|
||||
v-if="wxShareActive"
|
||||
:url="shareLink"
|
||||
:title="shareTitle"
|
||||
:desc="shareDesc"
|
||||
:img-url="shareImg"
|
||||
/>
|
||||
/> -->
|
||||
</UPageBody>
|
||||
|
||||
<template
|
||||
|
@@ -2,7 +2,7 @@
|
||||
import { useSeoMeta } from '#imports'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'docs'
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
@@ -14,18 +14,18 @@ useSeoMeta({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<div class="px-4 py-3 md:py-6 bg-gradient-to-b from-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<!-- Hero 区域 -->
|
||||
<div class="max-w-6xl mx-auto px-4 py-20">
|
||||
<div class="max-w-6xl mx-auto py-1">
|
||||
<!-- 主要内容 -->
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
<div class="text-center mb-8 md:mb-16">
|
||||
<h1 class="text-4xl md:text-7xl font-bold text-gray-900 dark:text-white mb-3 md:mb-6">
|
||||
Estel Hub
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-4 md:mb-8 max-w-3xl mx-auto">
|
||||
简约而强大的文档系统,衍生而出Blog系统,为技术分享而生
|
||||
</p>
|
||||
<p class="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||
<p class="md:text-lg text-sm text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
基于 Nuxt 4 构建,支持 Markdown 文档管理和博客发布,提供完整的现代化内容管理解决方案
|
||||
</p>
|
||||
</div>
|
||||
@@ -35,10 +35,10 @@ useSeoMeta({
|
||||
<!-- 文档系统 -->
|
||||
<NuxtLink
|
||||
to="/docs"
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<div class="w-12 h-12 md:w-16 md:h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<UIcon
|
||||
name="lucide-book-open"
|
||||
class="text-3xl text-blue-600 dark:text-blue-400"
|
||||
@@ -47,8 +47,8 @@ useSeoMeta({
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
文档系统
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
技术文档、API 文档、使用指南,一切尽在掌握
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
|
||||
技术文档、API 文档、使用指南
|
||||
</p>
|
||||
<div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
|
||||
<span class="mr-2">开始阅读</span>
|
||||
@@ -63,10 +63,10 @@ useSeoMeta({
|
||||
<!-- 博客系统 -->
|
||||
<NuxtLink
|
||||
to="/blog"
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<div class="w-12 md:w-16 h-12 md:h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<UIcon
|
||||
name="lucide-pen-tool"
|
||||
class="text-3xl text-green-600 dark:text-green-400"
|
||||
@@ -75,8 +75,8 @@ useSeoMeta({
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
博客系统
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
技术分享、心得体会、生活感悟,记录每一个精彩瞬间
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
|
||||
技术分享、心得体会、生活感悟
|
||||
</p>
|
||||
<div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
|
||||
<span class="mr-2">开始阅读</span>
|
||||
|
Reference in New Issue
Block a user