【2024】博客年度调整(暖色系VS冷色系)
发表于|更新于
|总字数:341|阅读时长:1分钟|浏览量:
按照惯例,一年一度对小站进行“检修”。hexo和butterfly的版本都可以进行更新了,笔者重新走了一遍流程,参照以前的备忘录,确实好多东西忘记了。本地测试成功,但是考虑其他因素,暂不升级。一是没有需求,二没有重大BUG确实也没必要升级,不然后面每年都升级一次太麻烦了。
这里将对建站流程作一些补充:
hexo下载后no fund无影响,时间太久又忘了。
1.部署hexo
1 | npx hexo init |
2.页脚颜色,主题_config.yml文件中,搜索footer_bg。(时间太久,又记成是图片,图片是备用?!)
其他,暂且忘了,想到了再进行补充。
说说博客的调整,首先是风格由原先的冷色系变成了暖色系。(原先的浅蓝配色,感觉阅读更加舒适,果然还是不太适合鲜艳的颜色。)为了适应整体风格,对图片进行调整。同时将首页大图改为动图。(这个后面再讲)。同时考虑去掉留言页面(需求不大,可有可无)。在调整的时候,曾经想过去宝可梦化,比如某搞笑动漫日常,但是考虑域名不应景,暂且搁置。总之本次调整为微调,和以前一样。
文章作者: 小刚
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小刚的天堂!
相关推荐

2023-02-09
博客备忘录
说明1.本博客使用的框架是hexo,官方网址:https://hexo.io/zh-cn/。2.使用的主题是butterfly,github地址:https://github.com/jerryc127/hexo-theme-butterfly。作者的地址:https://butterfly.js.org/。3.搭建的过程中,参考了偷掉月亮:https://moonshuo.cn/的魔改教程。(建议可以自行参考,很详细)。4.hexo部署过程中很容易出错,给予小小提醒。空格不能漏打、:注意是英文不要忘打、样式不显示是否清除了浏览器缓存,也可以试试hexo clean、名称不能用特殊含义单词,比如css起index.css。 搭建1.准备好node.js:https://nodejs.org/en/download/和Git:https://git-scm.com/。 12node -vnpm -v 用于,检测node是否已经成功安装。2.部署hexo, 1npm install -g hexo-cli 3.初始化博客 1hexo init 4.启动博客 1hexo g 5.开启本地服务 1hexo s Butterfly安装1.国内安装,这个比较快,否则视地方不同,可能需要开科技。 1git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 2.安装渲染插件 1npm install hexo-renderer-pug hexo-renderer-stylus --save 3.hexo的config.yml,更改主题为butterfly。 123hexo cleanhexo ghexo s 完善配置1.以下仅为个人记录使用,如有需要请参考作者博客,主题配置说明,或者参考偷掉月亮博客说明。 123456789101112131415# Site# 网站标题title: '小刚的天堂'#网站副标题,即我们网页标签对应的文字subtitle: '宝可梦博客'#网站描述description: '欢迎来到小刚的天堂!'# 网站关键词,便于别人搜索到你keywords: '小刚的天堂'# 作者名称author: '小刚'# 语言language: zh-CN#时区timezone: Asia/Shanghai 1234567# URL## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'# 自己网站的网址url: https://www.pokemon.vip/# 永久链接,这里不建议使用这个,后面我们会进行优化permalink: :year/:month/:day/:title/permalink_defaults: 1234567891011121314# Directory//文章对应的位置source_dir: source//渲染的文件位置public_dir: public//标签对应的文件目录tag_dir: tags//时间线对应的目录archive_dir: archives//分类对应的目录category_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render: 2.butterfly主题配置 12345678910menu: 首页: / || fas fa-home 时间线: /archives/ || fas fa-archive 标签: /tags/ || fas fa-tags 分类: /categories/ || fas fa-folder-open 休闲||fas fa-list: 音乐: /music/ || fas fa-music 电影: /movies/ || fas fa-video #Link: /link/ || fas fa-link 关于: /about/ || fas fa-heart 3.文章标签 123456789101112131415//文章的标题,也是所以可以搜索到的东西title: Hexo中Buttefly文章标签与图床的选择(四)//分类,如果想要二级分类,直接在下面直接添加就好categories: - 博客搭建//标签,表示这个属于Hexo标签与Butterfly标签,注意两个标签是同级的,同时便于别人的查询tags: - Hexo - Butterfly//自定义文章封面cover: 图片的链接//这个是网站的链接,是便于搜索引擎收录的,我们后续搜索引擎收录的时候在进行讲解permalink//评论功能,后续会讲解到comments 4.永久链接(abbrlink插件)具体请参考作者github:https://github.com/Rozbo/hexo-abbrlink 1npm install hexo-abbrlink --save 使用方法更改hexo的config.yml,修改permalink: 后内容为/posts/:abbrlink.html或者/post/:abbrlink/或者直接/:abbrlink.html或/:abbrlink/均可。 12345678910111213# URL## Set your site url here. For example, if you use GitHub Page, set url as...

