Hexo博客修改记录

 2年前     773  

文章目录

1.利用Valine添加评论留言

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

2.设置留言邮件通知

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

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

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

填写的SMTP_SERVICE 项,只能填邮件服务提供商的名称，即 QQ、163、126、Gmail、"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_SERVICE 和SMTP_HOST 、SMTP_PORT、SMTP_SECURE项不能同时存在

SMTP_SERVICE 和SMTP_HOST 、SMTP_PORT、SMTP_SECURE项不能同时存在

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

设置定时激活任务

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

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

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

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

[Hexo博客修改记录

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

添加后要记得点击启用：

Hexo博客修改记录

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

Hexo博客修改记录

绑定域名

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

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

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

Hexo博客修改记录

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

Hexo博客修改记录

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

Hexo博客修改记录

前往域名服务商添加域名解析，记录类型选择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");
  5.     if ($(window).width() > 768) {
  6.         Array.prototype.forEach.call(list, (item, index) => {
  7.             item.style.fontSize = Math.floor(Math.random() * 20 + 15) + "px"; //15 ~ 35
  8.             item.style.color =
  9.                 "rgb(" +
  10.                 Math.floor(Math.random() * 201) +
  11.                 ", " +
  12.                 Math.floor(Math.random() * 201) +
  13.                 ", " +
  14.                 Math.floor(Math.random() * 201) +
  15.                 ")"; // 0,0,0 -> 200,200,200
  16.         });
  17.     } else {
  18.         Array.prototype.forEach.call(list, (item, index) => {
  19.             item.style.fontSize = Math.floor(Math.random() * 13 + 15) + "px"; //15 ~ 28
  20.             item.style.color =
  21.                 "rgb(" +
  22.                 Math.floor(Math.random() * 201) +
  23.                 ", " +
  24.                 Math.floor(Math.random() * 201) +
  25.                 ", " +
  26.                 Math.floor(Math.random() * 201) +
  27.                 ")"; // 0,0,0 -> 200,200,200
  28.         });
  29.     }
  30. })

在主题的_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>
  16.                         <div class="md-links-des">
  17.                             <%= theme.friends[key].des %>
  18.                         </div>
  19.                         </a>
  20.                     </li>
  21.                 <% } %>
  22.             <% } %>
  23.          </ul>
  24.     </div>
  25.     <section class="post-content">
  26.         <%- page.content %>
  27.     </section>
  28. </div>
  29. </div>

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

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

  1. .md-links a {
  2.   color: #333;
  3.   text-decoration: none;
  4. }
  5. .md-links li {
  6.   width: calc(100% / 3 - 14px);
  7.   float: left;
  8.   list-style: none;
  9. }
  10. .md-links-item {
  11.   height: 90px;
  12.   line-height: 17px;
  13.   margin: 20px 7px;
  14.   padding: 0px 0px;
  15.   transition: box-shadow 0.25s;
  16.   text-overflow: ellipsis;
  17.   overflow: hidden;
  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.   position: relative;
  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.   float: left;
  30.   border-radius: 35px;
  31.   margin: 11px 10px;
  32.   width: 70px;
  33.   height: 70px;
  34.   border: 0px 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.   position: absolute;
  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.   cursor: pointer;
  79. }
  80. .md-links-title {
  81.   padding-top: 16px;
  82.   padding-right: 10px;
  83.   font-size: 20px;
  84.   font-weight: bold;
  85.   height: 40px;
  86.   overflow: hidden;
  87.   whitewhite-space: nowrap;
  88.   text-overflow: ellipsis;
  89. }
  90. .post-cards {
  91.   margin-top: 5px;
  92.   min-height: 100px;
  93.   padding: 15px;
  94.   border-radius: 15px;
  95. }
  96. .comment-word {
  97.   font-weight: bold;
  98.   font-size: 1.7em;
  99. }
  100. .md-links-des {
  101.   font-size: 13px;
  102.   overflow: hidden;
  103.   height: 50px;
  104.   whitewhite-space: nowrap;
  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. ---
  6. ### 友链申请格式
  8. * Blog 名字： 风渡馥桂
  9. * Blog 地址： https://www.fdooo.com/
  10. * Blog 头像： https://www.fdooo.com/image/avatar.jpeg
  11. * Blog 简介： 十年公共安全技术防范从业工程师

重新部署发布后生效

6.4日志尾部美化

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

6.5增加搜索

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

您可能感兴趣的

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

Hexo博客添加Valine评论并为每篇日志增加阅读量显示
2年前 997
开源28181平台、NVR、流媒体 - 风渡

开源28181平台、NVR、流媒体
4个月前 280
业余无线电B类考试技巧与题型速记 - 风渡

业余无线电B类考试技巧与题型速记
4个月前 260

Hexo博客修改记录已关闭评论

评论已关闭...
暂无评论...
热门文章
Lading...