首页 > 其他分享 >博客添加评论功能及定制化样式

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

时间:2024-04-28 18:55:42浏览次数:16  
标签:文件 样式 博客 partials 评论 定制 post

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

标签:文件,样式,博客,partials,评论,定制,post
From: https://www.cnblogs.com/edisonfish/p/18164319

相关文章

  • 样式
    </head><divclass="timertab-item"><divclass="mainhidden"><divclass="content"style="width:1800px"><divclass="item"><h5>......
  • 博客园-鼠标-粒子追踪-点击烟花爆炸特效
    1.打开设置中的js功能2.代码保存为xx.js"usestrict";var_createClass=function(){functionn(t,e){for(vari=0;i<e.length;i++){varn=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"inn&&(n.writable=!0),Object.defineProperty(t,n......
  • 加速博客体验:静态资源优化技巧大揭秘!
    如今有许多人涉足博客写作,其中大多数正处于博客创作的旅程中。每位程序员都梦想拥有自己的服务器,理想情况下,服务器配置越高越好,价格越实惠越好。购买一台基础款服务器用于建立博客是一个不错的选择,因为并不需要处理大流量。这完全是出于个人兴趣和坚持写作的良好习惯。当然了写博......
  • 第一篇Scrum冲刺博客--原班人马打造队
    0项目地址点此进入1第一次开会/任务认领1.1第一次例会(2024.4.27)第一次开会照片记录1.2开发认领在查看老师在实验报告中学长的博客给了我一定的启发,我在腾讯表格中创建了几个表格,其中一个表格是对于各部分任务的认领。腾讯表格在线地址使用在线表格主要优点就是,在某......
  • 博客园美化
    1.申请JS权限主题选择SippleMemory2.修改配置在博客侧边栏公告处添加以下代码<scripttype="text/javascript">window.cnblogsConfig={info:{name:"你干嘛哎哟",//用户名avatar:"http://xxx.xx.xx",//用户......
  • 又重新搭了个个人博客
    哈喽大家好,我是咸鱼。前段时间看到一个学弟写了篇用Hexo搭建博客的教程,心中沉寂已久的激情重新被点燃起来。(以前搞过一个个人网站,但是因为种种原因最后不了了之)于是花了一天时间参考教程搭了个博客网站,我的博客网址是:https://xxxsalted.github.io/下面是相关教程。环境准......
  • OpenWrt软件包各主题样式预览
     Openwrt软件包主题 luci-theme-alpha 登录界面:  主界面: luci-theme-Argon登录界面:主界面: luci-theme-Bootstrap登录界面:主界面: luci-theme-Bootstrap_mmdvm登录界面:主界面:  luci-theme-Design登录界面: 主界面: luci-theme-Edge......
  • 模拟集成电路设计系列博客——6.1.2 折叠电阻串DAC
    6.1.2折叠电阻串DAC为了减少数字解码的数量以及大的容性负载,可以使用折叠电阻串D/A,如下图所示[Abrial,1988]:这种方式使得解码非常类似于数字存储器,从而减少了总的解码区域。在上图中的4-bit例子中,为了转换数字码,高2比特{b1,b2}决定了需要选中的单个字线(其他的保持为低)。一个字......
  • 模拟集成电路设计系列博客——6.1.1 电阻串DAC
    6.1.1电阻串DAC最直接的实现\(N-bit\)D/A转换器的方式是产生\(2^N\)个参考信号,并根据数字输入码,将合适的信号传递到输出。我们将这种D/A转换器成为基于解码器的转换器。最早的8-bit集成MOSD/A转换器是基于通过一个开关网络选择一部分分段电阻串[Hamade,1978]。开关网络连接在......
  • css设置竖向滚动条样式
    divId为div标签的id,内容过多,会出现竖向滚动条。<divid="divId">xxx</div>设置滚动条样式:/*设置滚动条的样式*/#divId::-webkit-scrollbar{width:10px;box-sizing:border-box;}/*滚动条滑块*/#divId::-webkit-scrollbar-thumb{height:5px;......