Hexo + Butterfly主题美化wei-ll.github.io/2023/06/23/Butterfly%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/ 新的内容会先在原Blog更新。 搭建时是Hexo + Next主题,Next主题比较简约直观,本打算就直接用Next,但之后发现了Butterfly主题也很好看,就配置了Butterfly主题 Next主题:theme-next.js.org/,...
原文地址,阅读效果更佳:Hexo中Buttefly主题美化进阶续篇(十一) | 偷掉月亮 (moonshuo.cn) 大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天将为大家讲述Butterfly主题的我们页面的整体美化,其实前面已经出过两个这样的美化,但是随着时间的交替,发现可能适合我们的美化,这里将大家可以自由进行选择 个人卡片...
Butterfly配置 新建css文件 在Butterfly主题文件夹下的/source/css文价夹中新建font.css吧复制的代码粘贴进去 代码语言:css 复制 /* font.css */@font-face{font-family:"iconfont";src:url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.woff2?t=1671175363970')format('woff2'),url('//at.alicdn...
搭建时是Hexo + Next主题,Next主题比较简约直观,本打算就直接用Next,但之后发现了Butterfly主题也很好看,就配置了Butterfly主题 Next主题:https://theme-next.js.org/,https://github.com/theme-next/hexo-theme-next Butterfly主题:https://github.com/jerryc127/hexo-theme-butterfly 1. 文章加密 利用hexo-bl...
基于Hexo和Butterfly创建个人技术博客,(8) 博客网站butterfly主题UI框架美化,基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入,详细记录了个人建站全过程。系列专题-博客网站主体butterfly主题UI框架美化
在《Hexo中Buttefly主题美化进阶（八）》中，我分享了如何将背景图设置为渐变色，但后来觉得这种设计略显突兀。调整后，页面整体更和谐。星空背景流星特效 为了实现星空背景和流星特效，新建`universe.js`文件，并复制相应的代码。在自定义CSS文件中，添加对应代码。完成配置后，在Butterfly主题配置文件中引入...
Hexo+Butterfly主题设置背景透明度和字体 效果 新建css文件 引入css改变页面的样式,推荐在一个自己新建目录创建。有人选择在主题文件夹下找到css文件夹(\themes\Butterfly\source\css),这样系统升级可能会把自己的代码覆盖掉。本人是在Blog\CodeRain\source\css新建一个transpancy.css文件(文件名可以自取),修改最右边...
在搭建好 Hexo 博客后,我们可以通过修改主题配置文件来实现文章的美化。 选择Butterfly 主题后,我们可以通过修改主题配置文件对文章进行美化。具体来说,可以对以下几个方面进行调整: 1.修改标题样式:我们可以通过修改 CSS 样式表,调整标题的字体、大小和颜色,使其更加突出和美观。 2.调整段落间距:为了让文章阅读起来...
这个稍有点复杂,教程是用butterfly 4.9.0版本改的,这个功能一般用于page类型的页面会比较合适。 修改custom.css添加如下代码 /*视频功能*/ #index-video { z-index: 0; position: absolute; top: 0; left: 0; height: 80vh; width: 100%; object-fit: cover; ...
在Butterfly主题的美化进阶中，我们将深入探讨并实施一系列优化策略，以提升网站的整体美观性与用户体验。首先，我们将调整CSS文件以设置页面元素的透明度，这可以通过引入动态渐变或图片渐变来实现，为页面带来更加丰富的视觉效果。选择合适的背景图片对于美观至关重要，确保图片与整体风格和谐统一。参考知名博主...