魔改笔记之一

我会按照修改风险度进行书写,⭐代表仅修改css js文件,⭐⭐代表涉及pug,⭐⭐⭐代表大体量。

魔改有风险,需!备份！

⭐生成文章唯一链接

预览

Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文，复制后的URL路径就是把中文变成了一大堆字符串编码，如果你在其他地方用这边文章的url链接，偶然你又修改了改文章的标题，那这个URL链接就会失效。为了给每一篇文章来上一个属于自己的链接，写下此教程，利用 hexo-abbrlink 插件，A Hexo plugin to generate static post link based on post titles ,来解决这个问题。 参考github官方： hexo-abbrlink 按照此教程配置完之后如下：

安装插件，在博客根目录 [BlogRoot] 下打开终端，运行以下指令：

bash
npm install hexo-abbrlink --save

##插件安装成功后，在根目录 [Blogroot]的配置文件 _config.yml找到 permalink：

diff
# permalink: :year/:month/:day/:title/
- permalink: :year/:month/:day/:title/

+ permalink: post/:abbrlink.html
+ abbrlink:
+   alg: crc32
+   rep: hex

执行 hexo 三连

bash
# git bash
hexo cl && hexo g && hexo s
# vscode
hexo cl; hexo g; hexo s

每次执行三连后，文章会自动获取唯一链接

⭐页面样式调节

这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。

复制以下代码进去自定义的 custom.css 文件

css
/*---------------- 页面样式调节---------------------- */
  :root {
    --trans-light: rgba(255, 255, 255, 0.88);
    --trans-dark: rgba(25, 25, 25, 0.88);
    --border-style: 1px solid rgb(169, 169, 169);
    --backdrop-filter: blur(5px) saturate(150%);
  }
  
  /* 首页文章卡片 */
  #recent-posts > .recent-post-item {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border-radius: 25px;
    border: var(--border-style);
  }
  
  /* 首页侧栏卡片 */
  #aside-content .card-widget {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border-radius: 18px;
    border: var(--border-style);
  }
  
  /* 文章页、归档页、普通页面 */
  div#post,
  div#page,
  div#archive {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border: var(--border-style);
    border-radius: 20px;
  }
  
  /* 导航栏 */
  #page-header.nav-fixed #nav {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: var(--backdrop-filter);
  }
  
  [data-theme="dark"] #page-header.nav-fixed #nav {
    background: rgba(0, 0, 0, 0.7) !important;
  }
  
  /* 夜间模式遮罩 */
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] div#post,
  [data-theme="dark"] div#archive,
  [data-theme="dark"] div#page {
    background: var(--trans-dark);
  }
  /*---------------- 页面样式调节---------------------- */

参数说明：

–trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；
–trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;
–border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;
–backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;

记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件：

diff
inject: 
  head: 
+    - <link rel="stylesheet" href="/css/custom.css">

重启项目即可看见效果