主题优化（持续更新）

这篇文章是主题优化的记录，将会持续更新。（主要记录改动哪个文件以备后用，从各处搜刮来的代码，就暂不附上了）

20210302

今天尝试了更多的东西，也遇到了一些麻烦，目前姑且做出了比较满意的效果。记录一下今天添加的改动。

网页icon

找参考画了狗屋的图片，设置为透明背景的png（第一次弄错成jpg了会有白底…）,图像尽量充满画布，在网上进行png→icon的转换，保存到主题/source/images下，在主题配置文件中favicon部分修改成制作好的icon的名字即可。

网页背景图片、文章阴影、博客内容透明化等

均在blog/source/_data下的styles.styl中进行，将代码添加进去修改调整即可。还没有完全弄懂这几个应该怎么调整…

圆角设置

在variables.styl中添加相应代码，在主题配置文件中取消variables.styl的注释即可。

页脚的网站建立时间记录

在next/layout/_particals下的footer.swig中加入相应代码，修改时间为建站时间（”月月/日日/年年年年 xx:xx:xx”）。也有在data文件夹下新建footer.swig的方法，最后两种都改了，不知道是哪种在起作用…

这一步的时候遇到了一些问题，在hexo g的时候总是报错，然后在hexo s时出现

template render error: (d:\blog\themes\next\layout\inject\footer\custom.swig) [line 60, column 15]

一类的错误提示，后面整来整去不知道怎么回事最后终于可以正常显示了…

调整文字大小

在主题/source/css/_variables下的base.styl中修改// Font size，大致弄得比较舒服了。

添加了点击查看图片的插件

直接下载插件即可。（这里因为内容页面设置了整体的透明度<1，所以在显示图片的时候会有背景透出来，或者该说是整张图片的颜色变淡？或许还是调回1比较好呢…）

---

鼠标特效、打字特效、动态背景等等没有尝试，或许以后心血来潮会弄一下吧…

还想要改进的地方：圆角设置之后菜单栏背后还是会有方形框，不知道是什么原因造成的…

20210303更新

背景透明化

将之前弄的干掉了。重新设置了在主题/source/css/相应scheme下的index.styl中修改background 的数据，可以调整背景透明度（虽然由于跟教程上的操作不太一样，我好像没有看到什么效果？）。

友情链接

新增links的page，在根目录/source/links下的index.md中添加代码，然后在styles.styl中添加个性化设置的代码（调整各种颜色，头像旋转等），在_data下新建links.yml文件，添加友链的具体内容（name, avatar, site, info ），最后在主题配置文件中menu下增加Friend links即可。

参考Geniucker的文章，感谢。

valine评论功能

1、注册Leancloud账号，一系列设置

2、在主题配置文件中comments下active: 设置为valine，在valine栏下打开，填入appid、appkey，进行具体设置（读取qq信息的功能暂未开启）。

测试了一下可以正常使用。

参考Vince的文章，感谢。

20210314更新

解决了搜索功能无法使用的错误

似乎是之前没有下载搜索插件导致的错误。。

直接在命令窗口blog文件夹下运行：

cnpm install hexo-generator-searchdb --save

即可

20210317更新

添加了背景音乐

参考gman344的文章，感谢分享。

使用了网易云的外链音乐插件。打开网易云网页版，分享歌单到动态（歌单中不可以含有有版权问题的歌曲），然后可以看到生成外链的按键，复制代码，在主题/layout/_macro/sidebar.swig下找到sidebar-inner，将复制的代码粘贴到相应位置，调整一下大小即可。

暂时关闭了valine评论系统

这两天一直在搞valine，搞得焦头烂额，最后还是没有解决问题。。大概的经过是：我想要添加评论的邮件通知功能，查了下发现需要leancloud绑域名才可以后台管理，然后整了半天也没成功，后来发现我想要的可以查看和删除评论的功能其实在leancloud上的数据库里直接可以办到，，然后弄了弄邮件提醒，也发送成功了（我和评论的人都可以收到通知），但是新的问题是评论的统计数（大概这个是根本的问题），在昨天和今天新发送的评论没有办法被计入评论数，有时候会在不对应的文章底部显示，盖掉原本的评论，没有数量提示这点是关键问题。。非常苦恼。。终于下定决心重新从零开始配置一个国际版leancloud，然后基本上原样复制了之后发现根本没办法发送评论，在home页面也不会显示每篇文章的评论数（只有气泡和valine字样，但是没有：，后面也没有数字）该说是评论区的按钮都没有用。（只有valine的链接可以打开）感到很烦躁。最后又改回了最初的版本，发现还是没有办法显示评论数，非常苦恼。。。

