首页 » Note » 技术 » Hexo博客修改记录

Hexo博客修改记录

2021-11-23 技术 152

1.利用Valine添加评论留言

详见Hexo博客添加Valine评论并为每篇日志增加阅读量显示

2.设置留言邮件通知

目前Valine自带的邮件提醒功能已经下线,邮件通知需要使用第三方插件Valine-Admin (by @zhaojun1998)

在确认Valine自带功能正常,按照插件的安装说明进行安装即可。

特别注意,在按照说明配置云引擎环境变量时,

填写的SMTP_SERVICE 项,只能填邮件服务提供商的名称,即 QQ163126Gmail"Yahoo"...... 字样,千万不要填写成smtp邮件地址,全部支持请参考 : Nodemailer Supported services

SMTP_SERVICE 中没有你使用的邮件服务提供商, 也可以进行自定义。

则参数配置如下:

  • SMTP_HOST : 邮件服务提供商 SMTP 地址,如 qq : smtp.qq.com此项需要自行查询或询问其服务商
  • SMTP_PORT : 邮件服务提供商 SMTP 端口, 此项需要自行查询或询问其服务商
  • SMTP_SECURE : 是否启用加密, 默认为 true,一般不需要设置,如有特殊请自行配置。 此项需要自行查询或询问其服务商

注: 配置自定义邮件服务器的话,请不要同时配置 SMTP_SERVICE。当 SMTP_SERVICE 未配置时才会启用自定义邮件服务

SMTP_SERVICESMTP_HOSTSMTP_PORTSMTP_SECURE项不能同时存在

SMTP_SERVICESMTP_HOSTSMTP_PORTSMTP_SECURE项不能同时存在

3.处理LeanCloud免费版休眠问题

设置定时激活任务

第三方插件Valine-Admin 使用的LeanCloud免费版容器有强制性休眠策略的,不能 24 小时运行:

  • 每天必须休眠 6 个小时
  • 30 分钟内没有外部请求,则休眠。
  • 休眠后如果有新的外部请求实例则马上启动(但激活时此次发送邮件会失败)。

分析了一下上方的策略,如果不想付费的话,最佳使用方案就设置定时器,每天 7 - 23 点每 20 分钟访问一次,这样可以保持每天的绝大多数时间邮件服务是正常的。

点击云引擎 - 定时任务,新增定时器,按照图片上填写:

