Hexo Butterfly 主题:无感刷新 + 侧边音乐插件的优雅配置
开启 Pjax 无感刷新:点击链接不跳转页面这个配置能让博客内点击链接时 无刷新切换页面 ,浏览体验更丝滑。 操作路径:修改 [Blogroot]/_config.butterfly.yml 的以下配置 123456789101112# Pjax无刷新页面切换(参考文档:https://github.com/MoOx/pjax)pjax: # 是否启用:设为true即可开启全局无感刷新 enable: true # 排除不使用Pjax的页面(比如音乐页等,按需添加) exclude: # - /xxxxxx/# 自定义CDN加速(可选,让Pjax资源加载更快)CDN: option: pjax: https://cdn.jsdmirror.com/npm/pjax@0.2.8/pjax.min.js 配置侧边折叠音乐插件:美观不占地通过 Aplayer+Meting 实现侧边折叠式音乐播放器(默认只露箭头,hover 展开),兼顾氛围与页面整洁。 步骤 1:开启 Hexo 的 Aplayer 插件 操作路径:在 [Blogroot]/_config.yml 末...
网站改造为可安装的PWA
PWA 简介 渐进式 Web 应用(Progressive Web App,PWA)是一个使用 web 平台技术构建的应用程序,但它提供的用户体验就像一个特定平台的应用程序。它像网站一样,PWA可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样,可以安装在设备上,可以离线和在后台运行,并且可以与设备和其他已安装的应用程序集成。 支持的浏览器会提示用户将 PWA 安装到设备上。 PWA 可以像特定平台的应用一样安装,并可以自定义安装过程。 一旦安装,PWA 就会在设备上获得一个应用图标,与特定平台的应用程序一起。 一旦安装,PWA 可以作为一个独立的应用程序启动,而不是在浏览器中的一个网站。 从这里开始 打开_config.butterfly.yml 文件,找到 Inject 部分,在inject.head中添加/manifest.json(文件位于博客根目录/source/) 1234inject: head: # - <link rel="stylesheet" href="/xxx.css">...
Butterfly主题魔改
Hexo 基础搭建 参考 Hello World 可快速搭建Hexo框架的博客和发布文章 应用主题 Butterflyyarn 拉取依赖 启用主题12yarn add hexo-theme-butterfly # 安装 butterfly 主题yarn add hexo-renderer-pug hexo-renderer-stylus # 安装 pug 以及 stylus 的渲染器 在根目录下的_config.yml中配置主题 1themes: butterfly 在博客根目录中创建 _config.butterfly.yml 这里先说明一下怎么引入创建的css或者js(在博客根目录source中选择性新建_datacssjsimg)打开_config.butterfly.yml 文件,找到 Inject 部分,这里以 custom.css 和 title.js 为例,注意这两个都为本地文件,在线网址也一样,更改 href= 和 src= 里面的内容就行 1234567inject: head: # - <link rel="styleshee...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment








