Transfer-jpg-to-webp

source/_posts/Configure-blog-domain.md

@@ -12,25 +12,25 @@ tags:
 类型 选择 CNAME，主机记录填写你的域名，比如 `example.com`，
 值填写 `用户名.github.io`，比如 `mobeicanyue.github.io`。
 
-![domain-record.jpg](/images/Configure-blog-domain/domain-record.jpg)
+![domain-record.webp](/images/Configure-blog-domain/domain-record.webp)
 
 ### 2. 在 github 仓库中配置域名
 
 进入你的仓库，点击 `settings`，左边栏，找到 `Pages`，在 `Custom domain` 中填写你的域名，比如 `example.com`，然后点击 `Save`。
 
-![set-domain.jpg](/images/Configure-blog-domain/set-domain.jpg)
+![set-domain.webp](/images/Configure-blog-domain/set-domain.webp)
 等待 dns 检查，很快就好了。
-![wait-dns.jpg](/images/Configure-blog-domain/wait-dns.jpg)
+![wait-dns.webp](/images/Configure-blog-domain/wait-dns.webp)
 访问你的域名，比如 `example.com`，就可以看到你的博客了。
-![blog.jpg](/images/Configure-blog-domain/blog.jpg)
+![blog.webp](/images/Configure-blog-domain/blog.webp)
 此时可以注意到在 gh-pages 分支中多了一个 CNAME 文件，这个文件内容就是我们刚刚配置的域名。
 但是按照之前的配置，每次 github action 部署的时候，都会把这个文件给覆盖掉，所以我们后面需要修改一下配置。
-![CNAME-file.jpg](/images/Configure-blog-domain/CNAME-file.jpg)
+![CNAME-file.webp](/images/Configure-blog-domain/CNAME-file.webp)
 
 ### 3. 修改 hexo 配置文件
 在 hexo 的配置文件 `_config.yml` 中，找到 `url`，把 `url` 改成你的域名，比如 `https://example.com`。
 
-![url.jpg](/images/Configure-blog-domain/url.jpg)
+![url.webp](/images/Configure-blog-domain/url.webp)
 
 ### 4. 修改 Github Actions 自动部署
 由于我们之前那种写法，在 github action 部署到 github pages 的时候，会把 CNAME 文件给覆盖掉，所以我们需要修改一下 github action 配置。

source/_posts/Fix-article-updated-time-on-github-pages.md

@@ -9,10 +9,10 @@ tags:
 
 ### 1. 问题起因
 我开启了 fluid 配置的
-![fluid-config.jpg](../images/Fix-article-updated-time-on-github-pages/fluid-config.jpg)
+![fluid-config.webp](../images/Fix-article-updated-time-on-github-pages/fluid-config.webp)
 
 但是在部署到 github pages 时，`hexo 并不会像我们本地运行那样，显示的是文章的更新时间，而是显示的是部署的时间。` 换句话说，你所有文章的更新时间都全部定格在 github actions 最新部署的那个时间（难绷）。
-![error-time.jpg](../images/Fix-article-updated-time-on-github-pages/error-time.jpg)
+![error-time.webp](../images/Fix-article-updated-time-on-github-pages/error-time.webp)
 
 我们可以在 `front-matter` 加入 `updated: 更新时间` 解决
 ```yaml

source/_posts/Init-my-first-hexo-blog.md

@@ -31,19 +31,19 @@ tags:
 
 ### 1. 新建 `用户名.github.io` 仓库
 
-![gh-create-repo1.jpg](/images/Init-my-first-hexo-blog/gh-create-repo1.jpg)
+![gh-create-repo1.webp](/images/Init-my-first-hexo-blog/gh-create-repo1.webp)
 
 记住这串 `仓库的ssh地址` 后面要用到
-![ssh-link.jpg](/images/Init-my-first-hexo-blog/ssh-link.jpg)
+![ssh-link.webp](/images/Init-my-first-hexo-blog/ssh-link.webp)
 
-![gh-create-repo2.jpg](/images/Init-my-first-hexo-blog/gh-create-repo2.jpg)
+![gh-create-repo2.webp](/images/Init-my-first-hexo-blog/gh-create-repo2.webp)
 
 ### 2. 部署你的 ssh 私钥 到仓库变量中
 
-![deploy-key1.jpg](/images/Init-my-first-hexo-blog/deploy-key1.jpg)
+![deploy-key1.webp](/images/Init-my-first-hexo-blog/deploy-key1.webp)
 
 填入你的私钥
-![deploy-key2.jpg](/images/Init-my-first-hexo-blog/deploy-key2.jpg)
+![deploy-key2.webp](/images/Init-my-first-hexo-blog/deploy-key2.webp)
 
 ### 3. 初始化 hexo 博客目录
 
@@ -54,7 +54,7 @@ tags:
 hexo init mobeicanyue.github.io && cd mobeicanyue.github.io
 ```
 执行结果如下
