信笺样式留言板
效果:
魔改步骤 在[Blogroot]运行指令
npm install hexo-butterfly-envelope --save
在站点配置文件或者主题配置文件添加配置项(对,两者任一均可。但不要都写)
# envelope_comment# see https://akilar.top/posts/58900a8/envelope_comment: enable: true #开关 cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图 message: #信笺内容,支持多行 - 有什么想问的? - 有什么想说的? - 有什么想吐槽的? - 哪怕是有什么想吃的,都可以告诉我哦~ bottom: 自动书记人偶竭诚为您服务! #信笺结束语,只能单行 height: #调整信笺划出高度,默认1050px path: #【可选】comments 的路径名称。默认为 comments,生成的页面为 comments/index.html f ...
Twikoo 评论
CloudBase 配置 首先进入到云开发 CloudBase,找到咱们的免费试用版,如下
然后就是创建环境,选择空模板
环境信息填写如下
地域最好选择上海,如果选择广州的话,需要在 twikoo.init() 时额外指定环境 region: "ap-guangzhou"环境名称无所谓,符合要求即可套餐版本选择免费版就够用的了,然后下一步,立即购买
购买完成之后即可进入控制台
来到环境 - 登录授权,开启匿名登录
然后来到安全配置中,将自己的网站域名添加到 web安全域名
下一步是新建云函数
并且填写以下内容
把函数代码 , 替换为 exports.main = require('twikoo-func').main
确定之后,点击刚才创建的云函数 twikoo 中,找到函数代码 -> 文件 -> 新建文件
命名为 package.json,按下回车,并且复制以下代码 { "dependencies": { "twikoo- ...
hexo看板娘
看板娘的使用效果:
下载 live2D live2D文件先在github 上将文件压缩包下载下来,然后解压,放置在目录 博客根目录/themes/butterfly/source/ 中(我这里是把文件夹名改live2d-widget)
更改 autoload.js 文件 更改 live2d-widget 下的 autoload.js 文件,其实只需要将第二行注释掉,取消第三行的注释即可
// 注意:live2d_path 参数应使用绝对路径// const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";const live2d_path = "/live2d-widget/";
添加资源文件 在 博客根目录的主题配置文件 _config.butterfly.yml 中找到 inject 并修改,引入 css 文件和 js 文件即可
inject: head: # - <link rel="stylesh ...
hexo 电子时钟插件
前言: 效果如下:
NPM 插件安装的部署方法:npm install hexo-butterfly-clock --save
添加配置信息在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加
# electric_clock# see https://akilar.top/posts/4e39cf4a/electric_clock: enable: true # 开关 priority: 5 #过滤器优先权 enable_page: all # 应用页面 exclude: # - /posts/ # - /about/ layout: # 挂载容器类型 type: class name: sticky_layout index: 0 loading: /img/loading.gif #加载动画自定义
参数释义
参数
备选值/类型
释义
priority
number
【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable
true/false
【必选】 ...
butterfly主题魔改样式
说明引入魔改样式的方法很简单,自建一个css文件,然后引入即可。以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件,然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
inject: head: - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
接下来的魔改内容,如果没有特别声明,都默认是写入custom.css中。
鼠标指针样式替换鼠标指针的样式替换原理其实就是重设对应版块的cursor属性,在这之前我们需要准备好相应的.cur文件,即静态鼠标指针图标。(目前还不支持.ani后缀的动态鼠标指针图标)。可以从一些美化网站找到鼠标指针图标。例如店长就是在一个Windows美化网站 ...
butterfly主题设置
准备工作 首先是下载 butterfly 主题,在博客根目录下
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
如果出现克隆失败,把上面的 https 改成 git 即可,克隆完成之后根目录下的 /themes 中就会出现 butterfly 的主题文件夹,然后要把博客根目录下的_config.yml 中的 theme 属性改成 butterfly, 注意要有一个空格缩进,改完之后:
hexo cleanhexo ghexo s
在本地打开主题,这里很容易出现一大串数字没有界面这种情况需要安装 pug 以及 stylus 的渲染器,回到博客根目录下输入;
npm install hexo-renderer-pug hexo-renderer-stylus --save
安装完成之后再次重复上面的那三个操作,启动成功
这里强烈建议把主题下面的配置文件放到根目录下面,即把 /themes/butterfly 下的_config.yml ...