右键菜单教程借鉴了站长Akilar の糖果屋的文章 GalMenu,加上自己的改动,有兴趣的伙伴可以在此教程上改进 具体步骤 在 [Blogroot]\themes\butterfly\layout\includes\third-party\ 目录下新建 galmenu.pug 文件,注意缩进。 12345678#rightMenu each MenuItem,index in theme.GalMenu.MenuGuoup .rightMenu-group each item in MenuItem.MenuItem a.rightMenu-item.faa-parent.animated-hover(href=url_for(item.link),title=item.name,id=item.id) i.fa.faa-tada(class=item.icon) if index != 0 span.rightMenu-name=item.name 修改 [Blogroot]\themes ...
前言最近空闲时间再做一个引导站点,使用的是 Vue3 + Vite,完成之后首先想到的就是用 Vercel 托管,网上查询了下,有 vercel-cli 脚手架可以在本地用命令部署,特此记录一下! 前置教程 在看此文章之前,确保你之前有对 Vercel 有一定的了解并有项目托管的经验,可以参考此文章: 站内教程索引: 使用 Vercel 来加速 Hexo 博客/post/812734f8.html/ 教程步骤 使用 vue-cli 搭建脚手架,并能正常运行项目 由于考虑到看这篇文章的应该是做前端开发的,此教程就略过了,不懂的可以看 vue-cli 在项目根目录,全局安装 vercel 依赖 1npm i -g vercel 在根目录创建 vercel.json 文件 123{ "rewrites": [{"source": "/api/(.*)", "destination": "/api"}]} 在根目录创建文件 api\i ...
图床什么是图床?图床一般是指储存图片的服务器,专门用来存放图片,同时允许你把图片对外连接的网上空间,有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为 单线空间、多线空间 和 cdn加速 三种。 在我们博客写文章时,经常要在文章中插入图片,一般我们不会把图片存放在本地,而是存放在存储图片的服务器上,今天就以 阿里云OSS对象存储 为例,与 PicGo 搭建自己的图床。 阿里云OSS对象存储 首先我们要开通服务,访问 阿里云OSS对象存储,购买资源包: 由于我们写博客用的图片流量不是很大,这里我们选择按量付费: 开通 OSS 服务后,我们在 对象存储控制台 创建 Bucket: 付费方式可以看个人博客和图片的流量选择,如果只是单纯写博客用,按量付费是最划算的,我搭建博客两个多月,几十兆的流量就扣了不到2块钱。 PicGo 配置 首先,我们先安装 PicGo ,下载地址: PicGo 打开 PicGo 设置:图床设置 > 阿里云OSS KeyId 和 KeySecret 获取方式: 存储空间名:你创建的 Buc ...
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。 魔改步骤 安装插件,在博客根目录 [Blogroot] 下打开终端,运行以下指令: 1npm install hexo-butterfly-wowjs --save 添加配置信息,以下为写法示例在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加 12345678910111213141516wowjs: enable: true #控制动画开关。true是打开,false是关闭 priority: 10 #过滤器优先级 mobile: false #移动端是否启用,默认移动端禁用 animateitem: - class: recent-post-item #必填项,需要添加动画的元素的class style: animate__zoomIn #必填项,需要添加的动画 duration: 2s #选填项,动画持续时间,单位可以是ms也可以是s。例如3s,700ms。 delay: 1s #选填项,动画开 ...
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。 魔改步骤 修改 [Blogroot]\themes\butterfly\layout\includes\page\flink.pug , 此处添加判断机制,使得可以通过修改配置文件来切换友链风格。同时为了方便管理,把各个友链样式放到新建的文件目录 [Blogroot]\themes\butterfly\layout\includes\page\flink_style 下。 flink.pugbutterfly.pugvolantis.pugflexcard.pug修改 [Blogroot]\themes\butterfly\layout\includes\page\flink.pug ,全部内容替换为: 1234567case theme.flink_style when 'volantis' include ./flink_style/volantis.pug when 'flexcard' include ./flink_style/flexcard ...
魔改教程 使用命令 hexo new page guestbook 新建一个留言板菜单 guestbook (名字可以自定义),在 [Blogroot]\source\guestbook\index.md 中添加: 1234567891011121314151617<div class="envlope-wrapper"> <div id="envelope" class="open"> <div class="front flap"></div> <div class="front pocket"></div> <div class="letter"> <div class="words line1"></div> <div class=&q ...
前言Hexo默认的静态URL格式是 :year/:month/:day/:title,也就是按照年、月、日、标题来生成固定链接的。如 http://xxx.yy.com/2020/07/06/hello-world 这种默认配置的缺点就是一般文件名是中文,导致 url 链接里有中文出现,这会造成很多问题,也不利于 `seo ,另外就是年月日都会有分隔符。 知识点 百度蜘蛛抓取网页的规则: 对于蜘蛛说网页权重越高、信用度越高抓取越频繁,例如网站的首页和内页。蜘蛛先抓取网站的首页,因为首页权重更高,并且大部分的链接都是指向首页。然后通过首页抓取网站的内页,并不是所有内页蜘蛛都会去抓取。 搜索引擎认为对于一般的中小型站点,3层足够承受所有的内容了,所以蜘蛛经常抓取的内容是前三层,而超过三层的内容蜘蛛认为那些内容并不重要,所以不经常爬取。出于这个原因所以permalink后面跟着的最好不要超过2个斜杠。 对于这个问题,我们使用 hexo-abbrlink 插件可以完美解决。 安装教程 在博客根目录 [Blogroot] 下打开终端,运行以下指令安装 hexo-abbrlink ...
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。 魔改教程 在博客根目录 [Blogroot] 下打开终端,运行以下指令安装 hexo-tag-aplayer 插件: 1npm install hexo-tag-aplayer --save 在站点配置文件 [Blogroot]\_config.yml 中新增配置项,建议直接加在最底下: 12345# APlayer# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.mdaplayer: meting: true asset_inject: false 修改主题配置文件 [Blogroot]\_config.butterfly.yml 中关于 Aplayer 的配置内容 1234# Inject the css and script (aplayer/meting)aplayerInject: enable: true per_page: true 在主题配置文件 [Blogroot ...
前言在我进入前端开发岗位之后,就有了想搭建博客的想法,在里面记录自己的工作和生活,还可以自己写文章。但碍于工作时间和自己的基础还很薄弱,一拖再拖,终于在2022年初在网上了解资源后,决定采用 Hexo 博客框架搭配 Butterfly 主题,再经过一段时间摸索之后,博客已初现雌形,感觉还不错,有想法的伙伴可以参考这篇文章 搭建一个个人博客需要什么呢❓唯一需要的就是:耐心、坚持,为什么呢❓ 在你搭建博客的过程中,你会遇到很多问题,你需要自己在网上或者博客社区、QQ群等渠道去寻找答案,有时候一个问题就要查半天,最后还有可能没解决,但是当问题解决时的满足感令人愉悦。 你需要了解很多知识,比如 Git、Github、域名服务、前端三剑客:[JS、CSS、HTML]、你没接触过的文件格式、MD文件语法、博客优化知识等,当然了,这些收益都是相对的。 博客需要美化,你需要自己去设计自己的博客,怎样才能让网站看起来比较漂亮,文章需要搭配怎样的封面图,使用怎样的图标等等,都需要你自己去想,当然了,你也可以参考一些大佬的网站。 博客前置工作搭建博客之前,你需要做以下准备工作: ...
前言Butterfly 主题自带的 Loading 效果晒微显得单调,在参考了 Akilar の糖果屋 等大佬的教程后,决定亲自添加一款比较自然的加载动画 魔改步骤 在配置本帖的魔改内容之前,请确保您已经完成了 Akilar の糖果屋 大佬的前置教程,即基于 Butterfly 的加载动画修改: Loading Animationhttps://akilar.top/posts/3d221bf2/ 完成后,在此基础上,继续新增加载动画,新建 [Blogroot]\themes\butterfly\layout\includes\loading\load_style\gooey.pug 1234#loading-box div.centered div.blob-1 div.blob-2 新建 [Blogroot]\themes\butterfly\source\css\_load_style\gooey.styl 123456789101112131415161718192021222324252627282930313233343536373839404142434 ...
avatar
Cyan
记录学习、生活和有趣的事
引导站
公告
好好吃饭🍣 好好睡觉💤 敲敲代码💻 谈谈恋爱💑