Hexo文章页面透明效果
前言 {#前言} ======== 在不妨碍正常阅读的情况下想更好地展示背景或者一些效果,实现文章页透明是一种不错的选择。 操作步骤 {#操作步骤} ============ 在`\themes\butterfly\source\css`路径下创建一个xxx.css文件,在文件中添加如下代码: |---------------------------|---------...
前言 {#前言} ======== 在不妨碍正常阅读的情况下想更好地展示背景或者一些效果,实现文章页透明是一种不错的选择。 操作步骤 {#操作步骤} ============ 在`\themes\butterfly\source\css`路径下创建一个xxx.css文件,在文件中添加如下代码: |---------------------------|---------...
前言 {#前言} ======== 本文将介绍如何增添上升气泡效果。 操作 {#操作} ======== 找到主题配置文件`_config.butterfly.yml`,在`inject`的bottom处引入以下文件: |-----------------|---------------------------------------------------------...
前言 {#前言} ======== 效果如本站所示,我看过一些博客,有很多一部分都有这个动线效果背景。 操作 {#操作} ======== 操作步骤很简单,只需在`_config.butterfly.yml`文件中,找到inject,在bottom处直接引入:`https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest...
前言 {#前言} ======== 本文将介绍如何美化页脚,效果展示在最底部。 操作 {#操作} ======== 在`\themes\butterfly\source\js`目录下创建一个js文件,将如下代码写入该文件: |-------------------------------------------------------------------------...
前言 {#前言} ======== 本文将介绍如何增添水波荡漾效果。 操作 {#操作} ======== 在`\themes\butterfly\source\js`目录下创建一个`ripples.js`文件,并将如下代码写入该文件 |---------------------------------|----------------------------------...
前言 {#前言} ======== 本文将介绍如何在侧边栏增添头像卡片动态背景。 操作 {#操作} ======== 在`\themes\butterfly\source\css`目录下创建一个css文件,将如下代码写入该文件(有两种效果,选其一): |---------------------------|-------------------------------...
前言 {#前言} ======== 本文将介绍Hexo增加雪花动态背景效果。 操作 {#操作} ======== 操作过程很简单,找到主题配置文件`_config.butterfly.yml`,在inject的bottom引入以下js文件: |---------------------|------------------------------------------...
前言 {#前言} ======== Hexo博客的Sakura主题自带的樱花🌸动态效果非常漂亮,本文来介绍Hexo增加樱花动态背景效果。 操作 {#操作} ======== 只需在`_config.butterfly.yml`文件中,找到inject,在bottom处直接引入:`https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/sa...
操作步骤 {#操作步骤} ============ 在butterfly主题目录`/layout/includes`文件夹下新建一个`right-menu`的文件夹,在此文件夹下新建一个`index.pug`文件。 将以下代码复制到`index.pug`文件中。 |-----------------------------------------------------...
引言 {#引言} ======== 如果想实现随便逛逛的功能,就需要用到`hexo-generator-random`这个插件。 插件源码访问地址:<https://github.com/Drew233/hexo-generator-random/> 插件说明 {#插件说明} ============ `hexo-generator-random`是一款he...