添加了一堆东西
This commit is contained in:
parent
cc44132554
commit
c267761a34
17
package-lock.json
generated
17
package-lock.json
generated
@ -17,7 +17,8 @@
|
||||
"lxgw-wenkai-lite-webfont": "^1.7.0",
|
||||
"mitt": "^3.0.1",
|
||||
"vue": "^3.4.37",
|
||||
"vue-router": "^4.4.5"
|
||||
"vue-router": "^4.4.5",
|
||||
"vue-typed-js": "^0.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.5",
|
||||
@ -2729,6 +2730,11 @@
|
||||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/typed.js": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "git+ssh://git@github.com/mattboldt/typed.js.git#f0759c1dc054a2d6743862d5331f03e49f9845d7",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.6.2.tgz",
|
||||
@ -2909,6 +2915,15 @@
|
||||
"typescript": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-typed-js": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/vue-typed-js/-/vue-typed-js-0.1.2.tgz",
|
||||
"integrity": "sha512-9kDGuz17uYJghe/1hepRWiWYssgUFtrKnMGPHlWjVRxdvs/d9xYYWMkgzztjhx1R1B33hXkN8ctmkzCYHQ+caA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"typed.js": "git+https://github.com/mattboldt/typed.js.git"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -18,7 +18,8 @@
|
||||
"lxgw-wenkai-lite-webfont": "^1.7.0",
|
||||
"mitt": "^3.0.1",
|
||||
"vue": "^3.4.37",
|
||||
"vue-router": "^4.4.5"
|
||||
"vue-router": "^4.4.5",
|
||||
"vue-typed-js": "^0.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.5",
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen w-screen bg-blue-50">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
BIN
src/assets/BaconyScript_PERSONAL_USE_ONLY.otf
Normal file
BIN
src/assets/BaconyScript_PERSONAL_USE_ONLY.otf
Normal file
Binary file not shown.
@ -23,11 +23,12 @@ const handleOnCardClick = () => {
|
||||
|
||||
<template>
|
||||
<div :title="post.title"
|
||||
class="container relative overflow-hidden rounded-2xl hover:cursor-pointer text-white hover:text-amber-200 h-56"
|
||||
class="container relative overflow-hidden rounded-2xl hover:cursor-pointer text-white hover:text-amber-200 h-56 hover:shadow-lg"
|
||||
@click="handleOnCardClick">
|
||||
<!-- 图片 -->
|
||||
<div class="container h-full">
|
||||
<img :src="thumbUrl" alt="" class="object-cover h-full w-full object-center transition-all hover:scale-110">
|
||||
<img :src="thumbUrl" alt=""
|
||||
class="object-cover h-full w-full object-center transition-all hover:scale-110 duration-300">
|
||||
</div>
|
||||
<!-- 文字部分 -->
|
||||
<div class="container relative">
|
||||
|
||||
@ -3,16 +3,13 @@ import {computed, onMounted, onUnmounted, ref} from "vue";
|
||||
import emitter from "@/utils/mitt.ts";
|
||||
import {getAssetURL} from "@/utils/function.ts";
|
||||
|
||||
const isShow = ref(false)
|
||||
const currentPost = ref<IPost | null>(null)
|
||||
|
||||
const onOpenPost = (e: IPost) => {
|
||||
isShow.value = true
|
||||
currentPost.value = e;
|
||||
}
|
||||
|
||||
const onClosePost = () => {
|
||||
isShow.value = false
|
||||
currentPost.value = null
|
||||
}
|
||||
|
||||
@ -33,8 +30,7 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="isShow" class="absolute top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60">
|
||||
|
||||
<div v-if="currentPost" class="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60 z-50">
|
||||
<div class="container bg-white mx-auto my-10 rounded-3xl overflow-hidden max-h-full">
|
||||
<!-- 标题栏 -->
|
||||
<div class="w-full relative border-b-2 border-b-gray-200">
|
||||
@ -45,7 +41,7 @@ onUnmounted(() => {
|
||||
<!-- 预览标题 -->
|
||||
<div
|
||||
class="h-12 pl-8 py-1.5 pr-16 truncate absolute top-0 left-0 right-0 bg-black bg-opacity-60 backdrop-blur-3xl text-white">
|
||||
<span v-if="currentPost" :title="currentPost.title" class="text-3xl font-bold">
|
||||
<span :title="currentPost.title" class="text-3xl font-bold">
|
||||
文章预览 /
|
||||
</span>
|
||||
</div>
|
||||
@ -59,7 +55,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
<!-- 正文 -->
|
||||
<div class="container p-8">
|
||||
<div v-if="currentPost" class="container" v-html="currentPost.digest"/>
|
||||
<div class="container" v-html="currentPost.digest"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
60
src/components/card/IntroCard.vue
Normal file
60
src/components/card/IntroCard.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
type Widget = {
|
||||
icon: string[]
|
||||
url: string
|
||||
title: string
|
||||
}
|
||||
// const welcomeWords = ['你好👋，很高兴认识你！']
|
||||
|
||||
const littleWidget: Widget[] = [
|
||||
{
|
||||
icon: ['fab', 'qq'],
|
||||
url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
|
||||
title: "QQ",
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'github-alt'],
|
||||
url: "https://github.com/Aurora1949",
|
||||
title: "Github",
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'weibo'],
|
||||
url: "https://weibo.com/u/7923648952",
|
||||
title: "微博"
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'steam-symbol'],
|
||||
url: "https://steamcommunity.com/id/cantyonion/",
|
||||
title: "Steam"
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container w-full flex my-16">
|
||||
<!-- 头像部分 -->
|
||||
<div class="w-32 h-32 rounded-full bg-white overflow-hidden hover:animate-pulse hidden sm:block">
|
||||
<img alt="" src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640">
|
||||
</div>
|
||||
|
||||
<!-- 文字部分 -->
|
||||
<div class="container flex-1 px-8 flex flex-col justify-between">
|
||||
<div class="text-4xl">Jeffrey Hsu</div>
|
||||
<div class="text-2xl text-gray-400">你好👋，很高兴认识你！</div>
|
||||
<!-- <vue-typed-js :strings="['First text', 'Second Text']">-->
|
||||
<!-- <h1 class="typing"></h1>-->
|
||||
<!-- </vue-typed-js>-->
|
||||
<div class="flex text-xl gap-4">
|
||||
<a v-for="item in littleWidget"
|
||||
:key="item.url" :href=item.url :title=item.title
|
||||
class="w-10 h-10 rounded-full bg-green-400 flex items-center justify-center text-white transition-all hover:scale-125">
|
||||
<font-awesome-icon :icon="item.icon"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/components/nav/NavBar.vue
Normal file
57
src/components/nav/NavBar.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
type Widget = {
|
||||
icon: string[]
|
||||
url: string
|
||||
title: string
|
||||
}
|
||||
|
||||
const littleWidget: Widget[] = [
|
||||
{
|
||||
icon: ['fas', 'gauge'],
|
||||
url: "/pi-dashboard/",
|
||||
title: "Pi Dashboard",
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'cloud'],
|
||||
url: "/files/",
|
||||
title: "Tiny File Manager",
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'code-branch'],
|
||||
url: "/git/",
|
||||
title: "Git Repository"
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav
|
||||
class="w-full h-16 bg-white shadow backdrop-blur-md bg-opacity-70 fixed text-gray-600 z-20"
|
||||
>
|
||||
<div class="w-full container flex justify-center sm:justify-between items-center mx-auto">
|
||||
<!-- Logo -->
|
||||
<div class="min-w-16 h-full text-4xl logo py-3.5">
|
||||
<span>CantyOni_on's Index</span>
|
||||
</div>
|
||||
<!-- Entry -->
|
||||
<!-- <div class="flex-1"></div>-->
|
||||
<!-- 快速跳转小组件 -->
|
||||
<div class="items-center justify-between gap-4 text-xl hidden sm:flex">
|
||||
<a v-for="item in littleWidget"
|
||||
:key="item.url" :href=item.url :title=item.title
|
||||
class="transition-all hover:scale-125">
|
||||
<font-awesome-icon :icon="item.icon"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- 用于隔开元素的 -->
|
||||
<div class="h-16 w-full mb-4"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
font-family: BaconyScript, serif;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,16 @@
|
||||
import {createApp} from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
// import VueTypedJs from 'vue-typed-js'
|
||||
import router from "@/router";
|
||||
import {library} from '@fortawesome/fontawesome-svg-core'
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
||||
import {faClock} from '@fortawesome/free-regular-svg-icons'
|
||||
import {faXmark, faBlog} from '@fortawesome/free-solid-svg-icons'
|
||||
import {faXmark, faBlog, faGauge, faCodeBranch, faCloud, faChevronRight} from '@fortawesome/free-solid-svg-icons'
|
||||
import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
library.add(faClock, faXmark, faBlog)
|
||||
library.add(
|
||||
faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight
|
||||
)
|
||||
|
||||
createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
|
||||
|
||||
@ -4,6 +4,11 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: 'BaconyScript';
|
||||
src: url("./assets/BaconyScript_PERSONAL_USE_ONLY.otf") format("opentype");
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "LXGW WenKai Lite", sans-serif;
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@ import {computed, onMounted, ref} from "vue";
|
||||
import ArticleCard from "@/components/card/ArticleCard.vue";
|
||||
import {getBlogRecentPost} from "@/api/blog.ts";
|
||||
import ArticleDigestViewer from "@/components/card/ArticleDigestViewer.vue";
|
||||
import NavBar from "@/components/nav/NavBar.vue";
|
||||
import IntroCard from "@/components/card/IntroCard.vue";
|
||||
|
||||
const recentPosts = ref<IPost[] | null>(null);
|
||||
const hasPosts = computed(() => (recentPosts.value ?? []).length > 0);
|
||||
@ -14,26 +16,50 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav-bar/>
|
||||
|
||||
<div class="container mx-auto">
|
||||
<!-- 个人介绍 -->
|
||||
<intro-card/>
|
||||
|
||||
<!-- 标题部分 -->
|
||||
<div class="text-2xl mb-4 text-white font-bold">
|
||||
<div class="bg-pink-500 w-max rounded-2xl overflow-hidden">
|
||||
<div class="inline-block py-2 px-4 bg-pink-700 rounded-2xl">
|
||||
<div class="text-2xl mb-4 text-white font-bold flex justify-between">
|
||||
<div class="bg-rose-500 w-max rounded-2xl overflow-hidden">
|
||||
<div class="inline-block py-2 px-4 bg-rose-600 rounded-2xl">
|
||||
<font-awesome-icon :icon="['fas', 'blog']"/>
|
||||
</div>
|
||||
<span class="px-4">最新博文</span>
|
||||
</div>
|
||||
<a class="bg-rose-500 rounded-2xl py-2 px-4" href="/blog/">
|
||||
<font-awesome-icon :icon="['fas', 'chevron-right']"/>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div :class="{'justify-center': !hasPosts}" class="container flex">
|
||||
<span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
|
||||
<div v-else class="grid grid-cols-4 gap-4 w-full">
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
|
||||
<article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article-digest-viewer/>
|
||||
|
||||
<footer class="bg-white w-full mt-8 min-h-48 flex items-end py-4">
|
||||
<div class="container mx-auto">
|
||||
<p class="text-center leading-8">©2024 All rights reserved.</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">
|
||||
<img alt="苏ICP备2022016243号-1"
|
||||
src="https://img.shields.io/badge/%E8%8B%8FICP%E5%A4%87-2022016243%E5%8F%B7--1-green?style=for-the-badge">
|
||||
</a>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641" rel="noreferrer" target="_blank">
|
||||
<img alt="苏公网安备32050602011641"
|
||||
src="https://img.shields.io/badge/%E8%8B%8F%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87-32050602011641-blue?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAFQklEQVRYw%2B3Wa1BUdRjH8SOpMeg4WhZGpDIxiaaTeUFgWrxE4AVRQJGlRRAVIV1JkbgMgQLi5AVBQSVLSp0xlEAUKBEEFZCrCstll8UV2AV2YbmoGCrYv31%2BR95UL5pmmtamZ%2Bbz6rz5nvOc%2F5zDcX9jGLs%2FiTxuyvIlWYkRFeTHA2HVRFtzfhthTG5KuH96%2FvUgNlC4mMgyw1NJit%2FaAXLKazYje9xtIMZ%2FOZz50gW%2B9hcNkvoLEemEPbnrSP47QYwxQ5Ifv54RqzcXwFFvSyjaOhfavN8F7Y5ZcC%2FHH9JOB4LNa9Zw5YA76OZV8vIGMdZtSp7cDrtOnOavYiQhTAiPwi1AMtIQaqyngsxpBtw2GAGDKfaQmpUAa6xc4Vfp4UtEdzAMycsT9JQ1Tyctl%2F2eEkuTlYysF%2FrCUNxMqDEzgTqzSXBnpgnIHCzgjvEEuD52DLBr3rA1MAaWmNtB582wdtIljZ9G9D%2BIPU6aTxIPBjHCcXvg3CEh9K2fDLWvjIH6D6fwTIyheuwEqLUyhzLOALq8pkN%2BbgRw3HY4FBsMzxojZxP9DequLjAlQwVrbpIjhyIY4UYGQ%2FbuhdBqPxlk3Gion2IMDQIz3kJe%2FZS34I7uHkmD7VSQVgYDNyIAwsNCgfXGXoOBPjP9DKrOCAogA2etGTmTHAMcFwFZye7wS5QlVHGjoEw4A2qPCUBZ6AzNcQ5Q%2FYYRdO%2BYB1U3dsDwypLio4FJ3ECryIzWz6Cm3NgTRHN8HiPF6eHAGSbAdh8feFZkB7krzaHE9h2o85sDsiAbkIsXQMN%2Be2CtGyF0kzdwXCgU5%2B%2BD%2FouLQFV4OEU%2Fg2Q%2FiNuIPNaKkQflAWBqexxGjhLDVUcL6IwSQN3SGVChe6FJg9dckCx6D1QBliDZLIAxo7eA8eyv4KE0BJqTrHkZvnL9DJKn%2BTwmt0NsGGHZy2Dn3kQYfsQ53Hh4%2Fr4RNGz8AIpdzKEuaAF0RC2E57MmQgE3ATjuM%2FCPiANW7AqSfQJQ5vk362eQKmd3JrmXsoSRocpNIMnbB9zbceDIWUPmuHFQNMkISqa9DpUvNK6YDpW2s8DfwBK48WFQnhMCgzUBoLy0BrRVe5P0NWjPLdKUsJiR1tR1wGp8IeZwMgx%2FSrgRvjxuAziNcwLvyathLOcJHLflhRDYGRYFrNET2rJ5yvPLoas0tOj%2FoL8UpC4JHyTSU%2B6MNCS4gvKoAB5WiKG%2BMAQSg0WwLXQ%2FZJ3xhao0FxB5hYCbUwAEfhEF3Td8QP2dAOQnPwFlxgrolUVq9TPoaX%2BZB2nLc2Gk6awj1MU78HZZwJMid2Byb550JQwVO0NfxlJgdz14vWKeRAiK6DlQF28PLZdcoLNcBIO92bb6GTQ8Q%2F13RURT6tlH2gvXMlITLYD6uI%2Bgp2ozdF0VQXumM6ivCqGvahM8kPiDItkeGo8tB025GFQ3xFrSr06zI3%2F4yde7oN7m0sWk5eKWDqK5JWJQvAHac9ygq3Adr9gTNNc3QG85rzPfHe5%2F7wDtPwuhp%2FZz6CjyhaZzwi6ivfetHdH%2FoP77%2B3PJQOsuRnqkQdCa4wWqyx6gyecpL64GTaEX7ycXUJz4GJp1B4O0X%2FHg0Xp1tFV%2B8Ei1k6c5coHofxBrrzQinbKYo0SVJ%2Bwn6iurGHlY5gY911aDJnMFaHXXiDp9GQyvtKfUA9QFTtBZ7gPdit0tpFd9OpwwFmlA9D%2Fo9yNLDpxIKmI8PMnNSNtviCLVpYTITzrXEGWaq4qos0WgOPdpCenIF%2BeRrurjB4k0PXopYZG6gMg%2FD%2FgNBUxhAbSAmKMAAAAASUVORK5CYII%3D">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -15,7 +15,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://cantyonion.site',
|
||||
target: 'https://cantyonion.site',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user