feat:删除博客模块
This commit is contained in:
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<footer class="blog-site-footer">
|
||||
<span>© {{ new Date(startDay).getFullYear() }}-{{ new Date().getFullYear() }} Cxx</span>
|
||||
<span>本网站已安全运行{{ getBlogRunTotalTime(startDay) }}</span>
|
||||
<span>博客全站共{{ formatBlogWordCount(blogStore.blogStats.wordCount) }}字</span>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
import { formatBlogWordCount, getBlogRunTotalTime } from '@/utils/blog/blogUtil.ts'
|
||||
|
||||
const startDay = '2025-01-07'
|
||||
|
||||
const blogStore = useBlogStore()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/blog/blog.footbar.module.scss";
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<el-menu router class="blog-menu-container">
|
||||
<el-menu-item index="/blog/overview">
|
||||
<i class="fa fa-fw fa-home" />
|
||||
<span class="menu-title">首页</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/blog/category">
|
||||
<i class="fa fa-fw fa-th" />
|
||||
<span class="menu-title">分类</span>
|
||||
<span class="value">{{ blogStore.blogStats.categoryCount }}</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/blog/archive">
|
||||
<i class="fa fa-fw fa-archive" />
|
||||
<span class="menu-title">归档</span>
|
||||
<span class="value">{{ blogStore.blogStats.blogCount }}</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item>
|
||||
<i class="fa fa-search fa-fw" />
|
||||
<span class="menu-title">搜索</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
const blogStore = useBlogStore()
|
||||
</script>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div class="blog-brief">
|
||||
<div class="avatar">
|
||||
<img :src="getAssetsImageFile('avatar.jpg')" alt="暂无图片"/>
|
||||
<span>Cxx</span>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="item" @click="viewBlogArchiveClick">
|
||||
<span class="value">{{ blogStore.blogStats.blogCount }}</span>
|
||||
<span class="name">日志</span>
|
||||
</div>
|
||||
|
||||
<div class="item" @click="viewBlogCategoryClick">
|
||||
<span class="value">{{ blogStore.blogStats.categoryCount }}</span>
|
||||
<span class="name">分类</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social">
|
||||
<div class="item">
|
||||
<i class="fa fab fa-github"></i>
|
||||
<span class="name">Github</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="fa fab fa-weixin"></i>
|
||||
<span class="name">微信</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="latest-blog">
|
||||
<div class="title">
|
||||
<i class="fa fa-history fa-" />
|
||||
<span>近期文章</span>
|
||||
</div>
|
||||
|
||||
<div class="blog-list">
|
||||
<span v-for="(item, index) in blogStore.latestBlogList"
|
||||
:key="index" @click="viewBlogClick(index)">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="blog-time">-->
|
||||
<!-- <blog-time />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BlogTime from '@/layout/blog/components/Tools/BlogTime.vue'
|
||||
import { getAssetsImageFile } from '@/utils'
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const blogStore = useBlogStore()
|
||||
const router = useRouter()
|
||||
|
||||
/**
|
||||
* 点击查看博客归档按钮
|
||||
*/
|
||||
const viewBlogArchiveClick = () => {
|
||||
router.push('/blog/archive')
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击查看博客分类按钮
|
||||
*/
|
||||
const viewBlogCategoryClick = () => {
|
||||
router.push('/blog/category')
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击查看博客按钮
|
||||
* @param index 索引
|
||||
*/
|
||||
const viewBlogClick = async (index: number) => {
|
||||
const blogId = blogStore.latestBlogList[index].id
|
||||
await router.push({ name: 'BlogDetail', params: { id: blogId } })
|
||||
}
|
||||
</script>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div class="blog-summary">
|
||||
<div v-if="blogSummaryInfo.isBlogDetail" class="blog-summary-tab">
|
||||
<span @click="changeTabClick('Catalog', $event)" class="tab-active">
|
||||
文章目录
|
||||
</span>
|
||||
|
||||
<span @click="changeTabClick('Summary', $event)">
|
||||
站点概览
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<blog-site-brief v-if="blogSummaryInfo.activePanelName === 'Summary'
|
||||
|| !blogSummaryInfo.isBlogDetail"/>
|
||||
<MdCatalog v-if="blogSummaryInfo.activePanelName === 'Catalog'
|
||||
&& blogSummaryInfo.isBlogDetail"
|
||||
editorId="blog-id" :scrollElement="scrollElement"/>
|
||||
|
||||
<div class="scroll-container" @click="back2topClick()">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
<span>{{ blogStore.progressValue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BlogSiteBrief from '@/layout/blog/components/Sidebar/BlogSiteBrief.vue'
|
||||
import { MdCatalog } from 'md-editor-v3'
|
||||
import { setActiveClass } from '@/utils'
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
import { reactive, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const blogStore = useBlogStore()
|
||||
const router = useRouter()
|
||||
|
||||
const scrollElement = document.documentElement
|
||||
|
||||
const blogSummaryInfo = reactive({
|
||||
activePanelName: 'Catalog',
|
||||
isBlogDetail: false
|
||||
})
|
||||
|
||||
/**
|
||||
* 监听路由变化 如果当前是查看博客 则需要显示博客目录
|
||||
*/
|
||||
watch(() => router.currentRoute.value.path, (path) => {
|
||||
blogSummaryInfo.isBlogDetail = path.includes('/blog/detail')
|
||||
if (blogSummaryInfo.isBlogDetail) {
|
||||
blogSummaryInfo.activePanelName = 'Catalog'
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
|
||||
/**
|
||||
* 切换tab标签
|
||||
* @param panelName panel名称
|
||||
* @param e 点击事件
|
||||
*/
|
||||
const changeTabClick = (panelName: string, e: Event) => {
|
||||
blogSummaryInfo.activePanelName = panelName
|
||||
const element = e.target as Element
|
||||
setActiveClass('blog-summary-tab', 'span', element, 'tab-active')
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击返回顶部按钮
|
||||
*/
|
||||
const back2topClick = () => {
|
||||
document.body.scrollTop = document.documentElement.scrollTop = 0
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="title-container">
|
||||
<span class="title">{{ blogTitleInfo.title }}</span>
|
||||
<span class="sub-title">{{ blogTitleInfo.subTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const blogTitleInfo = reactive({
|
||||
title: 'NJCxx0822',
|
||||
subTitle: '不要因为别人5%的负面评价而否定自己100%的努力。'
|
||||
})
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<aside class="blog-aside">
|
||||
<div class="top-container card-container">
|
||||
<blog-title />
|
||||
<blog-menu />
|
||||
</div>
|
||||
|
||||
<blog-summary class="card-container"/>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BlogTitle from '@/layout/blog/components/Sidebar/BlogTitle.vue'
|
||||
import BlogMenu from '@/layout/blog/components/Sidebar/BlogMenu.vue'
|
||||
import BlogSummary from '@/layout/blog/components/Sidebar/BlogSummary.vue'
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
import { onMounted } from 'vue'
|
||||
const blogStore = useBlogStore()
|
||||
|
||||
onMounted(async () => {
|
||||
await blogStore.queryBlogStats()
|
||||
await blogStore.queryLatestBlog()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/blog/blog.sidebar.module.scss";
|
||||
</style>
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<div class="cube-container">
|
||||
<div class="cube">
|
||||
<div class="front">
|
||||
<span>欢迎光临</span>
|
||||
</div>
|
||||
|
||||
<div class="back">
|
||||
<span>❤</span>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<span>Cxx0822</span>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<span>请多关照</span>
|
||||
</div>
|
||||
|
||||
<div class="top">
|
||||
<span>❤</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<span>❤</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cube-container {
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
-webkit-perspective: 1000px;
|
||||
perspective: 1000px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.cube {
|
||||
width: 0; /* 大角度旋转 */
|
||||
position: absolute;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
|
||||
-webkit-transform-origin: center center -100px;
|
||||
transform-origin: center center -100px;
|
||||
-webkit-animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
|
||||
animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
|
||||
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
|
||||
span {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.front {
|
||||
transform: rotateY(0deg) translateZ(25px);
|
||||
background-color: rgba(0, 191, 255, 0.7);
|
||||
border: 1px solid rgba(0, 191, 255, 0.7);
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateX(180deg) translateZ(25px);
|
||||
background-color: rgba(124, 252, 0, 0.7);
|
||||
border: 1px solid rgba(124, 252, 0, 0.7);
|
||||
}
|
||||
|
||||
.left {
|
||||
transform: rotateY(-90deg) translateZ(25px);
|
||||
background-color: rgba(255, 215, 0, 0.7);
|
||||
border: 1px solid rgba(255, 215, 0, 0.7);
|
||||
}
|
||||
.right {
|
||||
transform: rotateY(90deg) translateZ(25px);
|
||||
background-color: rgba(255, 69, 0, 0.7);
|
||||
border: 1px solid rgba(255, 69, 0, 0.7);
|
||||
}
|
||||
|
||||
.top {
|
||||
transform: rotateX(90deg) translateZ(25px);
|
||||
background-color: rgba(255, 0, 157, 0.7);
|
||||
border: 1px solid rgba(255, 0, 157, 0.7);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
transform: rotateX(-90deg) translateZ(25px);
|
||||
background-color: rgba(184, 111, 220, 0.7);
|
||||
border: 1px solid rgba(184, 111, 220, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes around {
|
||||
100% {
|
||||
transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes around {
|
||||
100% {
|
||||
transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<canvas id="time-canvas"></canvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { TimeCanvas } from '@/utils/blog/timeCanvas'
|
||||
|
||||
let timeInterval: any = null
|
||||
|
||||
onMounted(() => {
|
||||
const canvas = document.getElementById('time-canvas') as HTMLCanvasElement
|
||||
canvas.width = canvas.parentElement?.offsetWidth as number
|
||||
canvas.height = canvas.parentElement?.offsetHeight as number
|
||||
const context = canvas.getContext('2d') as CanvasRenderingContext2D
|
||||
const timeCanvas = new TimeCanvas(context, canvas.width, canvas.height)
|
||||
|
||||
timeInterval = setInterval(() => {
|
||||
// 清空整个Canvas，重新绘制内容
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height)
|
||||
timeCanvas.drawDatetime()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timeInterval)
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -1,196 +0,0 @@
|
||||
<template>
|
||||
<div class="blog-tools">
|
||||
<a class="book-mark-link fa fa-bookmark"/>
|
||||
|
||||
<a href="https://github.com/Cxx0822" class="github-corner" aria-label="View source on GitHub" target="_blank">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250"
|
||||
style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path
|
||||
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6
|
||||
C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3
|
||||
C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path
|
||||
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6
|
||||
C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0
|
||||
C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1
|
||||
C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4
|
||||
C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9
|
||||
C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5
|
||||
C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5
|
||||
C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- <vue-particles id="particles" :options="particlesOptions"/>-->
|
||||
<progress class="blog-progress" id="blog_progress" value="0" />
|
||||
<blog-cube/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BlogCube from '@/layout/blog/components/Tools/BlogCube.vue'
|
||||
import { createHeartDiv } from '@/utils/blog/blogUtil.ts'
|
||||
import { Ribbon } from '@/utils/blog/ribbon'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
|
||||
const ribbon = new Ribbon()
|
||||
const blogStore = useBlogStore()
|
||||
|
||||
/**
|
||||
* 处理点击事件
|
||||
* @param event 事件
|
||||
*/
|
||||
const handleClick = (event) => {
|
||||
createHeartDiv(event.clientX, event.clientY)
|
||||
|
||||
if (event.target.classList.contains('ribbon-canvas')) {
|
||||
ribbon.reDraw()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('scroll', () => {
|
||||
const progressBar = document.getElementById('blog_progress') as HTMLProgressElement
|
||||
progressBar.max = document.documentElement.scrollHeight - window.innerHeight
|
||||
progressBar.value = window.scrollY
|
||||
blogStore.progressValue = `${(progressBar.value / progressBar.max * 100).toFixed(0)}%`
|
||||
})
|
||||
|
||||
document.addEventListener('click', handleClick)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
ribbon.clear()
|
||||
document.removeEventListener('click', handleClick)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/blog/blog.variable.module.scss" as blog;
|
||||
|
||||
.blog-tools {
|
||||
position: absolute;
|
||||
|
||||
.book-mark-link {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: -2px;
|
||||
left: 20px;
|
||||
color: #222;
|
||||
font-size: 26px;
|
||||
transition: .3s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #222;
|
||||
font-size: 26px;
|
||||
transition: .3s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%, 100% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
20%, 60% {
|
||||
transform: rotate(-25deg)
|
||||
}
|
||||
40%, 80% {
|
||||
transform: rotate(10deg)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none
|
||||
}
|
||||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
|
||||
#particles {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
transform: rotate(45deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.heart:after, .heart:before {
|
||||
content: "";
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: inherit;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.heart:after {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.heart:before {
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
100% {
|
||||
transform: translateY(-20px) rotate(45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-progress {
|
||||
/* Positioning */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: blog.$theme-color;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.blog-progress::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.blog-progress::-webkit-progress-value {
|
||||
background-color: blog.$theme-color;
|
||||
}
|
||||
|
||||
.blog-progress::-moz-progress-bar {
|
||||
background-color: blog.$theme-color;
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<section class="blog-container" id="blog-container">
|
||||
<tools />
|
||||
|
||||
<sidebar />
|
||||
|
||||
<section>
|
||||
<router-view/>
|
||||
|
||||
<footer-bar />
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tools from '@/layout/blog/components/Tools/index.vue'
|
||||
import Sidebar from '@/layout/blog/components/Sidebar/index.vue'
|
||||
import FooterBar from '@/layout/blog/components/FooterBar/index.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/blog/blog.module.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user