使用 GitHub Action (一键部署)
此教程参考 🧊Akilar の糖果屋 🍭,转载需注明出处。
Github Action简介
Github Action是 GitHub于2018年10月推出的一个CI\CD服务。
CI\CD解释
CI\CD 其实说的是三件事情:「持续集成(Continuous Integration)」、「持续交付(Continuous Delivery)」、「持续部署(Continuous Deployment)」。因为「持续交付」和「持续部署」的英文缩写是一样的,所以这三件事情缩写成了 CI\CD 。
每次部署Hexo都需要运行指令三件套,随着文章越来越多,编译的时间也随之越来越长,通过Github Action,我们只需要在每次完成博客的编写或修改以后,将改动直接push到远程仓库,之后的编译部署的工作统统交给CI来完成即可,如果是看过Coding部署教程的小伙伴,应该对这种持续部署的操作有所感触。
教程常量声明
感谢@YML 的反馈。以下将使用特定的常量名来指代一些名词。此 ...
使用PS去除图片水印
PS在电脑里吃灰太久,以至于前段时间帮别去除图片中的一些文字内容花了不少时间去复习,在这里记录一下,以防止之后在笨头笨脑的去百度,本教程可以通过PS去除图片中的一些比较简单的文字和水印。我这里使用的PS版本是2018,其他版本可能会有一些不同
最终效果
未去除水印
使用本教程方式去水印
创建选区
首先使用矩形选框工具框选水印
点击选择->色彩范围
因为图片的水印是纯色的,所以我们在取色状态下点一下要去除水印的颜色。通过调整颜色容差让预览框的水印部分为白色,其他内容为黑色。
确定之后进入快速蒙板模式
使用快速蒙板调整选区的阈值
阈值调整之后点击确定,调整阈值的目的为了让选区的半透明像素变成纯色像素
确认之后取消蒙版模式,因为图片水印是有一个阴影,我们需要扩展一下选区,扩展选区的数值在3-5左右即可
内容识别填充
编辑 -> 内容识别填充 填充水印,快捷键shift+F5
点击确认之后的效果
按ctrl+D取消选区,就的到去除完水印的图片了
什么是CDN
到底什么是CDN
如今这个移动互联网时代,越来越多的人使用手机观看视频,丰富自己的娱乐生活。
可是,大家在追剧的时候,有没有想过一个问题——为什么有时候明明自己手机的网速很快,但观看视频时,仍然卡顿?
回答这个问题之前,我们先来做一道算术题。
以之前很火的电视剧为例,当时曾经在某视频APP实现了1千万用户同时在线观看。
如果大家观看的是1080p清晰度的视频(理论上需要4Mbps带宽),那么,累计需要的流量带宽是10,000,000×4Mbps=40,000,000Mbps=40Tbps。
对于优酷、爱奇艺这样的互联网视频内容提供商来说,这无疑是非常巨大的流量压力。我们普通计算机的网卡,是1Gbps的带宽。如果优酷有一台超级服务器,那么,这台超级服务器就需要4万块网卡,而且必须百分之百跑满速度,才能够实现这1千万用户的流畅观看。
对于一些实力不够的服务商,或者突发流量陡增的情况,就会造成拥塞,从而导致卡顿和延时。
有这么一个说法:当用户打开一个页面,等待超过4秒,他就会关闭这个页面。也就是说,这个用户就会流失。
用户的流失,就意味着金钱的流失。
没有任何一家互联网服务提供商希望这样的 ...
目前免费可用的CDN
推荐几款目前免费可用的CDN
jsdelivr
https://cdn.jsdelivr.net/npm
unpkg
https://unpkg.com/
unpkg 自建
https://cdn.cbd.int
npm element
http://npm.elemecdn.com/
cdn1.tianli0.top
https://tianli-blog.club/jsd/ 处申请
cdn.afdelivr.top
https://cdn.afdelivr.top/npm/包名@版本号/文件名
https://arcitcgn.cn/202.html
其他 CDN
bootcdn
https://www.bootcdn.cn/
loli (cdnjs)
https://cdnjs.loli.net/
Staticfile
https://staticfile.org/
75CDN
https://cdn.baomitu.com/
今日头条 CDN
https://cdn.bytedance.com/
cdnjs
https://cdnjs.com/
字节跳动
https://cdn ...
butterfly控制特定图片懒加载
方法一
可以使用 css 的background属性而不使用 img 标签,就可以做到启动器变成对应的 css,从此排除懒加载的影响。
1234.loading-img { background: url("") no-repeat center center; background-size: cover;}
方法二
虽然 css 的方式可以做到排除但是这并不是我们所预期的,我们需要 img 标签且如果有多个特定图片需要指定不太好写 css,于是就产生了方案二。
我们观察butterfly对懒加载的实现可以发现,在themes/butterfly/scripts/filters/post_lazyload.js中第11行左右的lazyload方法中替换了所有的img标签的src属性,所以我们可以通过修改正则表达式来匹配,以达到我们的目的
预期:给图片添加上 class 为nolazyload时不使用懒加载
代码修改themes/butterfly/scripts/filters/post_lazyload.js,将 lazyload 方法修 ...
Hexo主题配置
主题配置
写法解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键词
comments 【可选】显示页面评论模块 (默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax (当设置mathjax的per_page: false时,才需要配置,默认 false)
katex 【可选】显示katex (当设置katex的per_page: false时,才需要配置,默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的 配置音樂
highlight_shrink 【可选】配置代码框是否展开 (true/false) (默认为设置中hig ...
Hello World
欢迎来到 Hexo! 这是你的第一篇文章. 查看 documentation 更多信息. 如果你在使用Hexo时遇到任何问题, 你可以在里面找到答案或者你可以在上面问我 troubleshooting 或者你可以在上面问我 GitHub.
快速启动
创建一个新帖子
1$ hexo new "My New Post"
更多信息: Writing
运行服务器
1$ hexo server
更多信息: Server
生成静态文件
1$ hexo generate
更多信息: Generating
部署到远程站点
1$ hexo deploy
更多信息: Deployment
博客快捷键
shift K
关闭快捷键功能
shift A
打开中控台
shift M
播放/暂停音乐
shift ←
上一首音乐
shift →
下一首音乐
shift D
深色/浅色显示模式
shift S
站内搜索
shift R
随机访问
shift H
返回首页
shift F
友链鱼塘
shift L
友链页面
shift P
关于本站
shift I
原版右键菜单