blog
未读侧边栏steam卡片 参考1 参考2 代码实现 GitHub 地址 第一步 点击 steam 卡片生成跳转到卡片生成网站，点击steam登录进行授权登录，或者直接输入 Steam ID steam card 第二步 输入后直接点击添加进行自定义设置 游戏的 appid 在 steam 商店里面自己找就行了 第三步 在 source👉_data 下面 widget.yml 123456789101112# top: 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)# bottom: 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)top: - class_name: game-card-widget id_name: game-card-widget name: 游戏卡片 icon: fas fa-gamepad # 你可以根据需要添加图标 order: 1 html: | <div id="game-card-widget"> ...
汇总记录
未读理论部分内容参考自：Web页面全链路性能优化指南，如果仅仅想进行优化不想花费太多时间了解原理可以直接跳到第二部分 一、理论部分 1.浏览器渲染原理 我们需要知道浏览器是如何渲染一个页面的，我们才能知道如何对页面进行性能优化，所以这里我们对一些基础知识进行讲解。 1.1 进程与线程 浏览器有多种进程，其中最主要的5种进程如下： 浏览器进程 负责界面展示、用户交互、子进程管理、提供存储等 渲染进程 每个页面都有一个单独的渲染进程，用于渲染页面，包含webworker线程 网络进程 主要处理网络资源加载（HTML、CSS、JS、IMAGE、AJAX等） GPU进程 3D绘制，提高性能 插件进程 chrome插件，每个插件占用一个进程 1.2 输入url到页面展示完整过程 1.2.1 用户输入 用户在浏览器进程输入并按下回车健后，浏览器判断用户输入的url是否为正确的url， ...
注意 本教程基于Butterfly主题实现，如果读者使用的不是该主题，请根据自己情况修改代码。 修改SW 如果前面按照我的实现（《基于Butterfly的PWA适配》）创建了sw.js，那么完全按照我的内容走就可以了。如果你没有sw.js或者没有使用我的sw.js，那么请跳过这一步骤。 向sw.js中添加如下代码： javascript 12345678910111213141516171819202122 //想要使用该功能的话需要在js中调用// navigator.serviceWorker.addEvent ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
汇总记录
未读魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣） 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly。 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。 本帖基于Butt ...
游戏卡片