2023-08-18
给博客添加加载动画
前言本站使用的是hexo博客系统,主题是butterfly,版本大概是4.4左右,考虑网站加载速度不是很快,所以决定开启加载动画,可能会存在影响浏览体验。参考网上众多大佬的教程,比如安知鱼https://blog.anheyu.com/posts/52d8.html,比如糖果屋https://akilar.top/posts/3d221bf2/,因为版本存在不同,所以按照教程依旧会存在很多问题,比如不加载动画,比如背景颜色透明,比如本地测试正常,服务端不正常等等等。最后还是折腾完了,参考了糖果屋的教程,作了一些简单的修改,本帖仅供笔者日后迁站记录所用。 正文笔者需求不高,所以尽量能简单就简单,能少改就少改,仅使用了pokeball加载动画。1.打开\themes\butterfly\layout\includes\loading\fullpage-loading.pug。内容替换为: 1234567891011121314151617181920212223#loading-box .pokeball-back .pokeball-loading .pokeball#pokeball-normal .pokeball#pokeball-great .pokeball#pokeball-ultra .pokeball#pokeball-master .pokeball#pokeball-safariscript(async). var preloader = { endLoading: () => { document.body.style.overflow = 'auto'; document.getElementById('loading-box').classList.add("loaded") }, initLoading: () => { document.body.style.overflow = ''; document.getElementById('loading-box').classList.remove("loaded") } } window.addEventListener('load',()=> {preloader.endLoading()}) setTimeout(function(){preloader.endLoading();}, 5000); 如果想固定加载时间,可以去掉window.addEventListener('load',()=> {preloader.endLoading()}),5000单位为毫秒,可以修改,建议最长不超过8000。2.打开\themes\butterfly\source\css\_layout\loading.styl。内容替换为: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071#loading-box position fixed z-index 1000 width 100vw height 100vh overflow hidden text-align center &.loaded z-index -1000 .pokeball-loading display none@keyframes rotateBall { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}@-webkit-keyframes rotateBall { 0% { transform: rotate(0deg); } 50% { transform: rotate(50deg); } 0% { transform: rotate(360deg); }}.pokeball-back background-color: var(--preloader-bg) height: 100% width: 100%.pokeball-loading height 48px width 264px position absolute top 50% left 50% transform translateX(-50%) translateY(-50%).pokeball width 4px height 4px transform-origin 24px 24px animation rotateBall 1.5s infinite forwards.pokeball#pokeball-normal box-shadow 16px 0 0 #000, 20px 0 0 #000, 24px 0 0 #000, 28px 0 0 #000, 8px 4px 0 #000, 12px 4px 0 #000,...

