使用 serve 配合 openssl 或 mkcert 创建本地自签名可信任的证书 - 创建本地 TLS\SSL https 协议服务
serveserve 可以快速启动一个静态网站或 SPA 应用，或只是静态文件服务，可在本地或局域网内使用 使用安装 pnpm install -g serve 启动服务，默认端口 3000 # 当前目录启动静态文件服务 serve # 指定目录启动 serve ./public # 指定端口 serve -p 8080 启动 SPA 应用服务，例如 React 或 Vue 中的 history 模式 # 在当前目录 build 文件启动服务 serve -s build serve -s dist 启动 SSL\TLS 服务 --ssl-cert：证书路径 --ssl-key：证书密钥路径 serve --ssl-cert cert.pem --ssl-key key.pem # or serve --ssl-cert ~/ssl/cert.pem --ssl-key ~/ssl/key.pem 创建本地 SSL 证书opensslwindows 系统需要自行安装 # -nodes: No DES 加密 # -days...
【CSS】解决在 flex 容器中使用 align-content 或 justify-content 属性 center 居中时的溢出滚动和截断问题 - 理解 safe 关键字
场景在布局时，我们经常使用 flex 来实现居中效果。例如下图场景，可能是平时比较常见的，列表中的子元素居中效果。 <style> .flex-wrap { display: flex; align-items: center; justify-content: center; width: 300px; height: 150px; & > div { width: 100px; height: 80px; } } </style> <div class="flex-wrap"> <div>1</div> <div>2</div> </div> 当 flex 容器限制了宽度，且内容不够 flex 元素分配时，此时 flex 元素将会溢出容器。 使用 overflow出现上述情况时，可能第一反应是给 flex 容器添加 overflow-y: auto...
【React Router】v6 data router 在非组件（或工具方法）中如何优雅的跳转路由
上集回顾如果你还在 v5 ？那么恭喜你：【React Router v5】在非组件（或工具方法）中如何优雅的跳转路由 在 data router 中如何优雅的跳转路由？因为 router 对象返回了 navigate 方法，所以可以直接调用 // history.js export const routes: ReturnType<typeof createBrowserRouter> = createBrowserRouter([ { path: '/', element: <Home />, }, { path: '/login', element: <div>login</div>, }, ]); // Home.js import { routes } from '../history.tsx'; const Home = () => { return ( <div> ...
在 github actions 中获取时间，并转换为中国标准时间（中国时区）
使用 GITHUB.ENV 存储时间变量建议将时间变量存入至 GITHUB.ENV 中，方便后续 step 中使用 - name: set time run: | TIME="$(TZ='Asia/Shanghai' date +'%Y-%m-%d %H:%M:%S')" echo "TIME=$TIME" >> $GITHUB_ENV TZ='Asia/Shanghai' 为 中8 时区，可选时区： 哈尔滨 （ Asia/Harbin） 长白时区GMT+8:30上海（Asia/Shanghai） 中原标准时区 GMT+8重庆（Asia/Chongqing） 陇蜀时区GMT+7乌鲁木齐（Asia/Urumqi） 新藏时区GMT+6喀什（Asia/Kashgar） 昆仑时区GMT+5:30 使用- name: some step run: echo $env.TIME - name: use actions uses: some...
eslint 9.x 升级或使用指南，eslint.config.js 配置，包含 react、typescript、prettier 等常用配置升级迁移
前言距离 9.0 版本发布已经两个多月了，主流框架或者工具基本都已经适配，一起来体验新版本吧~ Breaking Changes简单列举大家可能会遇到的 change，详情查看官方 release note 不再支持 Node v19.x 和 LTS18.18.0 版本名词解释： LTS：Long-Term Support 是 Node 的长期支持版本（维护和安全更新），通常每隔两年发布一次，特点是稳定和可靠性，建议生产使用。 非 LTS（current）：是 Node 的最新开发版本，通常每隔几个月发布一次，包含最新的功能和实验特性，缺乏稳定性。 Flat 配置文件取代 eslintrc 配置新版 eslint.config.{js,cjs,mjs} 已经取代了 .eslintrc 配置文件，如果你是“怀旧派”可以将你的环境变量 ESLINT_USE_FLAT_CONFIG 设为 false，但 Implement Flat Config...
在 Hexo 中使用 AI（Gemini Pro）生成文章摘要，支持自定义模板。hexo-ai-summaries 插件文档（默认适配主题 Butterfly）
前言还在前言？？？帮 AI 快速总结嘛？哈哈~ 本文为 hexo-ai-summaries 插件文档，插件主要功能是帮你插入 AI Html 至文章中，至于 Html 内容可自定，默认内容为适配 Gemini 和主题 ButterFly。 部署 Gemini 服务获取 Gemini Pro API KEY进入 https://ai.google.dev/ 跟随官网描述即可。 部署 API ProxyGoogle PaLM API 限制使用区域，你需要部署中转服务 使用 Netlify 部署，进入 palm-netlify-proxy，点击 Deploy to Netlify Netlify 注册繁琐？你可能会因为 Netlify 的身份验证而停止了此教程，再提供个方案，好好看下去~ 使用阿里云的 serverless (云函数) 反向代理 AI 服务（理论大部分 AI 服务都可使用） - nginx serverless 部署 Gemini OpenAI Proxy这一步为可选，完成上面部署即可使用了。使用 赛博菩萨...
解决从 docker desktop 内镜像 linux 创建的容器，启动就停止、无法启动等问题（无进程容器）
小白向，好几年没操作了，纯坤了~~~ Version: Docker -v => 26.0.0 Docker Desktop => 4.29.0 结论快进到结论。 容器必须有个前台进程，如果没有前台进程执行，容器认为空闲，就会自行退出。 解决方法自己手动创建并携带以下参数 run 时增加 -itdocker run -it -d python:3.9 run 时增加 sleep infinitydocker run -d python:3.9 sleep infinity docker desktop 案例 由上分析，桌面端的 docker 由官方镜像直接创建的容器命令没有保活且无运行进程，例如 linux ...
docker（docker desktop）中设置国内镜像源加速（阿里云、中科大），以及代理和容器代理设置，解决桌面端无法登陆就退出问题
Version: Docker -v => 26.0.0 Docker Desktop => 4.29.0 设置国内镜像加速创建或修改 /etc/docker/daemon.json 文件 $ vi /etc/docker/daemon.json { "registry-mirrors": ["http://hub-mirror.c.163.com", "https://docker.mirrors.ustc.edu.cn"] } # 重启 $ systemctl restart docker.service 国内镜像源 官方 CN 镜像：https://registry.docker-cn.com 中国科技大：https://docker.mirrors.ustc.edu.cn 网易：http://hub-mirror.c.163.com 阿里云：https://your_id.mirror.aliyuncs.com 阿里云容器镜像服务（没有则创建）=> 镜像工具...
【CSS】解决移动端（高清方案）下在谷歌浏览器中出现 字体大小布局异常，和设置的 font-size 不符（Text Autosizer、Font Boosting）
最近在谷歌浏览器调试移动端高清方案时，发现设置的字体大小竟然和实际显示的字体大小不一致？可以移动端 ua 打开此页面测试下方 demo。fontSize => 设置字体大小；actualSize => 实际展示字体大小 .font-boosting-wrap { } .font-boosting { } .font-boosting li { /*font-size: 22px;*/ } .font-boosting-size-wrap { font-size: 16px; /*text-size-adjust: none;*/ } .font-boosting-button { /*font-size: 22px;*/ } li 的 fontSize: fontSize: actualSize: auto set text-size-adjust ...
【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has
目前 Css 关于逻辑选择器：:not、:is、:where、:has，除了 :has 比较新以外，其他选择器在一些 UI 库中都有广泛的使用，浏览器基本都已经支持了，一起卷起来，使用更先进的选择器~ :notMDN: :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 <ul class="css-selectors selector-not"> <li>1</li> <li>2</li> <li>3</li> </ul> .selector-not { li:not(:first-child) { border: 1px solid red; } } .css-selectors { margin: 20px auto; width: 50%; border: 1px solid #000; } ...
最新文章