-![init-hexo.jpg](/images/Init-my-first-hexo-blog/init-hexo.jpg)
+![init-hexo.webp](/images/Init-my-first-hexo-blog/init-hexo.webp)
 
 ### 4. 初始化 git 仓库并提交到 github
 
@@ -64,7 +64,7 @@ git add .
 git commit -m "Initial commit"
 ```
 执行结果如下
-![init-git.jpg](/images/Init-my-first-hexo-blog/init-git.jpg)
+![init-git.webp](/images/Init-my-first-hexo-blog/init-git.webp)
 
 把下面 git@xxx 地址换成你仓库的 ssh 地址
 
@@ -73,31 +73,31 @@ git remote add origin [email protected]:mobeicanyue/mobeicanyue.github.io.git
 git push -u origin master
 ```
 执行结果如下
-![git-push.jpg](/images/Init-my-first-hexo-blog/git-push.jpg)
+![git-push.webp](/images/Init-my-first-hexo-blog/git-push.webp)
 
 此时我们刷新一下 github 仓库，就可以看到我们的代码已经提交上去了
 但是网页第一次构建肯定是失败的（打叉），因为还没配置 github action
 
-![github-code.jpg](/images/Init-my-first-hexo-blog/github-code.jpg)
+![github-code.webp](/images/Init-my-first-hexo-blog/github-code.webp)
 
 ### 5. 新建 gh-pages 分支并将其设置为 pages 的默认部署分支
 
 点击分支
-![new-branch1.jpg](/images/Init-my-first-hexo-blog/new-branch1.jpg)
+![new-branch1.webp](/images/Init-my-first-hexo-blog/new-branch1.webp)
 创建 gh-pages 分支
-![new-branch2.jpg](/images/Init-my-first-hexo-blog/new-branch2.jpg)
+![new-branch2.webp](/images/Init-my-first-hexo-blog/new-branch2.webp)
 设置 gh-pages 为 pages 的默认部署分支
-![set-branch.jpg](/images/Init-my-first-hexo-blog/set-branch.jpg)
+![set-branch.webp](/images/Init-my-first-hexo-blog/set-branch.webp)
 
 
 ### 6. 编写 github actions 代码
 
 1) 修改 _config.yml 文件的 repo 改成你仓库的 ssh 地址
-![config.jpg](/images/Init-my-first-hexo-blog/config.jpg)
+![config.webp](/images/Init-my-first-hexo-blog/config.webp)
 
 2) 在 hexo 博客文件夹的 .github 目录创建 deploy.yml 文件
 
-![new-file.jpg](/images/Init-my-first-hexo-blog/new-file.jpg)
+![new-file.webp](/images/Init-my-first-hexo-blog/new-file.webp)
 
 下面的代码只需要修改你的用户名和邮箱
 
@@ -149,12 +149,12 @@ jobs:
 <br>
 
 3) 最后提交代码并推送
-![commit-push.jpg](/images/Init-my-first-hexo-blog/commit-push.jpg)
+![commit-push.webp](/images/Init-my-first-hexo-blog/commit-push.webp)
 
 ### 7. 访问站点，部署成功！
 地址为 `https://用户名.github.io`
 
-![success.jpg](/images/Init-my-first-hexo-blog/success.jpg)
+![success.webp](/images/Init-my-first-hexo-blog/success.webp)
 
 <br>
 <br>

source/_posts/Modify-theme.md

