Artalk 评论邮件模板美化
前言 最近博客换上了 Artalk 评论系统，不知道大家有没有发现。感觉 Artalk 默认的邮箱通知模版感觉不够好看。刚好之前在糖果屋 🍬 群文件中发现了店长的 twikoo 信笺样式通知邮件模板，于是我就把它移植过来了。 Dome 正文 1. 在 data/mail_tpl 中新建 MAIL_TEMPLATE.html 文件为，为以下内容 其中 mail_tpl 文件夹默认不存在，需自行新建 <head> <base target="_blank" /> <style id="scrollbar" type="text/css"> ::-webkit-scrollbar{width:0!important}pre{white-space:pre-wrap!important;word-wrap:break-word!important;*white-space:normal!important}pre{white-space:pre-wrap!important;wo ...
国内外文件传输平台推荐
前言 在日常生活中或在工作，或多或少都会有一些跨设备和跨地区的文件传输需求。一般小文件可以使用 QQ、微信等聊天工具传输即可，但如果遇到大的文件，就会被限制传输，如果用网盘的话可能会遇到注册，限速等问题。下面推荐一些文件传输平台，可根据自己的需求选用。 1. Wormhole 链接：https://wormhole.app/ 说明： 文件最大可达 10 GB 有中文页面，无需注册登录就可以分享文件，并且最大支持 10G，且最多 24 小时或者 100 次下载之后文件就会被清空。并且网站最大的特色则是采用端对端加密，上传文件之后会先进行加密处理，当加密处理完成之后会进行上传，在文件没有完全上传结束时，下载的一方就可以通过分享的链接开始下载文件，实现即传即下。 2. 文叔叔 链接： https://www.wenshushu.cn/ 说明：游客上传容量为 5G，登录后 40G 一款号称永不限速的云存储产品。有传文件、收文件、网盘，还支持历史记录等高级功能。 3. 互传（局域网互传） 下载：http://es.vivo.com.cn/down 网盘下载：https://u ...
Typescript学习笔记
笔记来自于尚硅谷课程 尚硅谷TypeScript教程（李立超老师TS新课）https://www.bilibili.com/video/BV1Xy4y1v7S2/ 第一章 快速入门 0、TypeScript 简介 TypeScript 是 JavaScript 的超集。 它对 JS 进行了扩展，向 JS 中引入了类型的概念，并添加了许多新的特性。 TS 代码需要通过编译器编译为 JS，然后再交由 JS 解析器执行。 TS 完全兼容 JS，换言之，任何的 JS 代码都可以直接当成 JS 使用。 相较于 JS 而言，TS 拥有了静态类型，更加严格的语法，更强大的功能；TS 可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS 代码可以编译为任意版本的 JS 代码，可有效解决不同 JS 运行环境的兼容问题；同样的功能，TS 的代码量要大于 JS，但由于 TS 的代码结构更加清晰，变量类型更加明确，在后期代码的维护中 TS 却远远胜于 JS。 1、TypeScript 开发环境搭建 下载 Node.js 64 位：https://nodejs.org/dist/ ...
图片无损放大工具推荐
图片模糊不清晰的问题相信大家都遇到过。由于压缩、截图等原因，表情包、图片传来传去，越来越糊，慢慢变得和打了“马赛克”一样。 有时我们只有分辨率低、尺寸小、模糊不清的 N 手图片，又找不到清晰的高分辨率原图怎么办呢？这时候就需要「图片无损放大利工具」出场了 1. 佐糖 地址： https://picwish.cn/image-enlarger 官网介绍：使用人工智能深度学习技术，将放大后的图片噪点和锯齿部分进行补充，实现画质高清。针对放大后图片的线条、颜色、网点等，采用特殊算法处理，增强图片细节。其中不光有图片无损放大功能，还有图片去水印等等。并且有 Windows，macOS，iOS，Android 端。 并且所有服务完全免费 2. Bigjpg - AI 人工智能图片无损放大 地址： https://bigjpg.com/ 说明：文件大小 ≤ 10MB，尺寸 ≤ 3000x3000px 免费版可将图片放大 2~4 倍，可选择不同程度的图片降噪，升级后最大放大 16 倍。支持 Windows、Mac 和 安卓客户端使用。 3. waifu2x 地址： https: ...
为你的网站添加灯笼样式
前言 最近又要到一年一度的春节了，之前在网上冲浪时看到很多网站挂上了灯笼，我也趁着这个机会水一篇文章，代码会放在下面 Dome new MiniSandbox({ el: '#my-sandbox', files: { 'index.html': { defaultValue: ` .deng-box { position: fixed; top: -40px; right: -20px; z-index: 1999; } .deng-box1 { position: fixed; top: -30px; right: 30px; z-index: 1998; } .deng-box2 { position: fixed; top: -40px; left: -20px; z-index: 1999; } .deng-box3 { position: fixed; top: -30px; left: 30px; z-index: 1998; } ...
Butterfly 主题 的 PWA 实现方案
简介 PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。 PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，其目的是通过各种 Web 技术实现与原生 App 相近的用户体验。 纵观现有 Web 应用与原生应用的对比差距，如离线缓存、沉浸式体验等等，可以通过已经实现的 Web 技术去弥补这些差距，最终达到与原生应用相近的用户体验效果。 PWA 的功能 手机应用配置(Web App Manifest) 可以通过 manifest.json 文件配置，使得可以直接添加到手机的桌面上。 离线加载与缓存(Service Worker+Cache API ) 可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。 消息推动与通知(Push&Notification ) 实现实时的消息推送与通知 数据及 ...
dns-prefetch、prefetch、preload、defer、async 字段的区别
1、dns-prefetch 域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。 <link rel="dns-prefetch" href="//baidu.com" /> 2、prefetch prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时候加载 prefetch 的资源。 <link rel="prefetch" href="http://www.baidu.com/" /> 3、preload 和 prefetch 不同，prefecth 通常是加载接下来可能用到的页面资源，而 preload 是加载当前页面要用的脚本、样式、字体、图片等资源。所以 preload 不是空闲时加载，它的优先级更强，并且会占用 http 请求数量。 <link rel="preload" href="style.css" as="style" /> as 值包括 script style image media doc ...
双拼语法介绍以及选择
「双拼」是一种基于拼音的输入方案，相比全拼，有着击键次数少、打字节奏感强的特点，而且简单易学，根据个人经验，一般练习一个月可达到熟练水平，三个月可超过全拼时 20% 的输入速度 （以全拼 60 字/分钟计算）。 和我们常用的全拼，以及传说中的五笔一样，双拼也是一种输入方法，并不是某款输入法软件。和全拼一样，主流操作系统自带的输入法都支持双拼。 我们先来复习下拼音。绝大多数拼音都是由一个声母加上一个韵母组成（少数没有声母，仅由韵母组成）。 声母： b p m f d t n l g k h j q x zh ch sh r z c s w y 韵母： a o e ai ei ao ou an en ang eng ong i ia ie iao iou(iu) ian in iang ing iong u ua uo uai uei(ui) uan uen(un) uang ueng(eng) ü üe(ue) üan(uan) ün(un) 双拼把声母和韵母都映射到键盘的某个按键上，一个字只需要击键两次，一次声母，一次韵母。例如“双”，输入时只需要按一次 sh 对应的键和一次 uang ...
为你的Butterfly添加顶部加载进度条
Dome 进度条为胶囊💊样式 4.5.0 版本4.5.0 版本主题已内置 pace.js 无需再次引入，在 hexo-theme-butterfly文件中配置以下内容即可 preloader: enable: true # source # 1. fullpage-loading # 2. pace (progress bar) source: 2 # pace theme (see https://codebyzach.github.io/pace/) pace_css_url: https://fastly.jsdelivr.net/gh/xlenco/JS-X@main/pace.js/pace.css 如果你同时在使用 Heo同款loading动画，请查看 Heo同款loading动 4.5.0 版本以下 引入 css .pace { pointer-events: none; user-select: none; ...
笔记｜HTML
说明 记录一些我用到的 HTML 的语法 跳转 URL 1. <html> <head> <meta http-equiv="refresh" content="0;URL=Your Url"> </head> </body> </html> 2. <script>location.href="Your Url";</script> <script>windows.location.href = "Your Url"</script> 图片更改大小 <img src="img.jpg" width="150" height="150">