emengweb 's Blog

参考

• https://hostloc.com/forum.php?mod=viewthread&tid=821711&extra=page%3D7
• https://github.com/helloxz/onenav

Steps

mkdir -p /data/onenav && cd /data/onenav
docker run -d --name="onenav" -p 9680:80 \
    --restart always \
    -e USER='onenav' -e PASSWORD='LH2Gk' \
    -v /data/onenav:/data/wwwroot/default/data \
    helloz/onenav
docker logs -f onenav

多个安装宝塔面板的服务器，经常遇到计划任务中的Let's Encrypt证书自动续签失败，单独手动续签却能正确下发证书的问题，查阅相关资料后，得出以下解决方案：

1. Let's Encrypt证书自动续签任务，会自动创建目录/www/server/panel/vhost/ssl，如遇到提示自动续签失败的项目，可将此目录下面的对应的域名目录删掉。
2. 再进入此目录/www/server/panel/vhost/cert/，找到已经不需要SSL证书的网站名，删除对应目录。
3. 进入【站点】-【SSL】-【关闭】点击【关闭】按钮，禁用掉不需要申请证书的站点。

做完以上两部之后再执行续签操作，就不会再出错了。

如果还不能正常续签，删除续签计划任务，重新添加计划任务后再执行续签。

计划任务内容为：

续签Let's Encrypt证书

每天0点10分执行

/www/server/panel/pyenv/bin/python -u /www/server/panel/class/acme_v2.py --renew=1

• 一般需要登陆账号付费购买，并且会员还不便宜，淘宝单次购买比较划算
• 这里直接从控制台抓取道客巴巴文档，存为png格式图片，可以根据自己的需求转化为PDF
  

直接打开浏览器控制台，输入以下脚本：

function downloadPages(from, to) {
    for (i = from; i <= to; i++) {
        const pageCanvas = document.getElementById('page_' + i);
        if (pageCanvas === null) { break; }
        const pageNo = parseInt(String(i));
        setTimeout(() => {
            console.log("==pageNo==>>", pageNo);
            ((num) => {
                console.log("开始打印第" + num + "页");
                pageCanvas.toBlob(
                    blob => {
                        const anchor = document.createElement('a');
                        anchor.download = 'page_' + num + '.png';
                        anchor.href = URL.createObjectURL(blob);
                        anchor.click();
                        URL.revokeObjectURL(anchor.href);
                    }
                );
            })(pageNo);
        }, 500 * pageNo);
    }
}

downloadPages(page_from, page_to); 例如打印第3~5页即输入downloadPages(3, 5);

• 图片会由浏览器直

关于 HCL 颜色的介绍, 以前在有个文章里看到过:
产品配色2.0：使用HCL 色彩空间替代HSL 生成配色- 二三事
以前关于 HSL 的介绍, 说的是 HSL 比 RGB 更符合人们的视觉,
https://cdc.tencent.com/2011/05/09/色生心中：人性化的HSL模型/
由于 HSL 的几个数值是色相/饱和度/亮度, 容易增减来调色,
可是按照开头的 HCL 文章介绍, HSL 颜色也存在问题,git

颜色的区别

为了清楚展现问题, 我作了一个工具来展现色环 http://tools.mvc-works.org/color-ring/
其中 HSL 模式, S 取, 100, L 取 61, 效果看起来是这样,
能够看到黄色的区域很是亮, 蓝色就显得比较暗.github

固然这个颜色也是合理的, 蓝色原本就是不耀眼的一种颜色.
HSL 跟直接跟 RGB 颜色对应的, 对应到蓝色的像素的亮度.
用 HSL 的话, 生成颜色也算比较方便, 改变其中一个参数就好.web

不过, HCL 认为, HSL 的亮度 L 其实有问题,
当 L 颜色一致的时候, 颜色的亮度应该是基本一致的,
也就是蓝色对应的统一个 L, 在相对的区域, 颜色的亮度应该大致一致,
用 HCL 渲染出来 L=61 就是这样子, 固然黄色已经看不到了,npm

若是要从 HCL 当中显示黄色, 我调了一下, L 须要调整到 91,
这个时候蓝色的区域也被提高得很亮, 是接近白色的浅蓝色了,mvc

若是是 HSL 当中 L=91, 看一下效果, 这些颜色已经都接近白色了,工具

这也包含了 HCL 的一个区别, 就是 L=100 对应的并非白色,
在 HCL 当中 C=0, L=100 才能调出白色.spa

代码计算

当前 demo 实现参考 https://github.com/worktools/color-ring
颜色基色使用的是 https://www.npmjs.com/package/d3-color

d3.hcl(h, c, l_[, opacity])

能够比较快的建立一个 HSL 颜色, 而后再转换到其余的颜色格式,code

color.formatHex()
color.formatRgb()
color.formatHsl()

另外一个模块还有 chroma-js, 也能够进行转换, 可是我这边没有深刻用.
初步感

对于一套图标来说，能让用户记得住，源于图标的与众不同；而能让用户觉得有专业感，其实是源于图标的整齐划一。图标设计本身也有自己一套规范，在设计图标的过程中遵循一定规范去工作，不仅可以使图标看起来更美观，而且还可以体现出设计师的专业和价值。作者在本文中以1024px下的设计规范给出详细的说明和解释，欢迎大家讨论。

很多设计平台都推荐设计师在 1024 X 1024px 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。例如 Ant Design 给出的图标绘制网格规定：

关于图标设计，你大概也有思考过这样的问题：

• 为什么图标要使用 1024 X 1024px 的网格进行绘制？
• 设计页面的时候，如果需要的图标大小是 16 X 16px，为什么不推荐直接使用 16 X 16px 的网格绘制图标呢？

对于这类问题，本文解答如下 ——

1 . 可以「精确」绘制细节

下面这张图你可以很清楚的看到网格的用法：图中放大的圆圈中的一个蓝色的小方格是 32 X 32 px，也就是说，这个蓝色小方格里面还是一个 32 X 32 的格子盘：

你可以想象，当你在绘制一个图标时，其实是在一个布满了小格子的纸上进行绘制，这样做我们在绘制图标的时候可以很精确，每一个圆角的大小、每一根线条的粗细、每一个斜线的角度等等，都有严格的数量规范，以确保图标造型的统一和精确。

关于图标的精确规范，我们以 Ant Design 的图标系统中的部分细节规范为例：

（1）圆角：

圆角的规格采取 8 的倍数原则，最常用的尺寸是 3 种，分别是 8px、16px、32px，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角（0px）的处理方式。

（2）点的直径：

点是非常常用的元素。Ant Design 对于点的尺寸选择上会保持 16 的倍数这一原则。在点的选择中常用四种尺寸，分别为 80px、96px、112px、128px。当出现特殊尺寸的需求时，会按照 16 的倍数进行延展。

（3）线宽：

Ant Design 的线条宽度之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56px、64px、72px、80px。

你会发现，在 16 X 16px 的画板中肯定是可以画出来图标的，只是图标的形状并不是单一的圆形或是方形，一旦出现多种样式的线和点，你是无法精确控制绘制的规律的。

当然，1024px 也