@@ -18,7 +18,7 @@ npm install --save hexo-theme-fluid
 然后在博客目录下创建 _config.fluid.yml，将主题 [_config.yml](https://github.com/fluid-dev/hexo-theme-fluid/blob/master/_config.yml) 内容复制过去。
 
 现在目录下有这三个 yml 文件：
-![yml-files.jpg](/images/Modify-theme/yml-files.jpg)
+![yml-files.webp](/images/Modify-theme/yml-files.webp)
 
 可删除 `_config.landscape.yml` , 它是 hexo 默认的主题文件。
 
@@ -58,7 +58,7 @@ hexo clean && hexo g && hexo s -o
 
 后访问 `http://localhost:4000/about/` 即可看到效果。
 
-![ablout.jpg](/images/Modify-theme/about.jpg)
+![ablout.webp](/images/Modify-theme/about.webp)
 
 PS: 可以跟着文档把关于页面的几个 icon 一起改了。
 
@@ -84,7 +84,7 @@ apple_touch_icon: images/favicon.png
 
 ### 6. 修改 slogan 为 api 语录
 效果如图所示：
-![api-slogan.jpg](/images/Modify-theme/api-slogan.jpg)
+![api-slogan.webp](/images/Modify-theme/api-slogan.webp)
 
 在主题配置 `_config.fluid.yml` 中开启：
 ```yml
@@ -105,7 +105,7 @@ index:
 既然可以改 slogan 为 api 语录，那么背景图片当然也可以改为 api 图片 笑）。
 
 效果如图所示：
-![api-bg.jpg](/images/Modify-theme/api-bg.jpg)
+![api-bg.webp](/images/Modify-theme/api-bg.webp)
 
 在主题配置 `_config.fluid.yml` 中搜索
 ```yml

source/_posts/Transfer-jpg-to-webp.md

@@ -0,0 +1,42 @@
+---
+title: 将 jpg 转换为 webp
+date: 2023-12-28 00:25:25
+tags:
+---
+> 本文主要介绍如何将 Jpg 转换为 WebP。
+> 为什么要转换为 WebP 呢？因为 WebP 图片通常比 JPEG 图片更小，同时保持相似的视觉质量。也是现代浏览器支持、推荐使用的图片格式之一。
+
+### 1. 安装 cwebp
+
+archlinux 系列的
+```bash
+sudo pacman -S libwebp
+```
+### 2. 转换
+我编写了一个脚本，可以将当前 `images` 目录下的所有 jpg 文件转换为 webp 文件。
+遍历所有文件夹并将图片转换为 WebP 格式。
+```bash
+# 使用 find 命令遍历所有子文件夹中的图片文件
+find images -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -exec sh -c '
+  for file do
+    # 获取文件的相对路径和文件名
+    relpath=$(dirname "$file")
+    filename=$(basename "$file")
+
+    # 使用 cwebp 将图片转换为 WebP 格式并保存到当前目录
+    cwebp "$file" -o "${relpath}/${filename%.*}.webp"
+
+    # 删除原始图片文件已注释, 建议先在测试环境中运行一下再放到代码仓库中运行
+    # rm "$file"
+  done
+' sh {} +
+```
+可以看到确实图片体积减少很多，但是由于这张图片清晰度有点低，所以压缩后画质当然也不高。
+![compare.webp](/images/Transfer-jpg-to-webp/compare.webp)
+
+### 3. 更改博客中的图片链接
+
+vscode 或者别的 ide 批量替换你用到的 markdown 图片链接，将 .jpg 替换为 .webp 即可。
+![replace.webp](/images/Transfer-jpg-to-webp/replace.webp)
+
+> 在部署博客之前，记得先在本地测试一下，看看是否有问题。

source/_posts/Use-lxgw-wenkai-in-fluid.md

@@ -17,10 +17,10 @@ tags:
 
 其中 [chawyehsu](https://github.com/chawyehsu/lxgw-wenkai-webfont) 提供了打包，但是点进去仓库发现已经有半年没更新了。在 issue 的下面我们可以看到 [CMBill](https://github.com/CMBill/lxgw-wenkai-gb-web) 提供了一个新的打包，我的就是这个打包。
 
-在 [CMBill](https://github.com/CMBill/lxgw-wenkai-gb-web) 的仓库 README 中右键跳转 css 看看内容 ![style.css.jpg](/images/Use-lxgw-wenkai-in-fluid/style.css.jpg)
+在 [CMBill](https://github.com/CMBill/lxgw-wenkai-gb-web) 的仓库 README 中右键跳转 css 看看内容 ![style.css.webp](/images/Use-lxgw-wenkai-in-fluid/style.css.webp)
 
 可以发现这个 css 是分了几个不同的字体种类，还有不同的霞鹜文楷变体可供选择
-![font-css.jpg](/images/Use-lxgw-wenkai-in-fluid/font-css.jpg)
+![font-css.webp](/images/Use-lxgw-wenkai-in-fluid/font-css.webp)
 将 `style.css` 替换为 `@import url` 之后的内容（去掉./），就可以直接使用了
 
 我最终选择了 `lxgwwenkaigb-bold` 这个字体，这个字体阅读起来比较舒服。
@@ -42,4 +42,4 @@ custom_js:
 custom_css: https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-gb-web/fonts/lxgwwenkaigb-bold/result.css
 ```
 ### 3. 效果展示
-![效果](/images/Use-lxgw-wenkai-in-fluid/result.jpg)
+![效果](/images/Use-lxgw-wenkai-in-fluid/result.webp)