王勇博的博客

梦想之都 MC Server
官网
首页Vue2 博客 添加Valine评论系统及搜索搜录
study

Vue2 博客 添加Valine评论系统及搜索搜录

authoritwxb

昨天把我的博客改了名字,由乔木博客改成了王勇博的博客。在菜单里增加了留言板页面。进行了百度和必应的搜录网站提交 博客采用Vue2 添加Valine(https://valine.js.org/) 评论系统需要以下步骤

  1. 安装Valine:npm install --save valine 或 yarn add valine
  2. 我把留言系统做成了组件 组件页面代码如下
<template>
  <div id="myitem">
    <!-- ...你的其他模板代码... -->
    <div id="vcomments"></div>
  </div>
</template>

<script>
import Valine from "valine"; // 引入 Valine 评论插件
export default {
    data() {
        return {
            // ...你的数据...
        };
    },
    mounted() {
        this.initValine();
    },
    methods: {
        initValine() {
            // eslint-disable-next-line no-unused-vars, no-undef
            const valine = new Valine({
                el: "#vcomments",
                appId: "你的",
                appKey: "你的",
                // 其他配置项
            });
        },
    },
};
</script>

<style scoped>
/* ...你的样式... */
#vcomments {
    margin: 20px;
}
</style>

  1. 然后在留言板页面使用组件
<template>
  <div id="myitem">
    
    
    <!-- 使用 组件 -->
    <messages></messages>
  </div>
</template>

<script>
// 导入  组件
import messages from "../components/MessagesCpt.vue";

export default {
    data() {
        return {};
    },
    components: {
        // 注册  组件
        messages,
    },
    methods: {},
};
</script>

<style scoped>
/* ...你的样式... */
</style>

自此留言板制作完成!

下面我又把网站提交到了百度搜录和bing搜录 给网站添加了 关键词和描述 百度搜录:https://ziyuan.baidu.com/site/index#/ 必应搜录:https://www.bing.com/webmasters/

Vue2 添加关键词和描述 的办法 如下代码

  1. 找到路由文件 route.js 这么修改代码
routes: [
        {
            path: "/",
            name: "home",
            component: () => import("./views/Home.vue"),
            meta: {
                title: "王勇博的博客",
                content: {
                    keywords: "王勇博,王勇博的博客",
                    description: "王勇博的博客,记录我的生活",
                },
            },
        },]

  1. 然后还需要在main.js里用beforeEach(前置守卫)判断
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    // 路由发生变化修改页面keywords descroption
    if (to.meta.content) {
        let head = document.getElementsByTagName("head")[0]; // 确保获取的是数组中的第一个元素
        let keywordsMeta = document.querySelector('meta[name="keywords"]');
        let descriptionMeta = document.querySelector('meta[name="description"]');

        // 检查并设置 keywords meta 标签
        if (keywordsMeta) {
            keywordsMeta.setAttribute("content", to.meta.content.keywords);
        } else {
            let newKeywordsMeta = document.createElement("meta");
            newKeywordsMeta.setAttribute("name", "keywords");
            newKeywordsMeta.setAttribute("content", to.meta.content.keywords);
            head.appendChild(newKeywordsMeta);
        }

        // 检查并设置 description meta 标签
        if (descriptionMeta) {
            descriptionMeta.setAttribute("content", to.meta.content.description);
        } else {
            let newDescriptionMeta = document.createElement("meta");
            newDescriptionMeta.setAttribute("name", "description");
            newDescriptionMeta.setAttribute("content", to.meta.content.description);
            head.appendChild(newDescriptionMeta);
        }
    }

    next();
});

完成!

© 2026 itwxb · 本文由 GitHub Issues 同步

0 评论