Nanami Kento

新建Css文件颜色可以根据自己的喜好调节 写好之后插入到头部里面 1234567891011121314151617181920212223242526272829/* 头像呼吸灯 */[data-theme="light"] .avatar-img { animation: huxi_light 4s ease-in-out infinite;}[data-theme="dark"] .avatar-img { animation: huxi_dark 4s ease-in-out infinite;}@keyframes huxi_light { 0% { box-shadow: 0px 0px 1px 1px #e9f5fa; } 50% { box-shadow: 0px 0px 5px 5px #e9f5fa; } 100% { box-shadow: 0px 0px 1px 1px #e9f5fa; & ...

修改rightside.pug路径： [BlogRoot]\themes\butterfly\layout\includes\ 12345button#go-up(type="button" title=_p("rightside.back_to_top")) i.fas.fa-arrow-up+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")+ i.fas.fa-arrow-down

a2ff4597c1c7c4165c5922327a90033b5ee5225b01df72b96a49a8a3bf7b411a4ae0099bee113b30416252ad82f7841327671a6a9fceaf91e16515383ffd852ac34a6ae094518555e566e6bf739dcf5723115b9d233b1ce5fd817698be2c02ee5576b94230ae098a3a8e802c323fbb33764072bef4d85c5b2f824b0757c8c779a97ed3c38f3a8744af47fd6b42c7cf8b9ed9040fa1421eb72516a41ce7aea4bc49b158f9bf8f50824810fb011a583558db5d585c218b252e097eb12f10c2123ac88434b1b1e5d9340f3e57f1659940e23f1459364bef1987c97ff1b3baba3d83ff260845d385d9277dfd9438d080199ee376eea7d6262a355 ...

修改_config.butterfly.yml12345# Menu 目錄menu: ... 统计: /articleCount/ || iconfont icon-tongji ... 新增统计页面在 [Blogroot]\source\ 目录下新建 articleCount 文件夹 并在新建的 articleCount 文件夹下新建 index.md 文件 添加以下内容： 12345678910111213141516171819202122232425---title: ARTICLE STATISTICSdate: 2024-02-01 16:39:59updated:type: 'articleCount'comments:description:keywords:top_img:mathjax:katex:aside: falseaplayer:highlight_shrink:random:---<!-- 文章发布时间统计图 --><div id="posts-chart" data-start=" ...

新建Css文件写入以下代码，并inject到头部 123456789101112131415161718/* 全局宽度 */.layout { max-width: 1400px;}/* 侧边卡片栏宽度 */.aside-content { max-width: 318px; min-width: 300px;}/* 平板尺寸自适应(不启用侧边栏宽度限制) */@media screen and (max-width: 900px) { .aside-content { max-width: none !important; padding: 0 5px 0 5px; }} 指定页面不想再非首页的地方显示侧边栏，那就需要给非首页的页面加上标记，修改 [BlogRoot]\themes\butterfly\layout\includes\layout.pug为以下内容 123456789 - var htmlClassHideAside = theme.aside.enable &am ...

新建Css文件写入以下代码，并inject到头部 123456789101112131415/* 一级菜单居中 */#nav .menus_items { position: absolute !important; width: fit-content !important; left: 50% !important; transform: translateX(-50%) !important;}/* 子菜单横向展示 */#nav .menus_items .menus_item:hover .menus_item_child { display: flex !important;}/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */.menus_items .menus_item:nth-child(2) .menus_item_child { left: -125px;}

新建Css文件写入以下代码，并inject到头部 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117/* 日间模式不生效 */[data-theme="light"] #site-name,[data-theme="light"] #site-title,[data-theme="light"] #site-subtitle,[data-theme="light"] #post-info { animation: none;}/* 夜间模式生效 */[dat ...

新建Css文件写入以下代码，并inject到头部 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788/* 文章页H1-H6图标样式效果 *//* 控制风车转动速度 4s那里可以自己调节快慢 */h1::before,h2::before,h3::before,h4::before,h5::before,h6::before { -webkit-animation: ccc 4s linear infinite; animation: ccc 4s linear infinite;}/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */@-webkit-keyframes ccc { 0% { ...

新建Css文件写入以下代码，并inject到头部 --trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明； --trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明; --border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框; --backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法; 大家可以根据自己喜好进行调节，不用拘泥于我的样式！ 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 ...

新建Javascript文件1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253var rAF = function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } );}();var frame = 0;var allFrameCount = 0;var lastTime = Date.now();var lastFameTime = Date.now();var loop = function () { var now = Date.now(); v ...

第三方搜索 第三方 安装插件1npm install hexo-algoliasearch --save注册 Algolia 并获取配置Algoliahttps://www.algolia.com/注册algolia，创建新建indexSetting->打开API Keys选择All API Keys，新建一个拥有CRUD权限的api key（指定相应的index）修改_config.yml在文件添加如下代码1234567891011121314151617# 网站搜索功能 hexo-algoliasearchalgolia: appId: "your appId" apiKey: "your apiKey" adminApiKey: "your adminApiKey" chunkSize: 5000 indexName: "your indexName" fields: - content:strip:truncate, ...

此功能用于刷新浏览器网站的缓存，用以查看最新的文章或者解决缓存问题 新建Javascript文件123function refreshCache() { if (confirm('是否确定刷新博文缓存')) location.reload()} 修改rightside.pug路径： [butterfly]\layout\includes\ 1234567891011121314151617 when 'comment' if commentsJsLoad a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment")) i.fas.fa-comments+ when 'refresh'+ button#refresh-cache(type="button" title=&# ...

新建hideAsideOnMobile.js路径：[Blogroot]\source\js\ 这个文件用来控制显示隐藏的逻辑 12345678910111213141516171819202122232425262728293031323334353637383940414243444546// 固定卡片点击动作function FixedCardWidget(type,name,index){ // 根据id或class选择元素 if (type === "id"){ var tempcard = document.getElementById(name); } else{ var tempcard = document.getElementsByClassName(name)[index]; } // 若元素存在 if (tempcard) { // 首先判断是否存在fixed-card-widget类 if (tempcard.className.indexOf( ...

新建Css文件写入以下代码，并inject到头部 1234567891011121314151617181920212223/*10s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/#page-header,#web_bg { -webkit-animation: imgblur 10s 1 ease-in-out; animation: imgblur 10s 1 ease-in-out;}@keyframes imgblur { 0% { filter: blur(5px); } 100% { filter: blur(0px); }}/*适配使用-webkit内核的浏览器 */@-webkit-keyframes imgblur { 0% { -webkit-filter: blur(5px); } 100% { -webkit-filter: blur(0px); }
...