05月
5 篇- Hexo: 自定义过滤器重定向资源文件夹图片相对路径引用Hexo: 自定义过滤器重定向资源文件夹图片相对路径引用AI 摘要
文章针对 Hexo 文章资源文件夹中图片的路径冲突,提出用自定义过滤器兼顾 Markdown 本地预览与发布访问。实现时在文章渲染后解析图片标签,根据文章永久链接计算资源目录,改写相对的 data-src 路径,并同步处理正文和摘要等字段,最后提供主题集成文章作为参考。
Hexo 启用资源文件夹后,本地 Markdown 常用相对路径插入图片以便预览,但发布时需专用标签,导致图片链接异常。本文提出兼容方案:编写 after_post_render 过滤器,用 cheerio 解析文章内容中的 img 标签,把本地资源路径替换为发布后的正确链接,使本地预览与线上发布都能正常显示图片。文章还说明可按此原理集成到主题中。
文章介绍了解决 Hexo 资源文件夹图片引用与 Markdown 本地预览冲突的方法:本地写作时用相对路径引入图片以便预览,但 Hexo 发布后链接会失效。作者通过编写 Hexo 的 after_post_render 过滤器,在文章渲染完成后用 cheerio 解析 HTML,遍历 img 标签,将相对路径的资源链接替换为基于文章永久链接的正确路径,从而兼顾本地预览与线上正常显示。文中给出完整代码实现,并说明可集成到主题中。
资源文件夹 启用后,使得文章图片等外挂资源可以按文件夹和文章对应。 若正常发布,需要 引入图片,或者 ,无法在本地 书写时预览 若正常预览, 引入图片需要采用 相对路径 , 发布时则 图片链接 异常 本文主要解决两者之间的冲突,使得二者能够兼得. 本地编写仍然采用方便预览的相对路径引入方式, 编写 过滤器, 在文章渲染结束后,将 的 资源路径 进行替换 集成到主题内部的方式,可以查看博客文章 Shoka主题: 资源文件夹图片相对路径引用转换 本文只是基于 的 过滤器,阐述原理并给出实现 参考链接: 过滤器(Filter)
- Hexo构建备忘
- Hexo: 使用gulp压缩博客文件Hexo: 使用gulp压缩博客文件AI 摘要
文章介绍在 Hexo 生成静态文件后使用 gulp 压缩资源,以减小文件体积。通过配置 JavaScript、CSS、图片和 HTML 四类任务,演示插件安装、处理范围、目录排除以及压缩参数,并使用并行任务统一执行。最后将 gulp 插入生成与部署之间,形成可重复使用的博客发布流程。
文章介绍用 gulp 自动化压缩优化 Hexo 生成的博客文件,以减小空白与资源体积、提升访问速度。作者安装 gulp 及 CSS、JS、图片、HTML 压缩插件,新建 gulpfile.js,配置各项 minify 任务并默认并行执行。最后建议在部署命令中加入 gulp,形成 hexo clean、generate、gulp、deploy 的四连流程。
文章介绍了如何使用自动化构建工具 gulp 压缩优化 Hexo 博客生成的静态文件,以减小文件体积、提升网站访问速度。作者首先说明 Hexo 生成的文件中存在大量空格、空行等可优化内容,随后在本地环境(Hexo 6.2.0、Node 18)中安装 gulp 及其插件,包括 gulp-uglify-es、gulp-clean-css、gulp-imagemin 和 gulp-html-minifier-terser,分别用于压缩 JS、CSS、图片和 HTML。接着在博客根目录创建 gulpfile.js,编写四个压缩任务并配置默认任务并行执行,其中可排除特定目录和已压缩文件。最后将 gulp 命令插入原有的 hexo 部署流程,形成“hexo clean、hexo generate、gulp、hexo deploy”的推送四连操作。
查看 生成的博客文件往往会发现其中存在大量的空格与空行,这虽然不影响页面显示,但是无形中会增加页面文件的大小 实际上不止空白,这些由 生成的文件中还有很多能够被优化以减小大小的地方,而要提高网站访问速度,减小资源文件的大小一直是最有效的手段之一(尤其是图片压缩)。 是一个自动化构建工具,一般用于开发过程中执行一些常见任务,它有很多社区提供的强大插件可供使用,极大的简化了任务处理流程。在这里我们用它来对 生成的博客文件进行压缩优化处理。 本地环境如下 主要从 几个方面进行压缩 在博客工作目录下新建文件 , 写入如下 任务配置代码(详细描述见注释) 最后在 三连额外插入 命令即可,我愿称之为 新推送四连
- Hexo: 文章加密Hexo: 文章加密AI 摘要
文章介绍用 hexo-blog-encrypt 为 Hexo 文章设置密码,涵盖单篇配置、按标签统一加密,以及通过 Front-matter 豁免或覆盖密码。随后说明旧 Shoka 主题的适配方式,包括从原始正文生成目录、解锁前隐藏目录和添加加密标记,并指出单纯隐藏目录仍可在页面源码中看到其内容。
作者重启Hexo静态博客后,为保护隐私文章,采用hexo-blog-encrypt插件实现文章加密。文章介绍了插件安装、Front-matter配置、基于tag的全局加密,以及利用优先级实现单篇豁免或自定义密码。随后针对Shoka主题,通过修改模板解决解密后目录不显示的问题,并添加加密图标提示。整体分享了Hexo文章加密的完整实践与主题适配经验。
作者介绍了在 Hexo 静态博客中实现文章加密的方法。通过安装 hexo-blog-encrypt 插件,可在文章 Front-matter 中设置 password 加密,也可在 _config.yml 中按 tag 做全局加密配置。利用“文章配置优先于全局配置”的特性,可将 password 设为空字符串以豁免某篇文章的加密,或设置自定义密码。针对 Shoka 主题的适配,作者解决了加密文章解密后目录不显示的问题(改用 page.origin 生成目录),并通过折中方案实现解密前隐藏目录、解密后显示的效果,还为文章元数据添加了加密图标显示。
终于又重启博客了,平时开发折腾过程中遇到的一些问题,感觉不错的会发布到博客中。 但是有些文章如果存在隐私内容,或者不打算公开的话,就不能放在博客中了,但是一些文章挂在网页上又可以方便自己查看,于是折腾了下 的文章加密 以前用 的时候,也折腾过类似的需求,由于是 动态网站,所以其实还是比较方便的,这一次使用了 这个 静态博客 框架,说实话我都怀疑有没有可行的方案🤣🤣🤣 不过好在还是找到了一个 插件 能够实现文章加密的需求 使用如下命令安装 该插件的使用也很方便,使用时只需要在文章的 添加 即可。 下面展开讲一些比较实用的设置,更详细的可以查看官方文档。 D0n9X1n/hexo-blog-encrypt: Yet, just anot…
- 基于GitHub Pages + Hexo搭建个人博客基于GitHub Pages + Hexo搭建个人博客AI 摘要
文章面向个人博客搭建,先比较静态与动态博客的特点,再介绍 Git、Node.js 和 Hexo 的安装、目录初始化、依赖配置与本地预览。随后讲解主题安装、Git 部署插件、GitHub Pages 仓库及页面设置,并以自定义域名为例说明 DNS 解析流程,串联从本地写作到公开访问的步骤。
文章介绍 Hexo 静态博客框架及搭建教程。先对比静态与动态博客,指出 Hexo 省心、省钱、速度快、利于 SEO,但缺动态功能、维护成本较高;随后讲解环境准备,包括安装 Git、Node.js、Hexo CLI,初始化博客并执行 clean、generate、server 三连预览;再说明安装 butterfly 等主题、配置部署插件并发布到 GitHub Pages,最后介绍绑定腾讯云或阿里云域名并做 DNS 解析。
Hexo 是一个快速简洁的静态博客框架,可将 Markdown 文件按主题解析生成静态网页。相比动态博客,它省心省钱、速度快、利于 SEO,但缺少机动性且维护成本较高。文章介绍了 Hexo 博客的完整搭建流程:安装 Git 和 Node.js,用 npm 安装 hexo-cli,初始化博客目录并安装依赖,通过“Hexo 三连”(clean、generate、server)本地预览,安装 butterfly 等主题美化界面,最后创建用户名.github.io 仓库,安装 hexo-deployer-git 插件部署到 Github Pages,还可购买域名并配置 DNS 解析,实现用自定义域名访问博客。
是一个快速、简洁且高效的博客框架。 使用 (或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。即把用户的 文件,按照指定的主题解析成静态网页。 简单点说 就是一个博客的框架,就好比盖房子需要的框架结构一样,这是博客搭建起来的基础,最后装修好(各种主题)就完成了。 博客框架基本可以划分为 静态博客 和 动态博客 两个阵营, 这儿主要从 静态博客 和 动态博客 的优劣进行对比, 其他的基本属于框架本身带来的特性对比, 这个到对应官网查看描述自行比对即可 优势 是一个静态博客框架, 除了其附加的易于管理,易于编辑和发布的特性之外, 还具备静态网站的所有优势 省心: 不用担心黑客入侵 省钱: 占用空间小, 纯 文件, 每个…
