Vue3+vite2 博客前端开发

前言

大家是否也想拥有一个属于自己的博客？但是如何去开发博客，怎样去开发一个好看的博客，这应该就是大家思考的问题！下面，我为大家带来了我的博客前端项目，CYBlogView|德尔佐盖特

项目地址https://github.com/itcyy/vueBlog

页面展示

主页

内容页

友链页

音乐挂件

代码设计

卡片设计

html

<template>
<div><div v-for="(item, index) in Data" :key="index" @select="toCardbog(item.url)" style="margin-left: 50px;"><RouterLink :to="item.url" target="_blank"><el-card class="box-card" shadow="always" ><template #header><div class="card-header"><span style="color: white;">{{item.title}}</span></div></template><div class="text item">{{ item.data }}</div><div class="r"><div class="r"><div class="text "><el-icon><View style="width: 24px;height: 24px;"/></el-icon></div><div class="num">{{ item.number }}</div></div><div class="r" style="margin-left: 400px;"><div class="text"><el-icon><Clock style="width: 24px;height: 24px;"/></el-icon></div><div class="num">{{ item.time }}</div></div></div></el-card></RouterLink></div><el-pagination background layout="prev, pager, next" :total="7" style="margin-top: 20px;margin-left: 45%;"/>
</div>
</template>

js

const toCardbog = (url : string) =>{}
const Data = [{title: "欢迎来到德尔佐盖特",data: "欢迎来到德尔佐盖特",number: "562",time: "2021-10-05",url: "/gdufe?id=4"
},{title: "如何用Vue开发前端和网站",data: "如何用Vue开发前端和网站...",number: "463",time: "2022-11-05",url:"/article?id=1"
}, {title: "HarmonyOS APP 开发入门",data: "鸿蒙并不是一个单纯的手机操作系统...",number: "9313",time: "2022-04-13",url: "/article?id=2",
}, {title: "HarmonyOS APP Text 组件",data: "鸿蒙并不是一个单纯的手机操作系统...",number: "463",time: "2022-11-05",url: "/article?id=3"
}]

css

.c{display: flex;flex-direction: column;
}
.card-header {display: flex;justify-content: space-between;align-items: center;z-index: 1;user-select: none;
}.text {font-size: 14px;height: 20px;color: white;user-select: none;
}.item {margin-bottom: 18px;
}.box-card {width: 680px;margin-top: 20px;background-color: #3021211d;border-color: #1f1f1f;z-index: 33;
}
.eye-box{display: flex;flex-direction: row;user-select: none;
}
.num{margin-top: -5px;color: white;user-select: none;
}
.r{display: flex;flex-direction: row;
}

背景（Particles.js粒子效果）

html

<div><Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="options"style="z-index: -1;" /></div>

js