[img

注意, LeanCloud 最近更新了定时器校验规则, 需要将 Cron 表达式写为: 0 */20 7-23 * * ? !!!

添加后要记得点击启用

img

启用成功后,每 20 分钟在云引擎的 - 应用日志中可以看到提示:

img

绑定域名

但上述自动激活,不定期会出现如下报错,导致无法激活

CloudQueue 运行失败 50dfc756-16b4-4de4-94e5-cb450920003e: self_wake !! {“error”:”因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠 “}

因此还需要采用其他方法保持激活,首先需要绑定域名,在云引擎、ClientEngine 域名菜单下,点击绑定新域名

image-20210714110505447

再下图绑定一个自己的二级域名

image-20210714110630106

点击绑定之后,LeanCloud会自动审核你的备案信息,备案审核完成之后会让你添加域名解析,复制CNAME后面黄色方框内的这一串内容

image-20210714110952757

前往域名服务商添加域名解析,记录类型选择CNAME,主机记录中填入xxx,这里的xxx指的就是二级域名xxx.example.com中的xxx,解析线路默认即可,将刚刚复制的那一串记录值填入记录值栏

定时激活容器,并解决LeanCloud流控问题

  • 按照LXXX_XXX的方案1,利用阿里云的云监控发起请求防止LeanCloud中实例睡眠,然而阿里云的云监控也不是白嫖的…云监控设置的任务最多只能存活一个月,也就是说,每隔一个月都要去重新创建一个任务唤醒LeanCloud实例,还是有点麻烦的。

【解决LeanCloud流控问题(因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠)】

  • 上述方案由于存在两个问题:
    1. 阿里云的云监控免费版本的告警任务只有一个月的有效期,所以理论上每隔一个月都要重新设置告警任务,非常繁琐
    2. 利用该阿里云的云监控,只能24小时进行监控,但是LeanCloud的实例一天只能运行16小时,也就是与之前设置的 0 */20 7-23 * * ?时间冲突了,原本计划是7:00-23:59每隔20分钟,但是阿里云的云监控是24小时间隔相应指定时间的,也就是0:00-23:59每隔x分钟(x取5,15,20,30…)

于是作者又提供了新的方法(续)解决LeanCloud问题(云引擎体验实例已达到最大启动时长限制,进入强制休眠状态),利用阿里云的分布式调度平台 SchedulerX功能,在7-23点间持续访问绑定的LeanCloud域名,使容器保持活跃,在访客稀少的夜间让容器休眠,这是目前最为为完美的免费解决方案,如果访客流量较大,也可以升级LeanCloud付费版。

4.博客右下角增加一只猫

参考把猫养在博客 - hexo美化 live2d右下角添加猫咪 改模Hexo-如何养一只看板娘(博客宠物)

使用的是hexo-helper-live2d插件,目前有多种模型,不同的模型可以在原作者网站预览

5.文章自定义永久链接

其实就是使用abbrlink插件,我选择了crc16 & hex算法,下面这篇文章已经很详细,不再叙述;

Hexo文章自定义生成永久链接

6.其他Chic主题修改

6.1界面中文化

对下列页面进行修改

  1. themes\Chic\layout\_page\post.ejs       #文章页
  2. themes\Chic\layout\_page\category.ejs   #子分类页
  3. themes\Chic\layout\category.ejs         #分类页
  4. themes\Chic\layout\_page\tag.ejs        #子标签页
  5. themes\Chic\layout\tag.ejs              #标签页
  6. themes\Chic\layout\_partial\header.ejs  #手机显示,menu
  7. themes\Chic\layout\_partial\toc.ejs     #文章导航栏

6.2增加博客年份

footer.ejs文件中的标签内添加配置:

  1. <%if (theme.since_year && theme.since_year < date(new Date(), "YYYY")) {%><%- theme.since_year %> - <%}%><%- date(new Date(), "YYYY") %>

在主题的_config.yml中引入

  1. # 版权起始年份
  2. since_year: 2018

方法来源于YuanLiChenAi’s Blog

6.3标签页面增加标签大小颜色随机变化

方法来源于LarsCheng

在Chic主题source/js下增加codecopy.js,代码如下

  1. $(function () {
  2.     // tags 隨機大小 顔色
  3.     var list = document.querySelectorAll(".tag-cloud-tags a");
  4.     if ($(window).width() > 768) {
  5.         Array.prototype.forEach.call(list, (item, index) => {
  6.             item.style.fontSize = Math.floor(Math.random() * 20 + 15) + "px"//15 ~ 35
  7.             item.style.color =
  8.                 "rgb(" +
  9.                 Math.floor(Math.random() * 201) +
  10.                 ", " +
  11.                 Math.floor(Math.random() * 201) +
  12.                 ", " +
  13.                 Math.floor(Math.random() * 201) +
  14.                 ")"// 0,0,0 -> 200,200,200
  15.         });
  16.     } else {
  17.         Array.prototype.forEach.call(list, (item, index) => {
  18.             item.style.fontSize = Math.floor(Math.random() * 13 + 15) + "px"//15 ~ 28
  19.             item.style.color =
  20.                 "rgb(" +
  21.                 Math.floor(Math.random() * 201) +
  22.                 ", " +
  23.                 Math.floor(Math.random() * 201) +
  24.                 ", " +
  25.                 Math.floor(Math.random() * 201) +
  26.                 ")"// 0,0,0 -> 200,200,200
  27.         });
  28.     }
  29. })

在主题的_config.yml中引入

  1. scripts:
  2.   - https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
  3.   - /js/codecopy.js

6.5 增加友情链接页面

在主题的layout目录下增加friends.ejs:

  1. <%- partial('_page/friends', {pagination: config.friends, index: true}) %>

在主题的layout/_page目录下增加friends.ejs:

  1. <%# single friends page%>
  2. <div class="container">
  3.     <div class="post-wrap friends">
  4.         <h2 class="post-title">-&nbsp;友情链接&nbsp;&nbsp;<%-page.category%>-</h2>
  5.     <div class="post-cards">
  6.         <ul class="md-links">
  7.             <% if (theme.friends !== undefined) { %>
  8.                 <% for (var key in theme.friends){ %>
  9.                     <li class="md-links-item">
  10.                         <a href="<%= theme.friends[key].url %>" title="<%= theme.friends[key].name %>"  target="_blank">
  11.                         <img src="<%= theme.friends[key].image %>" onerror=src='/images/404img.jpg'>
  12.                         <div class="md-links-title">
  13.                             <%= theme.friends[key].name %>
  14.                         </div>
  15.                         <div class="md-links-des">
  16.                             <%= theme.friends[key].des %>
  17.                         </div>
  18.                         </a>
  19.                     </li>
  20.                 <% } %>
  21.             <% } %>
  22.          </ul>
  23.     </div>
  24.     <section class="post-content">
  25.         <%- page.content %>
  26.     </section>
  27. </div>
  28. </div>

在hexo/source中images文件夹下增加一张404img.jpg图片

在主题的souurce/css的custom.styl中增加

  1. .md-links a {
  2.   color#333;
  3.   text-decorationnone;
  4. }
  5. .md-links li {
  6.   width: calc(100% / 3 - 14px);
  7.   floatleft;
  8.   list-stylenone;
  9. }
  10. .md-links-item {
  11.   height90px;
  12.   line-height17px;
  13.   margin20px 7px;
  14.   padding0px 0px;
  15.   transition: box-shadow 0.25s;
  16.   text-overflow: ellipsis;
  17.   overflowhidden;
  18.   border-radius: 8px;
  19.   -webkit-transform: perspective(1px) translateZ(0);
  20.   transform: perspective(1px) translateZ(0);
  21.   box-shadow: 0 0 1px rgba(0,0,0,0);
  22.   positionrelative;
  23.   -webkit-transition-property: color;
  24.   transition-property: color;
  25.   -webkit-transition-duration: 0.3s;
  26.   transition-duration: 0.3s;
  27. }
  28. .md-links-item img {
  29.   floatleft;
  30.   border-radius: 35px;
  31.   margin11px 10px;
  32.   width70px;
  33.   height70px;
  34.   border0px solid #eaeefb;
  35.   -webkit-transition: all 0.2s;
  36.   -moz-transition: all 0.2s;
  37.   -o-transition: all 0.2s;
  38.   -ms-transition: all 0.2s;
  39.   transition: all 0.2s;
  40. }
  41. .md-links-item:hover img {
  42.   filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
  43.   -moz-transform: rotate(540deg);
  44.   -o-transform: rotate(540deg);
  45.   -webkit-transform: rotate(540deg);
  46.   transform: rotate(540deg);
  47. }
  48. .md-links-item:before {
  49.   content"";
  50.   positionabsolute;
  51.   z-index: -1;
  52.   top: 0;
  53.   left: 0;
  54.   rightright: 0;
  55.   bottombottom: 0;
  56.   background#0d95e8 !important;
  57.   -webkit-transform: scale(0);
  58.   transform: scale(0);
  59.   -webkit-transition-property: transform;
  60.   transition-property: transform;
  61.   -webkit-transition-duration: 0.3s;
  62.   transition-duration: 0.3s;
  63.   -webkit-transition-timing-function: ease-out;
  64.   transition-timing-function: ease-out;
  65. }
  66. .md-links-item:hover,
  67. .md-links-item:focus,
  68. .md-links-item:active {
  69.   color#fff;
  70. }
  71. .md-links-item:hover:before,
  72. .md-links-item:focus:before,
  73. .md-links-item:active:before {
  74.   -webkit-transform: scale(1);
  75.   transform: scale(1);
  76. }
  77. .md-links-item a:hover {
  78.   cursorpointer;
  79. }
  80. .md-links-title {
  81.   padding-top16px;
  82.   padding-right10px;
  83.   font-size20px;
  84.   font-weightbold;
  85.   height40px;
  86.   overflowhidden;
  87.   whitewhite-spacenowrap;
  88.   text-overflow: ellipsis;
  89. }
  90. .post-cards {
  91.   margin-top5px;
  92.   min-height100px;
  93.   padding15px;
  94.   border-radius: 15px;
  95. }
  96. .comment-word {
  97.   font-weightbold;
  98.   font-size: 1.7em;
  99. }
  100. .md-links-des {
  101.   font-size13px;
  102.   overflowhidden;
  103.   height50px;
  104.   whitewhite-spacenowrap;
  105.   text-overflow: ellip

在主题的_config.yml中引入

  1. # Friends
  2. ##
  3. friends:
  4.   1:
  5.     name: 十年之约
  6.     url: https://www.foreverblog.cn/
  7.     image: https://images.fdooo.com/images/a1.jpg
  8.     des: 十年之约是一个记录、展示独立博客的平台
  9.   2:
  10.     name: 穿梭虫洞
  11.     url: https://www.foreverblog.cn/go.html
  12.     image: https://images.fdooo.com/images/a2.jpg
  13.     des: 随机访问十年之约友链博客
  14.   3:
  15.     name: 网金事件簿
  16.     url: http://www.jy2001.net/
  17.     image: https://www.jy2001.net/wp-content/uploads/2019/09/cropped-3144d888f4885f.jpg
  18.     des: 永远的金庸群侠
  19. friends_length: 3

在hexo中新建friends页面,,编辑 friends下的index.md

  1. ---
  2. title: 友情链接
  3. layout: friends
  4. ---
  5. ### 友链申请格式
  6. * Blog 名字: 风渡馥桂
  7. * Blog 地址: https://www.fdooo.com/
  8. * Blog 头像: https://www.fdooo.com/image/avatar.jpeg
  9. * Blog 简介: 十年公共安全技术防范从业工程师

重新部署发布后生效

6.4日志尾部美化

参(抄)考(袭)LarsCheng文章日志的样式进行修改

6.5增加搜索

类似Hexo自定义案例增加搜索

发布评论