Hexo+Butterfly主题增加文章双栏布局
安装插件
1 | npm i hexo-butterfly-article-double-row --save |
修改站点配置
修改站点根目录下的配置文件_config.yml
1 | butterfly_article_double_row: |
部署验证
1 | hexo cl |
执行 hexo 三连查看效果。
参考链接：https://zfe.space/post/hexo-butterfly-article-double-row.html
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 竹山一叶！
微信- 支付宝
相关推荐
2022-11-12
Hexo关闭文章评论
如果我们不想让别人评论，那该怎么办呢？实现起来很简单，只需要在头文件加上一行 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中间是有一个空格的---
2022-11-13
Hexo页脚养鱼
在主题配置的 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...
2022-11-13
Hexo文章页面透明效果
前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。 操作步骤在\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...
2022-11-13
Hexo增加上升气泡效果
前言本文将介绍如何增添上升气泡效果。 操作找到主题配置文件_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> 重新部署，启动，就可以看到效果啦。 结语很好看的一个效果，请参考本页面的实际效果。
2022-11-13
Hexo增加动态线条效果背景
前言效果如本站所示，我看过一些博客，有很多一部分都有这个动线效果背景。 操作操作步骤很简单，只需在_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';...
2022-11-13
Hexo页脚美化
前言本文将介绍如何美化页脚，效果展示在最底部。 操作在\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()...
评论