import { reactive } from 'vue'
import { loadFull } from "tsparticles"
import type { Engine } from 'tsparticles-engine'const particlesInit = async (engine: Engine) => {await loadFull(engine)
}const particlesLoaded = async (container: any) => {console.log('Particles container loaded', container)
}const options = reactive({background: {color: {value: '#111014' // 粒子颜色}},fpsLimit: 60,interactivity: {events: {onClick: {enable: true,mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。},onHover: {enable: true,mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。},resize: true},modes: {bubble: {distance: 400,duration: 2,opacity: 0.8,size: 40},push: {quantity: 4},repulse: {distance: 200,duration: 0.4}}},particles: {color: {value: '#ffffff'},links: {color: '#ffffff', // '#dedede'。线条颜色。distance: 150, // 线条长度enable: true, // 是否有线条opacity: 0.5, // 线条透明度。width: 1 // 线条宽度。},collisions: {enable: false},move: {direction: 'none',enable: true,outMode: 'bounce',random: false,speed: 4, // 粒子运动速度。straight: false},number: {density: {enable: true,area: 800},value: 80 // 粒子数量。},opacity: {value: 0.5 // 粒子透明度。},shape: {type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"},size: {random: true,value: 5}},detectRetina: true
})

右侧个人信息与公告

html

<div class="app"><el-card class="box-card" shadow="always"><div><img style="width:180px;height: 180px;" src="./../assets/img/5.png"></div><div><p class="text">阿诺斯·福尔迪哥德</p></div><div><p class="bar_text">心之所向，皆为华夏</p></div></el-card><el-card class="box-card" shadow="always" style="height: 180px;"><div><p style="color: aliceblue;font-family: 华文行楷;font-size: 25px;">公告</p></div><div><p style="color: white;">有问题可添加QQ咨询，QQ：2817179154</p></div></el-card></div>

css

.app{display: flex;flex-direction: column;margin-left: 50px;
}
.text {font-size: 14px;
}.item {padding: 18px 0;
}.box-card {width: 210px;margin-left: 20px;background-color: #3021211d;margin-top: 20px;height: 280px;display: flex;border-color:#1f1f1f;justify-content: space-around;
}
.text{font-size: 18px;font-family:华文行楷;text-align: center;color: white;
}
.textpo{font-family: 楷体;text-align: center;
}
.bar_text{font-family: 华文楷体;text-align: center;margin-top: 20px;color: white;user-select: none;
}

内容页

html

    <div id="md"><div class="tarmd"><MdEditor v-model="text" previewOnly :previewTheme="theme"style="padding: 20px 20px 20px 20px;background-color: #55000000;border-radius: 20px;" /><UserView></UserView></div></div>

js

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import UserView from '../../tool/UserView.vue'
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {setmd} from "../../static/index.ts"
const router = useRouter();
let fileid = router.currentRoute.value.query.id
console.log(fileid)
const File = ''
const theme = "mk-cute"
const text = setmd(fileid)
</script>
<style>
#md {width: 1200px;position: relative;top: 80px;
}
.tarmd{display: flex;flex-direction: row;}
img > p{width: 200%;height: 200%;
}

友链

html

 <div class="top_1"><div class="row_f"> <div class="card_g"><h1 style="font-family: 华文琥珀;">友情链接</h1><h2 style="font-family: 华文琥珀;margin-top: 20px;margin-bottom: 20px;">框架(1)</h2><div class="boxv"><div class="box1 v2"><a href="https://cn.vuejs.org/" target="_blank"><img style="opacity: 0.5;width: 210px;height: 140px;border-radius: 10px;z-index: 1;" src="https://img2.baidu.com/it/u=2167395474,3773933499&fm=253&fmt=auto&app=138&f=PNG?w=1018&h=500" ></a></div><p style="text-align: center;font-size: 15px;">Vue3</p></div><h2 style="font-family: 华文琥珀;margin-top: 20px;margin-bottom: 20px;">推荐博客(2)</h2><div class="r_f"><div class="boxv"><div class="box1"><a href="https://www.itcyy.cn" target="_blank"><img style="opacity: 0.5;width: 210px;height: 140px;border-radius: 10px;z-index: 1;" src="https://img1.baidu.com/it/u=731412532,1390130133&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" ></a></div><p style="text-align: center;font-size: 15px;">德尔佐盖特</p></div><div class="boxv"><div class="box1"><a href="https://miaoyoh.github.io/" target="_blank"><img style="opacity: 0.5;width: 210px;height: 140px;border-radius: 10px;z-index: 1;" src="https://i.postimg.cc/NM6JZhJh/QQ-20230318213213.png" ></a></div><p style="text-align: center;font-size: 15px;" target="_blank">Winghau's Blog</p></div></div><h2 style="font-family: 华文琥珀;margin-top: 20px;margin-bottom: 20px;">我的友链</h2><div ><MdEditor v-model="text1" previewOnly :previewTheme="theme" style="padding: 20px 20px 20px 20px;background-color: #55000000;"/></div></div></div></div>

css

.box1{border-radius: 10px;width: 100%;height: 160px;
}
.urlText{font-size:13px;color: #fff;
}
.v1{display: none;
}
.v2:hover+div{display: block;
}
.boxv{border-radius: 10px;width: 210px;height: 160px;margin-left: 20px;
}
.top_1{position: relative;top: 80px;}
.row_f{display: flex;flex-direction: column;width: 1200px;border-radius: 8px;}
.r_f{display: flex;flex-direction: row;
}
.card_Bar{display: flex;justify-content: space-around;align-items: center;
}
.card_g{height: 900px;background-color: #00000000;width: 100%;margin-top: 30px;
}
.len_g{height: 40px;margin-top: 20px;border-radius: 30px;width: 350px;background-color: #3316161a;display: flex;justify-content: space-around;align-items: center;}
.text_dogg{color: white;text-align: center;user-select: none;fon

js

import { ElMessage } from 'element-plus'
import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import data from "../../static/friends.md?raw"
const theme = "mk-cute"
const text1 = data
const components = {name: "Friends"}
var text = "1"

总结

篇幅有限，只能分享到这里，更多可以在github中获得。推荐文章：程序员
再见