未加星标

vuepress和valine搭建带评论的博客

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

创建工程 blog ,初始化 yarn init ,添加依赖

yarn add vuepress 复制代码 创建博客目录

创建博客文件夹 docs ,该文件夹适用于编写文档用的,其中的每一个 markdown 文件(.md)都是可以看做一篇博客。当然最好在 docs 下面为各主题都创建一个单独的目录。

每一个路径中默认的访问文件都是 README.md ,后面对于 README.md 文件的路径配置可以省略文件名,只用目录路径代替。

|--blog | |--docs | | |--README.md | | |--.vuepress | | | |--config.js | | |--vuepress | | | |--1.first.md | | |--koa ... 复制代码 配置文件

而后在其中创建配置文件 .vuepress/config.js

config.js 中模块用于 vuepress 的除内容外的显示和系统相关的配置,例如配置侧边 bar、头部 bar、搜索栏、主题等等。如下:

module.exports = { title: 'johnshere的学习笔记', description: 'johnshere的学习笔记', head: [ // ['link', { rel: 'icon', href: '/img/logo.ico' }], // ['link', { rel: 'manifest', href: '/manifest.json' }], ], base: '/blog/docs/', dest: '_dist/docs', themeConfig: { // nav: [ // { text: '主页', link: '/' }, // { text: '导读', link: '/essay/' }, // { text: 'External', link: 'https://google.com' } // ], sidebar: [{ title: 'vuepr2ess', children: ['/vuepress/1.first'] }], sidebarDepth: 2, lastUpdated: 'Last Updated' }, markdown: { // 显示代码行号 lineNumbers: true }, plugins: [ [ '@vuepress/register-components', { componentsDir: './components' } ] ] } 复制代码 启动命令配置

可以在 package.json 中配置启停的快捷命令,如下:

{ ... "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }, ... } 复制代码

它们分别是开发和正式发布的命令。执行开发命令,开始开发自己的博客。

评论功能-Valine

Valine 是一个第三方的评论模块,可用于集成于我们的系统。官方网站, 网友使用

官方网站更多的侧重在于他们系统的使用和功能,没有用过多的笔墨介绍如何在 vuepress 这样的地方如何集成。而这片网上浏览量较多的博文又语焉不详,不清楚的依然不清楚,了解的也学不到什么。

准备工作 账号

使用时需要注册一个账号,可以注册一个开发学习用的账号,基本满足个人使用。下面使用时需要它提供的 appId 和 appKey。

依赖 # Install leancloud's js-sdk npm install leancloud-storage --save # Install valine npm install valine --save 复制代码 1、组件引用

vuepress 允许自定义组件,如果我定一个组件,在各个 md 文件中引用这个组件。这个组件中实现 Valine 的所需条件,即可以使用了。

自定义组件

.vuepress/config.js 配置文件中加入

plugins: [ [ '@vuepress/register-components', { componentsDir: './components' } ] ] 复制代码

这是设置自定义组件的位置。然后在 .vuepress/components 目录中创建文件 Valine.vue ,这是用于自定义自己的 Valine 组件。

Valine.vue 的源码如下,这里我开启了阅读量统计。 leancloud-visitors 类所在的元素的 id 会用来识别页面所在位置。

<template> <section style="border-top: 2px solid #eaecef;padding-top:1rem;margin-top:2rem;"> <div> <!-- id 将作为查询条件 --> <span class="leancloud-visitors" data-flag-title="Your Article Title"> <em class="post-meta-item-text">阅读量: </em> <i class="leancloud-visitors-count"></i> </span> </div> <h3> <a href="javascript:;"></a> 评 论: </h3> <div id="vcomments"></div> </section> </template> <script> export default { name: 'Valine', mounted: function () { // require window const Valine = require('valine'); if (typeof window !== 'undefined') { document.getElementsByClassName('leancloud-visitors')[0].id = window.location.pathname this.window = window window.AV = require('leancloud-storage') } new Valine({ el: '#vcomments', appId: 'XXXXXXXXXXXXX',// your appId appKey: 'XXXXXXXXXXXXX', // your appKey notify: false, verify: false, path: window.location.pathname, visitor: true, avatar: 'mm', placeholder: 'write here' }); }, } </script> 复制代码 使用

然后在你所写的 md 文件中使用这个标签就行,比如在最下面一行键入

<Valine></Valine> 复制代码

这样在文章最后就会使用这个组件,如下图。我这里开启了访问量统计功能,这个功能需要去 Valine 的控制台设置。


vuepress和valine搭建带评论的博客

这样做会有一个问题,就是评论系统,在页面结构中会被 vuepress 算在“内容”部分,这样会很奇怪。正常的认知评论部分应该在上下章和更新时间下面才对,而且当评论过多时,更为奇怪了。所以我更建议使用下面的方法来引入。


vuepress和valine搭建带评论的博客
2、主题引用

我的目的很简单,通过修改主题的布局,把评论放到下面去。主题形式的修改有一个好处,就是不需要在每一个 md 文件中再重复引用了。

修改默认主题

我没有自己重新编写一个主题,就是复制了一下默认主题的内容,进行了修改。默认主题的路径在 node_modules\vuepress\lib\default-theme\Layout.vue 这个位置。在 .vuepress/ 目录下创建 theme/ 目录,并复制 Layout.vue 文件进行,调整其中所有引用依赖的文件不变,如:

import Home from './Home.vue'

改为

import Home from '../../../node_modules/vuepress/lib/default-theme/Home.vue'

这样默认主题就没有任何改变。

但是我在其中的 Page 组件下方增加了 Valine 组件,如下:


vuepress和valine搭建带评论的博客

这样我就完成了,在不改变原默认主题的情况下,使评论放在 markdown 内容的下方。

Valine 调整

上面使其位置达到了,但是由于 dom 位置发生了变化,所以需要调整样式。按我的设想,应该除了样式以外<Valine>组件其他东西不需要调整。如下:

<template> <div class="page"> <section class="page-edit"> <div> <!-- id 将作为查询条件 --> <span class="leancloud-visitors" data-flag-title="Your Article Title"> <em class="post-meta-item-text">阅读量: </em> <i class="leancloud-visitors-count"></i> </span> </div> <h3> <a href="javascript:;"></a> 评 论: </h3> <div id="vcomments"></div> </section> </div> </template> 复制代码

这里用到的 class,都是 vuepress 对 markdown 内容渲染时使用的样式。page,page-edit 都会随屏幕大小变化而变化,复用一下。

效果如下:


vuepress和valine搭建带评论的博客

但是实际测试发现,这样放在主题中 Valine 组件变成一个公共组件了,不会在每次切换路由时都生成。所以改成监听路由变换时重新初始化数据。

<script> export default { name: 'Valine', mounted: function () { // require window const Valine = require('valine'); if (typeof window !== 'undefined') { this.window = window window.AV = require('leancloud-storage') } this.valine = new Valine() this.initValine() }, watch: { $route (to, from) { if (from.path != to.path) { this.initValine() } } }, methods: { initValine () { let path = location.origin + location.pathname // vuepress打包后变成的HTML不知为什么吞掉此处的绑定`:id="countId"` document.getElementsByClassName('leancloud-visitors')[0].id = path this.valine.init({ el: '#vcomments', appId: 'XXXXXXXXXXXX',// your appId appKey: 'XXXXXXXXXXXXX', // your appKey notify: false, verify: false, path: path, visitor: true, avatar: 'mm', placeholder: 'write here' }); } } } </script> 复制代码

www.liuj.fun/blog/docs/v…

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:vuepress和valine搭建带评论的博客
本站链接:https://www.codesec.net/view/628433.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(68)