当前位置：首页 > article >正文

Vue3+vite2 博客前端开发

article 2024/11/19 12:18:31

Vue3+vite2 博客前端开发

文章目录

Vue3+vite2 博客前端开发
- 前言
- 页面展示
- 代码设计
- - 卡片设计
  - 背景（Particles.js粒子效果）
  - 右侧个人信息与公告
  - 内容页
  - 友链
- 总结

前言

大家是否也想拥有一个属于自己的博客？但是如何去开发博客，怎样去开发一个好看的博客，这应该就是大家思考的问题！下面，我为大家带来了我的博客前端项目，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>

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>

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>

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

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"