竹山一叶

前言本文将介绍如何在侧边栏增添头像卡片动态背景。 操作在\themes\butterfly\source\css目录下创建一个css文件，将如下代码写入该文件（有两种效果，选其一）: 123456789/* 效果一：彩带 */.card-info-avatar:hover { background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/H3342af90d24b4d62b9bbfec9688ccc25M.gif);}/* 效果二：花 */.card-info-avatar:hover { background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/20200530181856.gif);} 找到主题配置文件_config.butterfly.yml，在inject的head处引入该css文件： 123inject: head: - <link...

前言本文将介绍如何增添水波荡漾效果。 操作在\themes\butterfly\source\js目录下创建一个ripples.js文件，并将如下代码写入该文件 1234567891011$(document).ready(function () { try { $("#page-header").ripples({ resolution: 512, dropRadius: 10, //px perturbance: 0.04, }); } catch (e) { $(".error").show().text(e); }}); 找到主题配置文件_config.butterfly.yml，在inject的bottom处引入以下文件: 开启 pjax123456inject: head: bottom: - <script defer...

前言本文将介绍如何美化页脚，效果展示在最底部。 操作在\themes\butterfly\source\js目录下创建一个js文件，将如下代码写入该文件: 12345678910111213141516171819202122232425262728// 动态心跳$(document).ready(function(e) { $('.copyright').html('©2021 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 竹山一叶');})$(document).ready(function(e) { show_date_time();})//本站运行时间function show_date_time()...

前言效果如本站所示，我看过一些博客，有很多一部分都有这个动线效果背景。 操作操作步骤很简单，只需在_config.butterfly.yml文件中，找到inject，在bottom处直接引入：https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js 1- <script src="https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script> # 背景动态线条 或者直接修改_config.butterfly.yml配置文件中的canvas_nest配置 123456789# canvas_nest# https://github.com/hustcc/canvas-nest.jscanvas_nest: enable: true color: '0,0,255' #color of lines, default: '0,0,0';...

前言本文将介绍如何增添上升气泡效果。 操作找到主题配置文件_config.butterfly.yml，在inject的bottom处引入以下文件: 1234inject: head: bottom: - <script defer src="https://cdn.jsdelivr.net/combine/npm/jquery@latest/dist/jquery.min.js,gh/weilining/jsdelivr/jquery/circlemagic/circlemagic.min.js,gh/weilining/jsdelivr@latest/jquery/circlemagic/butterflycirclemagic.js"></script> 重新部署，启动，就可以看到效果啦。 结语很好看的一个效果，请参考本页面的实际效果。

前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。 操作步骤在\themes\butterfly\source\css路径下创建一个xxx.css文件，在文件中添加如下代码： 123456789/* 首页文章栏背景透明 */#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color)}/* 侧边栏透明 */#aside-content .card-widget { background: var(--light_bg_color)} 然后将该文件引入到_config.butterfly.yml文件中inject的head处： 1- <link...

在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js这里以butterfly主题为例： 123456789# Inject# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)# 插入代码到头部 </head> 之前 和 底部 </body> 之前inject: head: # - <link rel="stylesheet" href="/xxx.css"> bottom: - <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> - <script...

前言当我们搭建一个网站之后，如果没有做一些相关的搜索引擎SEO优化，那么我们的网站是很难获取来自搜索引擎的流量，用户很难在搜索引擎上搜索到我们网站的内容，所以接下来我们要为Hexo网站做一些简单的搜索优化。 将网站链接提交到百度百度搜索引擎提交入口 有三种验证方式，这里选择HTML标签验证，在themes\next\layout\_partials\head.swing中添加验证代码： 1<meta name="baidu-site-verification" content="code-iqJOekpmDl" /> 然后点击完成验证，通过即可。同理将站点链接也提交到Google和搜狗，此处略过。 给站点添加sitemap Hexo安装sitemap 12npm install hexo-generator-sitemap --save #sitemap.xml适合提交给谷歌搜素引擎npm install hexo-generator-baidu-sitemap --save...

如果我们不想让别人评论，那该怎么办呢？实现起来很简单，只需要在头文件加上一行 comments: false 就可以了。 123456789---title: Hexo关闭文章评论categories: - Hexotags: - Hexoabbrlink: 2c1ccad9date: 2022-11-12 12:19:43--- 只需要在文章的Front-Matter的位置中添加 comments 就可以了 12345678910---title: Hexo关闭文章评论categories: - Hexotags: - Hexoabbrlink: 2c1ccad9date: 2022-11-12 12:19:43comments: false # :后面和false中间是有一个空格的---

卸载Marked渲染器，安装Markdown it Plus渲染器。 12npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-markdown-it-plus --save 配置_config.yml文件。 12345678910111213141516markdown_it_plus: highlight: true html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ plugins: - plugin: name: markdown-it-katex enable: true - plugin: name: markdown-it-mark enable: false 在博客html的head中加载Katex的CSS样式。 123vi...