Anyaerの部落格

前言 GitHub Actions 是 GitHub 推出的可用于自动化构建，测试和部署项目的平台，可以通过创建工作流来自动化，自定义和执行软件开发工作流程. GitHub Actions 的具体用法有很多，本文仅介绍如何利用它来实现对 Hexo 项目的自动化部署. 准备工作 本地已搭建好 Hexo 项目 创建一个 GitHub 仓库用于存储你的 Hexo 项目源码 创建一个 GitHub 仓库用于存储生成的静态页面文件 (如未主动创建，则Github会将生成的静态文件推送到项目源码的master分支) 代码12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182name: 自动部署 # 当有改动推送到master分支时，启动Actionon: push: branches: - main release:...

🎨前言gulp可以自动压缩资源，配合插件能够压缩css、js、html和各种格式的图片文件。（图片压缩只能节省几十K，使用Tinypng效果更好些 🎨安装 博客根目录打开终端运行 12npm install --global gulp-cli #全局安装gulp指令集npm install gulp --save #安装gulp插件 安装各类下属插件 HTML 123npm install gulp-htmlclean --save-devnpm install gulp-html-minifier-terser --save-dev# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法 CSS 1npm install gulp-clean-css --save-dev JS 1npm install gulp-terser --save-dev 字体包 📢 font-min仅支持压缩ttf格式的字体包 1npm install gulp-fontmin --save-dev 在博客根目录新建gulpfile.js,粘贴...

📌注:文章转载自 Markdown超级教程 Markdown 是一款轻量级标记语言，不同于HTML (Hypertext Markup Language)，Markdown 的语法非常简单，且容易上手 Markdown 以 纯文本格式 编写文档，依赖键盘而非鼠标，专注于写作本身，感受书写的魅力 Markdown 的通过添加一些简单的 标识符，让文本具有恰到好处的格式 Markdown 核心特征就是 删繁剪芜， 简扼 + 精炼 Markdown 是 笔记 与 网页文章 的最佳载体 Down 的核心：坐 下 来，就能把思维写 下 来 牛津高阶英汉双解词典第九版 中，关于 down 的释义： 为什么要使用 Markdown?有朋友问我 ，Markdown 的效果 用Word 完全可以复现，甚至功能更多，那为何要用 Markdown 呢？ 答： 功能多，不一定是好事 功能一多，选择就会变多，然后你会开始纠结…… 这个字号是不是该大一点呢？ 这个颜色好像有点不太搭呢？ 这个粗体，是不是该再加点颜色呢？ 这个图片的位置看起来有点不大对劲呢？ 结果，写了半天，就憋出一点点东...

直接在custom.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; ...

无需修改主题源码 获取访客地图的html代码登录ClustrMaps 点击Create Your Widget 输入自己的域名 随便选择一种 复制这一串代码 创建 widget.yml在blogroot/source/_data/新建widget.yml文件 1234567bottom: - class_name: user-map id_name: user-map name: 访客地图 icon: fas fa-heartbeat order: html: #刚刚复制的html代码 运行hexo三连

添加CSS样式 颜色可改为自己喜欢的样式 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419...

更新 更新autopublish.yml文件，原流程会报错 创建GitHub图床仓库1.创建一个新仓库用于存放图片，复制仓库链接 2.在本地合适的位置打开终端，将刚才创建的仓库克隆下来 npm配置1.注册一个npm账号 2.在克隆下来的文件夹下打开终端，输入以下命令切换回原生源 1npm config set registry https://registry.npmjs.org 3.添加npm本地访问 1234# 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱npm adduser# 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱npm login 4.这里运行npm初始化指令，把整个图床仓库进行打包，按照指示进行配置，注意需要事先确认你的包名没有和别人已发布的包重复 1npm init 5.输入命令将包发布到npm上 1npm publish 6.由于在国内访问无响应，这里就要使cdn进行加载，使你的访问速度提升，访问jsdelivr官网，获取链接。 1234# jsDelivr+github链接https://...

🚦采用自定义css方式实现，无需更改主题文件 创建css文件在[Blogroot/source/css/新建custom.css文件 将以下代码写入刚创建的文件中悬停卡片效果1234#recent-posts>.recent-post-item:not(a):hover { box-shadow: 0 5px 15px rgba(0,0,0,.4); transform: scale(1.05);} 卡片擦亮效果123456789101112131415#recent-posts > .recent-post-item:not(a)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: linear-gradient(to right, transparent, white, transparent); transform: translateX(-...

🎨前言 使用 ECharts 开源可视化库对博客的文章发布时间、文章分类、文章标签的维度绘制统计图 🎨创建charts页面使用命令行创建手动创建 21hexo new page charts在 [Blogroot]\source\ 目录下新建 charts 文件夹，并在新建的 charts 文件夹下新建 index.md 文件，添加以下内容： 12345---title: 文章统计type: chartsdate: 2023-07-15 14:00:00--- 🎨使用统计图 在index.md中添加以下内容 123456<!-- 文章发布时间统计图 --><div id="posts-chart" data-start="2021-01" style="border-radius: 8px; height: 300px; padding: 10px;"></div><!-- 文章标签统计图 --><div id="tags-chart"...

在Blogroot/source/js文件夹下新建cursor.js文件,将代码粘贴进去 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283var CURSOR; Math.lerp = (a, b, n) => (1 - n) * a + n * b; const getStyle = (el, attr) => { try { return window.getComputedStyle ? window.getComputedStyle(el)[attr] : el.currentStyle[attr]; } catch (e) {} re...