博客全方位打造之路：搭建个人博客(续）

2023-09-27 23:19:49

搭建功能齐全的个人博客：使用 VuePress，添加留言板

前言

在数字化时代，建立一个个人博客是一个展示你的思想、分享你的知识和与他人联系的强大方式。借助 VuePress 这样的现代化静态网站生成器，搭建一个美观且功能齐全的博客从未如此简单。本文将指导你一步步使用 VuePress 创建一个包含留言板功能的个人博客。

创建留言板

留言板是任何博客的关键组成部分，它允许你的读者与你互动并分享他们的想法。要添加留言板，请在 VuePress 配置文件的 nav 部分中添加以下内容：

{
    path: '/feedback',
    component: feedback
}

然后，创建一个名为 feedback.vue 的 Vue 组件，并添加以下代码：

<template>
    <div class="feedback">
        <el-form :model="form">
            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input type="textarea" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { useMessage } from 'naive-ui'
export default {
    setup() {
        const form = reactive({
            name: '',
            email: '',
            content: ''
        })
        const message = useMessage()
        const onSubmit = () => {
            if (!form.name || !form.email || !form.content) {
                message.error('请填写完整信息')
                return
            }
            // TODO: 这里需要实际发送数据
            console.log('发送成功')
            message.success('发送成功')
        }
        return {
            form,
            onSubmit
        }
    }
}
</script>

优化样式

为了让你的博客看起来更专业，添加一些样式优化是至关重要的。在你的样式表中添加以下内容：

/* 留言板 */
.feedback {
    padding: 20px;
}
.feedback .el-form {
    width: 100%;
}
.feedback .el-form-item {
    margin-bottom: 20px;
}
.feedback .el-form-item label {
    width: 80px;
}
.feedback .el-form-item .el-input {
    width: calc(100% - 80px);
}
.feedback .el-form-item .el-input--textarea {
    height: 200px;
}
.feedback .el-button {
    margin-left: 80px;
}