这几天查了相当多的教程，还没有发现完全符合我出现的bug的解决方案，常常是打开了十几二十个标签，回来不知道自己在看哪一篇教程。。。

一些可能存在的错误/疑问：

• appId 和 appKey 是否要改成 app_id 和 app_key？
• appid中，-后的字符是否要删掉？
• leancloud中设置的安全域名，最后是否要删掉/？
• Valine.min.js是下载到本地还是直接调用源库？
• …

本来想尝试一下别的评论系统，查了一下好像都没有邮件通知功能，有点遗憾。

之前的评论有在leancloud上保存，我也下载到本地了，感谢大家的评论，就算之后不再开启评论功能我也会好好保存的（鞠躬）。

也许将来的某一天当我能够顺利驯服valine之后再开启评论功能。

20210322更新

重启了valine评论系统

之前调试了好久都没办法正常工作，看到麻醉桑说pjax（在使音乐全局播放的功能中使用了）和一些插件不兼容，想起来自己检查网页的时候好像也有看到类似的错误，试着关掉了之后，valine他又可以用了…弄了好几天，结果没有找到正确问题…也算吃一堑张吧，不好好使用网页检查不行啊…

然后是leancloud自动唤醒失败的问题，看到有用第三方进行访问唤醒的教程，等更加有空闲的时候再试试看吧，现在姑且想起来的时候去看看有没有新评论就行（姑且…）

增加了valine评论框中的图片

代码加在了source/_data下的styles.styl里。开始弄了本地路径的图片不行，上传到图床之后可以显示出来了（感谢U桑的帮助）。

第一次使用图床，感觉蛮方便的！有空多试几种看看。

20230531更新

重新弄了下友链

增加新的友链本来想着加在之前的links.yml上就好了，没想到不太对劲。翻了之前的记录发现参考的那个博客已经打不开了（老兄你怎么了啊——

于是重新打开久远的博客参考资料夹换了一位参考，好在跟之前的差不多，没有太多要修改的地方。谢谢两年前有稍微做记录的自己（合十

主要参考的资料：自定义友链界面参考

1）之前搭的时候为了方便装修把个性化内容全放在source/_data/next.yml里面，配置文件的修改都在这里面进行。新建links页面之前已经有，在source/links/index.md里面头部加入type: “links”。

2）配置文件menu里面加

links: /links/ || fa fa-link #只是link的话没有那个锁链小图标

3）友链页面设置：在 /themes/next/layout/ 新建 links.swig，在page.swig里面引入新建的links.swig.

4）配置友链信息：直接在配置文件末尾按照格式添加，多个直接加在后面就可以。

勉强维持狗窝运作！

20240604更新

添加了简陋的制品页面

首先在根目录底下：

hexo new page "product"

然后去修改主题的配置文件，隐约记得我之前把配置文件换了个位置，没在next文件夹下面了，但是没好好翻记录还是在主题的config.yml里面捣鼓了好久，放弃了第二天来弄，一看之前的记录原来已经搬到source/_data/next.yml里面了orz，menu下面加一行页面就好了：

Digital product: /product/ || fa fa-coffee
# 后面的fa是选图标，在https://fontawesome.com/v5/search找找喜欢的图标名称添加即可

顺便修改了代码块的风格

也是在source/_data/next.yml下面修改：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: default

p.s. 上一次修缮一年前了orz，有人说年初的时候想重新装修一下结果没动一点（）

20241017更新 - 添加说说页面

使用Artitalk，主要参考官方使用文档，颜色调整参考了这篇文章。

首先按照官方文档设置leancloud应用。（说说的class名称就设成shuoshuo，其他的无法识别成功）

然后新建页面：

hexo new page words

然后去编辑source/words/index.md

最后内容如下：

---
title: Words
date: 2024-10-17 14:28:55
comments: false
type: artitalk
---

<!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
  appId: 'V3YAs9IkpM3upbvnpFjkyGZc-MdYXbMMI', // Your LeanCloud appId
  appKey: 'yQKwlBuWrrdUF0TF5mMOziSh',// Your LeanCloud appKey
  atComment: 0,
  color1: '#717171',
  color2: '#393939',
  color3: '#ffffff'
  })
</script>

appId和appKey必填，其他配置选项可选。要注意的是配置的选项之间记得加逗号orz

然后去source/_data/next.yml里面在main下面新增这一行，让新页面显示，图标选了鸦鸦

Words: /words/ || fa fa-crow

完毕。