公告
图像识别 根据封面图主色调更改博客主题颜色
在项目中，比如想让轮播图周围颜色和轮播图本身主色调颜色相同。那么就要用到简单的图像识别技术，强大的 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 选项，仅显示信息但不下载，如： ...
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' ...
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 ...
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 文 ...
GitHub Action 自动构建并发布项目
GitHub Action 利用 CI/CD 持续集成，自动构建并发布项目 编写代码12345678910111213141516171819202122name: DEPLOY CIon: push: branches: - masterjobs: build_and_deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 - name: Install dependencies run: sudo npm install hexo-cli -g && npm install && hexo clean && hexo s - na ...
Butterfly 主题 404 页面增加最近文章
页面有时候会时效或者用户输入不存在的 url 地址，那么网站就会出现无法访问，也就是 404。butterfly 主题存在 404 页面处理，但是过于简单，参考张洪大佬的网站，可以给 404 页面加上最近文章的展示，从而增强用户观感和粘性。 修改主题文件地址：themes/butterfly/layout/404.pug 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849- var top_img = theme.error_404.background || theme.default_top_img- var bg_img = `background-image: url('${url_for(top_img)}')`d ...
Butterfly 主题自定义首页文章卡片高度
列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措，例如文章置顶。但是文章置顶多了就会看不见新文章，置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的，丰富层次。 这个文章的核心思路就是给文章的 markdown 文件里添加一个 large 参数，当 large=true 时，则文章会添加一个 class。然后针对这个 class 进行 css 的调整。让我们开始吧。 修改主题文件地址：themes/butterfly/layout/includes/mixins/post-ui.pug 12345mixin postUI(posts) each article , index in page.posts.data if article.hide !== true- .recent-post- ...
滚动条在不滚动时自动隐藏，滚动时自动显示
影响页面流畅度，本博客主题已弃用 引入 css新建一个 css 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件 123456789101112131415161718192021222324/* 滚动条 */*::-webkit-scrollbar{ width: 8px; height: 8px;} *::-webkit-scrollbar-thumb{ background: var(gray); border-radius: 8px; cursor:pointer;}*::-webkit-scrollbar-thumb:hover{ opacity: 1; display: block!important;}*::-webkit-scrollbar-t ...
给页面增加顶部加载进度条
Pace 将自动监视您的 Ajax 请求，事件循环滞后，文档就绪状态以及页面上的元素，以决定进度。 如果使用 AMD 或 Browserify，则需要 step.js 并 pace.start() 在加载过程中尽早进行调用。 Pace 主题 GitHub 地址：前往查看 加载样式：前往查看 主题使用在主题下的 _config.yml 文件中 1234567inject: head: ... - <link rel="stylesheet" href="/realwds/realwds.css"> bottom: ... - <script src="https://fastly.jsdelivr.net/gh/CodeByZach/pace@1.2.3/pace.min.js"& ...
公告
有问题评论留言，微信不解答问题，添加请注明来意。
