study
Vue2 博客 添加Valine评论系统及搜索搜录
昨天把我的博客改了名字,由乔木博客改成了王勇博的博客。在菜单里增加了留言板页面。进行了百度和必应的搜录网站提交 博客采用Vue2 添加Valine(https://valine.js.org/) 评论系统需要以下步骤
- 安装Valine:npm install --save valine 或 yarn add valine
- 我把留言系统做成了组件 组件页面代码如下
<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>
- 然后在留言板页面使用组件
<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 添加关键词和描述 的办法 如下代码
- 找到路由文件 route.js 这么修改代码
routes: [
{
path: "/",
name: "home",
component: () => import("./views/Home.vue"),
meta: {
title: "王勇博的博客",
content: {
keywords: "王勇博,王勇博的博客",
description: "王勇博的博客,记录我的生活",
},
},
},]
- 然后还需要在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 评论
