前言Butterfly 主题提供的图标在视觉上稍微有点平淡,我们可以在博客上引入我们喜欢的多彩图标。这里我们引入了 阿里矢量图标库,请确保你已经完成了前置教程: 引入 Iconfont 阿里图标矢量库/post/3ab4ab8f.html/ 顶部菜单 Menu 图标修改配置文件 [Blogroot]\themes\butterfly\_config.yml 123456789101112131415menu: 博客: / || iconfont cyan-a-guoshushuzhiwu 时间轴: /archives/ || iconfont cyan-a-caozhiwu 归档|| iconfont cyan-a-huahuaduozhiwu: 标签: /tags/ || iconfont cyan-a-meiguihuahuahuaduozhiwu 分类: /categories/ || iconfont cyan-a-shuiguoguoshi 生活|| iconfont cyan-a-huahuaduopenzaizhiwu: 似水年华: / ...
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。 Iconfont简介阿里图标库全名阿里巴巴矢量图标库。提供了丰富的免费图标资源。并且支持多种引入方式。 阿里巴巴矢量图标库https://www.iconfont.cn/ 本帖讨论的引入方案虽然是基于 Butterfly 主题进行的,但是仅仅是特化了引入写法(Butterfly 的文件引入使用 inject 配置项), 整体内容是完全可以兼容其他主题的。读者可以在熟读教程后自行修改引入方案。 新建图标项目 访问阿里巴巴矢量图标库 , 注册登录。 搜索自己心仪的图标,然后选择添加入库,加到购物车。 选择完毕后点击右上角的购物车图标,打开侧栏,选择添加到项目,如果没有项目就新建一个。 可以通过上方顶栏菜单 -> 资源管理 -> 我的项目,找到之前添加的图标项目。现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置,然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标,酌情采用。 引入图标 官方文档提供的引入方案 ...
Github 徽章 GitHub 徽标可以直接通过 Shields.io 在线生成。 理论上可以放在页面的任何地方。教程案例是添加在页脚。 工具网站包括: 徽标生成网站:shields 图标查询网站:simpleicons html 压缩网站:htmlpack 转义字符查询 Shields.io简介Shields.io 是用的最多的徽章制作工具,支持静态动态,各种样式尺寸颜色格式,svg,png 具体的使用方式可访问: Shields.iohttps://shields.io/ 具体步骤 通过 Shields.io 在线生成。 label: 标签,徽标左侧内容 message: 信息,徽标右侧内容 color: 色值,支持支持十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。十六进制记得删除前面的 #号 输入相关信息后,点击 make badge 即可得到徽标的 URL。可以用 img 标签引用,写法简单。不过正式写法建议用 object 标签引用,写法示例如下。123456<!-- label=Frame,Message=Hexo,colo ...
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。 Vercel 简介Vercel 提供免费的 serverless 和全局 CDN 服务,使用者只需要通过几步简单的注册以及导入仓库即可完成部署,从个人体验来看,Vercel 现已支持根据 username.github.io 的 master 分支是否变动来启动自动部署。 2020 年 10 月后 github 新建仓库默认分支改为 main,注意更改。 使用教程 访问 Vercel 官网,点击右上角的 sign up 进行注册 极有可能遇到的 bug 若注册时提示 Error:This user account is blocked.Contact support@vercel.com for more information.这是由于 Vercel 不支持大部分国内邮箱。可以将 github 账号主邮箱改为 Gmail 邮箱。但是根据群友反应,将 github 账号主邮箱切换为 Gmail 以后,Vercel 又会提示需要使用手机号码验证。 ...
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。 前言gulp 能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括 css、js、html 乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十 KB,效果远远不如 imagine、tinypng 等压缩方式,所以此处不再写使用 gulp 压缩图片的内容)。 配置教程 安装 Gulp 插件:在博客根目录 [Blogroot] 打开终端,输入: 12npm install --global gulp-cli #全局安装gulp指令集npm install gulp --save #安装gulp插件 安装各个下属插件以实现对各类静态资源的压缩。 压缩 HTML: 123npm install gulp-htmlclean --save-devnpm install gulp-html-minifier-terser --save-dev# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法 压缩 CSS: 1npm install gulp-clean-css -- ...
樱花雨 Cherry 背景特效 新建 [Blogroot]\themes\butterfly\source\css\custom\index.css, 添加 Canvas 默认样式。 12345678910.cherry-container { position: fixed; width: 100%; height: 100vh; margin: 0; padding: 0; left: 0; top: 0; z-index: -1;} 修改 [Blogroot]\themes\butterfly\layout\includes\layout.pug,在第 19 行左右添加元素 id 绑定 1234 if page.type !== '404'+ #jsi-cherry-container(class='cherry-container') #body-wrap(class=pageType) include ./header/index.pug 新建 [Blogroo ...
avatar
Cyan
记录学习、生活和有趣的事
引导站
公告
好好吃饭🍣 好好睡觉💤 敲敲代码💻 谈谈恋爱💑