2025-01-24
【2025】博客年度调整(再次出发!)
按照惯例,一年一度对小站进行“检修”。博客的主题是butterfly,hexo免费开源的主题,作者真的是勤劳的小蜜蜂,两年过去了,依然在维护更新。之前的版本是4.6.0版本,已经是两年前的版本了,目前已经升级到了最新版本5.3.2。新版本较旧版本,作者有非常多的改动。 简单讲讲笔者对博客的调整:1.hexo和butterfly均升级到了最新版本,目前butterfly的版本是5.3.2。2.博客外观微调,背景视频取自wallpaper用户Huoyufou作品。原视频比较大,取了7、8帧关键帧,重新渲染成视频。3.开启博客夜间模式,根据博客情况进行了一些调整,修复了偷掉月亮教程中新版代码存在的错误问题。(详情见博客备忘录主题帖) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667:root { --trans-light: rgba(255, 255, 255, 0.88); --trans-dark: rgba(25, 25, 25, 0.88); --border-style: 1px solid rgb(255, 255, 255); --backdrop-filter: blur(5px) saturate(150%); } /* 日间模式 */ [data-theme="light"] #page-header::before { background: rgba(0, 0, 0, 0.2) !important; } /* 首页文章卡片 */ #recent-posts .recent-post-item { background: var(--trans-light); border: var(--border-style); } /* 首页侧栏卡片 */ #aside-content .card-widget { background: var(--trans-light); border: var(--border-style); } /* 文章页、归档页、普通页面 */ div#post, div#page, div#archive { background: var(--trans-light); border: var(--border-style); } /* 导航栏 */ #page-header.nav-fixed #nav { background: rgba(255, 255, 255, 0.88); } [data-theme="dark"] #page-header.nav-fixed #nav { background: rgba(0, 0, 0, 0.7) !important; } /* 夜间模式遮罩 */ [data-theme="dark"] #recent-posts .recent-post-item, [data-theme="dark"] #aside-content .card-widget, [data-theme="dark"] div#post, [data-theme="dark"] div#archive, [data-theme="dark"] div#page { background: var(--trans-dark); } /* 阅读模式 */ .read-mode #aside-content .card-widget { background: rgba(255, 255, 255, 0.5) !important; } .read-mode div#post { background: rgba(255, 255, 255, 0.5) !important; } /* 夜间模式下的阅读模式 */ [data-theme="dark"] .read-mode #aside-content .card-widget { background: rgba(25, 25, 25, 0.9) !important; color: #ffffff; } [data-theme="dark"] .read-mode div#post { background: rgba(25, 25, 25, 0.9) !important; color: #ffffff; } 4.博客启用aplayer插件,同时参考了对如何在博客园中添加音乐播放器及设置自动播放的研究的代码,以实现点击后自动播放。(都是浏览器的锅)参考Butterfly:添加全局吸底 Aplayer 播放器,以实现隐藏歌词。(虽然未白镇本来就是纯曲子)同时参考了【Hexo博客】隐藏 Butterfly 主题中 Aplayer 的全局吸底音乐标签隐藏了aplayer。记得把//和后面的文字删掉,笔者是放在了footer.js里,<script></script>也要删掉,也可以参考原作者的放的位置? 123456789101112<script> let ref = setInterval(function(){ //每隔2秒尝试播放一次 ...

2025-01-24
Butterfly主题视频替换首页图(5.3.2版本适用)
4.x版本请参考通过PS将视频设置为Hexo首页动图。其实可以考虑做个gif作为备份,但是目前看来大部分博友的视频可花哨了。还是老老实实用视频好了。 5.3.2版本同样修改layout\includes\header\index.pug,代码位置有点不同。记得删除代码中的文字。 12345if !theme.disable_top_img && page.top_img !== false case globalPageType when 'post' - top_img = false 添加这一行 - top_img = page.top_img || page.cover || theme.default_top_img 1234567header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img) include ./nav.pug if top_img !== false if globalPageType === 'post' include ./post-info.pug else if globalPageType === 'home' video(src='https://你的视频地址' autoplay="" loop="" muted="" style='min-height:100%;height:100%;width:100%;object-fit:cover') 添加这一行 方便起见,直接复制粘贴,替换掉 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354- const returnTopImg = img => img !== false ? img || theme.default_top_img : false const isFixedClass = theme.nav.fixed ? ' fixed' : '' var top_img = false let headerClassName = 'not-top-img' var bg_img = ''if !theme.disable_top_img && page.top_img !== false case globalPageType when 'post' - top_img = false - top_img = page.top_img || page.cover || theme.default_top_img when 'page' - top_img = page.top_img || theme.default_top_img when 'tag' - top_img = theme.tag_per_img && theme.tag_per_img[page.tag] || returnTopImg(theme.tag_img) when 'category' - top_img = theme.category_per_img && theme.category_per_img[page.category] || returnTopImg(theme.category_img) when 'home' - top_img = returnTopImg(theme.index_img) when 'archive' - top_img = returnTopImg(theme.archive_img) default - top_img = page.top_img || theme.default_top_img if top_img !== false - bg_img = getBgPath(top_img) - headerClassName = globalPageType === 'home' ? 'full_page' : globalPageType === 'post' ? 'post-bg' : 'not-home-page'header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img) include ./nav.pug if top_img !== false if globalPageType === 'post' include ./post-info.pug else if globalPageType === 'home' video(src='https://你的视频地址' autoplay="" loop=""...