博客添加评论功能及定制化样式

· 浏览次数 : 0

小编点评

**博客主题自定义** 1. **修改 scss | config | ejs 文件:** - 在主题目录下的 `_config.yml` 中添加 Valine 配置字段。 - 在 `_comments.ejs` 文件中使用 `valine` 构造函数实现评论功能。 2. **注册 LeanCloud 账号:** - 创建一个 LeanCloud 应用并获取 APP ID 和 APP Key。 3. **在 `_config.yml` 中添加 Valine 配置:** - 配置 `comments`、`type`、`button`、`appid`、`appkey`、`placeholder`、`avatar`、`guest_info`、`pageSize`、`recordIP`、`serverURLs`、`emojiCDN` 等配置项。 4. **在 `valine.ejs` 中添加样式:** - 设置正文默认行间距。 - 修改样式字段的格式和尺寸。 5. **在 `main.css` 中添加 Valine 配置:** - 引用 `_post.scss` 文件中的样式。 6. **重新生成静态文件:** - 使用 `hexo` 命令重新生成静态文件。 **注意:** - `_post.scss` 文件中的配置可能与主题配置文件不同,需要根据实际情况进行调整。 - 使用 `hexo s` 命令在本地验证静态文件是否生效。

正文

哈喽大家好,我是咸鱼。(博客网址: https://xxxsalted.github.io/)

在搭建了博客并换了主题之后,发现有许多细节方面的东西还需要完善和定制化一下,比如说行距和引用的样式我不是很喜欢,以及没有评论功能。

于是决定自己动手,说干就干。

PS:下文的修改操作仅限于博客主题(Klise),不同主题的配置文件可能会不一样,不过大体思路都是差不多的,即修改 scss | config | ejs 文件。

Valine 评论系统

搜了网上的教程,决定采用 Valine 来实现博客评论功能。

因为 Valine 的存储是基于 LearnCloud 的,所以我们要先注册一个 LeanCloud 账号。

登录之后进入【控制台】点击【创建应用】

应用创建好以后,进入刚刚创建的应用,选择左下角的【设置】 > 【应用凭证】,然后就能看到你的 APP IDAPP Key 了:

进入到你的博客根目录,找到你对应主题的主配置文件 _config.yml,添加关于 Valine 的配置字段。

comments:
  enable: true # 开启评论系统
  type: valine # 采用哪种评论系统
  button: true
valine:
  enable: true
  appid: # 从 LeanCloud 的应用中得到的 appKey
  appkey: # 从 LeanCloud 的应用中得到的 appId.
  placeholder: "说点什么吧!" # 评论框占位提示符
  path: window.location.pathname # 当前文章页路径,用于区分不同的文章页,以保证正确读取该文章页下的评论列表。
  avatar: /img/redcat.jpg # Gravatar 头像
  guest_info: nick,mail,link 
  pageSize: 10 # 评论列表分页,每页条数。
  recordIP: false # 是否记录评论者IP
  serverURLs: # 该配置适用于国内自定义域名用户, 海外版本会自动检测
  emojiCDN: # 设置表情包 CDN
  enableQQ: true # 是否启用昵称框自动获取QQ昵称和QQ头像, 默认关闭

配置好之后进入 Git bash 窗口,重新生成一下静态文件:

hexo clean

hexo g

在本地测试一下:

hexo s

但是发现没有生效,一开始我还以为配置格式不对(yaml 格式要求比较严格),再三重复确认了格式没问题之后,还是没有生效。

我就在想是不是没有渲染出来,然后去到主题目录下的 layout 目录,发现了 valine.ejs 文件。

<博客根目录>\Klise\layout\partials\_comments\valine.ejs

打开一看发现里面居然没有内容,然后网上搜了下资料,把相关内容复制粘贴了进去。

结果发现还是不行,是不是没有去调用这个 ejs 文件?

打开 <博客根目录>\Klise\layout\partials\_comments\index.ejs 文件查看验证一下,果然如此。

<%- partial('partials/_comments/waline') %>

因为我们用的是 Valine,所以把 partials/_comments/waline 改成 partials/_comments/valine 即可。

再试一下,成功了!

样式定制化

正文默认的行间距我不是很满意,所以打算改一下,打开我们的博客网页然后点击 F12 查看网页元素。

发现正文内容的样式字段在 post 类下的 p 标签中,而且在 main.css 文件里面。

但是这个 main.css 是动态生成的,即 hexo 生成 public 目录的时候会去找 主题\source 目录下的 sass 文件然后生成 main.css 文件。

所以我们想要修改样式,就必须找到标签样式对应的 sass 文件。

我们找到主题目录下的 main.scss 文件,发现他还引用了其他的 sass 文件

<博客根目录>\themes\Klise\source\css\main.scss
// Import sass files
@import "partials/fonts","partials/base","partials/layout","partials/post","partials/miscellaneous","partials/dark";

一个一个去找,最后在 _post.scss 文件下发现了对应的配置字段。

.post{
  ......
  p {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  ......

接下来修改引用样式对应的配置,原本引用样式是两端对齐的方式,而且还是斜体,我不是很喜欢。

发现还是在 _post.scss 文件下,然后修改如下:

.post blockquote p {
  font-size: 16px;
  font-style: normal;
  line-height: 1.8em;
  color: #999;
  text-align: start;
}

最后重新生成静态文件并在本地验证,没什么问题就把新修改的内容部署到 Git 上。

与博客添加评论功能及定制化样式相似的内容:

博客添加评论功能及定制化样式

哈喽大家好,我是咸鱼。(博客网址: https://xxxsalted.github.io/) 在搭建了博客并换了主题之后,发现有许多细节方面的东西还需要完善和定制化一下,比如说行距和引用的样式我不是很喜欢,以及没有评论功能。 于是决定自己动手,说干就干。 PS:下文的修改操作仅限于博客主题(Kli

彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-JWT和中间件(Middleware)的使用EP07

前文再续,上一回我们完成了用户的登录逻辑,将之前用户管理模块中添加的用户账号进行账号和密码的校验,过程中使用图形验证码强制进行人机交互,防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Token,并且通过Iris的中间件(Middleware)进行鉴权操作。 Iris模板复用 在生成Tok

基于Vue3水印组件封装:防篡改守护!

基于Vue 3的全新水印通用组件封装。这款组件不仅功能强大,而且易于集成,能够轻松为您在网页任何位置添加自定义水印,有效防止内容被篡改或盗用。

彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-登录与图形验证码(captcha)EP06

书接上回,上一回我们按照“低耦合高内聚”的组织架构方针对项目的整体结构进行了优化,本回将会继续编写业务,那就是用户的登录逻辑,将之前用户管理模块中添加的用户账号进行账号和密码的校验,校验通过后留存当前登录用户的信息,过程中使用图形验证码强制进行人机交互,防止账号的密码被暴力破解。 登录逻辑 首先在逻

CefSharp自定义缓存实现

大家好,我是沙漠尽头的狼。 上文介绍了《C#使用CefSharp内嵌网页-并给出C#与JS的交互示例》,本文介绍CefSharp的缓存实现,先来说说添加缓存的好处: 提高页面加载加速:CefSharp缓存可以缓存已经加载过的页面和资源,当用户再次访问相同的页面时,可以直接从缓存中加载,而不需要重新下

Dotnet9网站回归Blazor重构,访问速度飞快,交互也更便利了!

大家好,我是沙漠尽头的狼。 Dotnet9网站回归Blazor重构,访问速度确实飞快,同时用上Blazor的交互能力,站长也同步添加了几个在线工具,这篇文章分享下Blazor的重构过程,希望对大家网站开发时做技术选型有个参考。 ![](https://img1.dotnet9.com/2023/06

谁会拒绝一款开源的 3D 博客呢?

说到博客大家一定都不陌生,不管你是深耕职场多年的老鸟,还是在学校努力学习的小鸟,应该都有过一段“装扮”博客的经历,比如:放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。但不管再怎么“打扮”,也跳脱不出平面的“凡胎”。 今天 HelloGitHub 给大家带来的是一款开源的 3D 博客项

基于.NetCore开发博客项目 StarBlog - (27) 使用JWT保护接口

## 前言 这是StarBlog系列在2023年的第二篇更新😂 这几个月都在忙,更新变得很不勤快,但是拖着不更新我的心里更慌,很久没写,要开头就变得很难😑 说回正题,之前的文章里,我们已经把博客关键的接口都开发完成了,但还少了一个最关键的「认证授权」,少了这东西,网站就跟筛子一样,谁都可以来添加

Net6之Jwt认证+Bearer认证 2.0

以前接触过,写过博客,第二次再写有了新的体会。第一次博客:https://www.cnblogs.com/zhang-3/p/16184067.html 过程: 生成token令牌(钥匙) 添加bearer认证 (验证钥匙是否正确) 给接口或控制器添加验证 (锁) 给接口添加显示的小锁 1.引入包:

[转帖]【Redis学习06】分布式锁及其优化

文章目录 前言1. 什么是分布式锁2. 分布式锁的实现2.1 基于Redis的分布式锁实现方法2.2 基于redis实现分布式锁的初级版本2.3 改进分布式锁2.4 基于Lua脚本改善分布式锁 前言 上一篇博客我们讲到秒杀问题的一人一单在单机模式下使用synchronized添加悲观锁能解决并发问题