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

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

哈喽大家好,我是咸鱼。(博客网址: 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 上。

相关文章
|
4月前
|
开发者 C# 存储
WPF开发者必读:资源字典应用秘籍,轻松实现样式与模板共享,让你的WPF应用更上一层楼!
【8月更文挑战第31天】在WPF开发中,资源字典是一种强大的工具,用于共享样式、模板、图像等资源,提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践,并通过示例展示了如何在项目中有效利用资源字典,实现资源的重用和动态绑定。
114 0
|
4月前
|
C# 开发者 数据处理
WPF开发者必备秘籍:深度解析数据网格最佳实践,轻松玩转数据展示与编辑大揭秘!
【8月更文挑战第31天】数据网格控件是WPF应用程序中展示和编辑数据的关键组件,提供排序、筛选等功能,显著提升用户体验。本文探讨WPF中数据网格的最佳实践,通过DevExpress DataGrid示例介绍其集成方法,包括添加引用、定义数据模型及XAML配置。通过遵循数据绑定、性能优化、自定义列等最佳实践,可大幅提升数据处理效率和用户体验。
68 0
|
4月前
|
开发者 C# 存储
WPF开发者必读:样式与模板的艺术,轻松定制UI外观,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性,而模板则允许自定义控件布局与子控件,两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识,通过示例展示了如何创建并应用它们来改变按钮的外观,从而提升用户体验。
102 0
|
4月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
|
6月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
195 1
|
6月前
|
搜索推荐
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页!
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页!
109 0
|
定位技术
Echarts地图高级开发:带地级市链接的解决方案(2)
Echarts地图高级开发:带地级市链接的解决方案(2)
91 0
|
数据可视化 uml
Markdown语法-从基础到进阶
Markdown语法-从基础到进阶
246 0
CSS3第六课 在第五课的基础上扩展内容。本博客以实战为主。
CSS3第六课 在第五课的基础上扩展内容。本博客以实战为主。
100 0
CSS3第六课 在第五课的基础上扩展内容。本博客以实战为主。
|
自然语言处理 编译器 C#
【WPF】实现动态切换语言(国际化)以及动态换肤功能
以下内容,手把手从搭建到最终实现,完成多语言切换以及换装功能。
463 0
【WPF】实现动态切换语言(国际化)以及动态换肤功能