公告
Butterfly魔改
网站整站变灰,用于哀悼
杂交水稻之父袁隆平去世,网站特此全站变灰,以示哀悼。 修改配置文件文件地址:themes/butterfly/_config.yml,若使用无污染方式引入 butterfly,则在项目根目录 _config.butterfly.yml 12+ # 网站变灰 + grayTheme: true # true && false 修改主题文件地址:themes/butterfly/layout/includes/layout.pug 1234567- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''- var hideAside = !theme.aside.enable || page.aside = ...
Git相关
博客部署从 Vercel 到 GitHub Page
看到标题,肯定有小伙伴想,好一波反向操作。 但是最近 vercel 解析的域名访问太不给力了,经常崩,体验极差。 我能怎么办,我也很绝望啊! 思前想后,还是 Github Page 稳如老狗啊,虽然对国内而言速度有点慢,但是还可以,毕竟考虑到咱的博客也是要面向世界的 (一本正经滑稽脸) 前因后果由于我的源码没有公开,所以只想把产物给展示出来,推送到一个新的仓库,具体操作可以查看 《Github Action 将构建产物自动推送到令一个仓库》 的文章,当然对于 hexo 也可以用 deploy 进行跨仓库产物提交。 但是有一个问题就是,我的源码里存在很多路径问题,所以不能放到除 realwds.github.io 的其他仓库。也就是只能放到主仓库,可是我的主仓库已经有了内容,并且解析好了,不是很想动。 组织账号!没错,个人可以新建组织,组织账户的主仓库也可以搞,这就解决了我必须要提交到主仓库 ...
CSS
CSS 常用知识点回顾
隐藏元素 display: none; 会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden; 不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见。 display: none; 是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden; 是继承属性,子孙节点消失由于继承了hidden,通过设置 visibility: visible; 可以让子孙节点显式。 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。 读屏器不会读取 display: none; 元素内容;会读取 visibility: hidden; 元素内容。 盒模型页面渲染时,dom 元素所采用的布局模型。可通过 box-sizing 进行设置。根据计算 ...
JavaScript
JavaScript 常用知识点回顾
内置类型 JS 中分为七种内置类型,七种内置类型又分为两大类型:基本类型和对象(Object)。 基本类型有六种:null,undefined,boolean,number,string,symbol。 其中 JS 的数字类型是浮点类型的,没有整型。并且浮点类型基于 IEEE 754 标准实现,在使用中会遇到某些 Bug。NaN 也属于 number 类型,并且 NaN 不等于自身。 对于基本类型来说,如果使用字面量的方式,那么这个变量只是个字面量,只有在必要的时候才会转换为对应的类型。 12let a = 111 // 这只是字面量,不是 number 类型a.toString() // 使用时候才会转换为对象类型 对象(Object)是引用类型,在使用过程中会遇到浅拷贝和深拷贝的问题。 1234let a = { name: 'FE' } ...
工具相关
免费 CDN 优化网站(CloudFlare)
单纯供国内用户用,不建议使用。 CloudFlare 是一家美国的跨国科技企业,总部位于旧金山,在英国伦敦也设有办事处。CloudFlare 以向客户提供网站安全管理、性能优化及相关的技术支持为主要业务。通过基于反向代理的内容传递网络及分布式域名解析服务,CloudFlare 可以帮助受保护站点抵御包括拒绝服务攻击在内的大多数网络攻击,确保该网站长期在线,同时提升网站的性能、访问速度以改善访客体验。 注册账号官网地址 添加网站注册网站后,添加域名,注意添加域名不带 www 的域名。 添加 DNS 记录添加域名完成后会自动扫描,解析的所有域名 DNS 记录,等待扫描完成即可。 选择加速站点扫描完成后可以选择要加速的站点,点击后面的黄色云朵进行切换。也可以自定义添加要加速的域名。 更换 DNS 服务器前往域名服务商更改 DNS 服务器。 修改完成后,点击继续开启一些配置后,出现下图表示配 ...
Butterfly魔改
图像识别 根据封面图主色调更改博客主题颜色
在项目中,比如想让轮播图周围颜色和轮播图本身主色调颜色相同。那么就要用到简单的图像识别技术,强大的 js 中就有这样的库供我们使用,接下来让我们一探究竟。 1.rgbaster.jsgithub地址 提取图片的主色、次色。 引入 rgbaster.js 文件,开始使用。 1234567891011121314const img = document.querySelector('img');// 或者// const img = 'http://example.com/image.jpg';RGBaster.colors(img, { // 调色板大小,就是提取的样本,越大越精确,同时性能越差 paletteSize: 30, // 颜色排除 exclude: [ 'rgb(255,255,255)', ...
工具相关
youtube 视频下载神器(youtube-dl)
youtube-dl 是一个命令行程序,可以从 YouTube.com 和其他一些网站一样下载视频。它需要 2.6、2.7 或 3.2+ 版本的 Python 解释器,并且它不是特定于平台的。它应该可以在您的 Unix 机器,Windows 或 macOS 上运行。它已发布到公共领域,这意味着您可以随意修改,重新分发或使用它。 安装12345# macOS 系统:brew install youtube-dl# windows 系统:scoop install youtube-dl 使用1234567891011121314# 使用youtube-dl [OPTIONS] URL [URL...]# 无选项,直接下载视频,默认是最高清晰度,如:youtube-dl https://www.youtube.com/watch?v=-wNyEUrxzFU#-i 选项,仅显示信息但不下载,如: ...
Git相关
miniprogram+GitLab CI/CD 实现微信小程序代码自动上传
利用 GitLab CI/CD 持续集成,并结合微信小程序 miniprogram-ci 编译模块,实现代码自动上传,解决了平时要通过微信开发者工具手动上传的痛点。 代码编写miniprogram-ciminiprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。官方地址文档地址 1234567891011121314151617181920212223242526272829303132const ci = require('miniprogram-ci')let version = process.argv.slice(2)[0] //接收命令行传入版本参数let desc = process.argv.slice(3)[0] //接收命令行传入描述参数if (!version) version = 'v1.0.0' ...
Git相关
GitHub Action 将构建产物自动推送到另一个仓库
有一个自有的私密仓库,我不想让别人看到源代码,只是想把产物展示出来。从而想到用 GitHub Action 的 CI/CD 持续集成,将产物自动推动到另一个仓库。 编写代码123456789101112131415161718192021222324252627name: Deploy to GitHub Pageson: push: branches: - masterjobs: deploy: name: Deploy to GitHub Pages runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: Use Node.js uses: actions/setup-node@v1 with: node-v ...
Git相关
GitHub Action 三合一网站部署
在 github 一端提交代码,代码自动提交到 github、gitlab、gitee 平台。并自动部署到对应的 git page 上,主要利用 github action 的持续集成。 注册账号首先注册三个平台的账号,最好用户名相同。 获取私人令牌在三个平台分别得到私人令牌,添加到新建仓库的 Actions secrets 中。 github 私人令牌获取方法,点开右上角头像。setting => Developer settings => Personal access tokens gitee 私人令牌获取方法,点开右上角头像。设置 => 私人令牌 gitlab 私人令牌获取方法,点开右上角头像。Preferences => 访问令牌 新建 github 仓库在代码根目录新建 .github 文件夹,在 .github 目录中新建 workflows 文 ...