部署

还以为买个域名点点点就完事了没想到这么麻烦。。。。。从 git page 开始疯狂踩坑，迫不得已转战 Vercel，不得不说真的方便，就是有个致命的问题

（凌晨四点 git page 你害我害的好苦啊你为什么就是不肯加载 css 样式我心里有事）

vercel 一键部署

特别伟大的发明，直接绑定开发仓库跟分支就可以了，push 新代码直接自动部署，还送你一个免费域名，怎么就被墙了你说说

DNS 解析异常

世界上没有困难的工作只有努力的小狗！于是转战阿里云，买完域名 just 痛苦的开始，实名认证完发现 dns 解析永远 clientHold 😎 -> 😭

域名 quelennui.cn，无法解析您的域名注册商为 Alibaba Cloud 无法解析的原因为域名状态为 clientHold，处于该状态的域名会被暂停解析。解决方法您需要联系域名注册商解除该状态，请您重新选择“域名”产品进行咨询推荐您参考以上信息，其与工程师提供的内容一致。

两天尝试未果还是提了工单

认证完后把域名过户就可以啦，dns 解析正常

好！！！！配置转发开始！！！！！

Cloudflare 配置

阿里云配置

vercel 配置

在 vercel 配置域名

最后

会出现重定向次数太多导致页面加载错误的问题，解决方式就是在 cloudflare 设置 SSL/TLS 加密模式

很认真的查了一下国内的域名布在国外服务器需不需要进行 ICP 备案，既然香港服务器都可以，那为什么我们。。。。

结论是不用！至少现在是不用！我白手持身份证拍了张神似入狱照的照片了！

上线

鼠标样式适配黑夜模式

效果来自如何打造一款乖巧的鼠标指针特效

今天一切黑夜模式傻眼了。。。第一次体会到了这么有层次的黑。。。。。黑背景黑鼠标您是怎么想的呢。。。。。

问题不大，开始改造！

这个鼠标样式是由一个 svg 图片作为 cursor，一个半透明圆形追着跑（）实现的

先改圆形，在 #cursor 选择器中使用 var(--cursor-color) 来引用这个自定义属性：

#cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  /* 匹配暗夜模式 */
  background: var(--cursor-color);
  border-radius: 8px;
  opacity: 0.25;
  z-index: 10086;
  pointer-events: none;
  transition: 0.2s ease-in-out;
  transition-property: background, opacity, transform;
}

在 .light 类和 .dark 类中定义一个 --cursor-color 自定义属性，Tailwind 的颜色工具函数 theme() 可以用来来获取颜色值

.light {
  --cursor-color: theme('colors.black');
}

.dark {
  --cursor-color: theme('colors.white');
}

svg 图片的稍微麻烦一点，在代码中是这么引入的（好长）

this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' fill='black' opacity='.5'/></svg>") 4 4, auto}`

首先还是需要配置该主题下对应的颜色

.light {
  --cursor-color: theme('colors.black');
  --svg-color: #000;
}

.dark {
  --cursor-color: theme('colors.white');
  --svg-color: #fff;
}

在 SVG 数据 URL 中使用 fill 属性和 var() 函数来引用这个自定义 CSS 变量，例如

document.body.appendChild((this.scr = document.createElement('style')))
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' fill='var(--svg-color)' opacity='.5'/></svg>") 4 4, auto}`

切换了一下，发现没有反应……

有反应才怪了吧！你都不需要判断一下主题是否切换了吗！

这个博客框架提供了一个自定义 hookuseTheme()来获取当前的主题颜色，我们就可以根据这个值是否发生变化来动态切换鼠标的颜色

const { theme } = useTheme()

//主题变了鼠标也得变颜色
useEffect(() => {
  const color = theme === 'light' ? 'black' : 'white'
  if (cursorRef.current) {
    //   fill='${color}'，必须写单引号
    cursorRef.current.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' fill='${color}' opacity='.5'/></svg>") 4 4, auto}`
  }
}, [theme])

然后就可以了！

鼠标颜色异常 again

今天又发现了新的问题，在暗夜模式下，页面刷新后，鼠标的颜色会被重置为黑色（也就是默认状态），因为挂载时的代码并不会获取当前主题再进行判断

useEffect(() => {
  cursorRef.current = new Cursor()
}, [])

这一看多简单，封装下 changeColor 函数刷新后重新改变下就可以了

useEffect(() => {
  cursorRef.current = new Cursor()
  changeColor()
}, [])

但是 😅

问题不大，拿刚学的 useCallback 包一下，useCallback Hook 会返回一个记忆化的版本的 changeColor 函数，它只在 theme 变化时改变。因此当依赖项可以修改为 changeColor，changeColor 变了说明 theme 就变了

import { useCallback, useEffect, useRef } from 'react'

// ...

const changeColor = useCallback(() => {
  const color = theme === 'light' ? 'black' : 'white'
  if (cursorRef.current) {
    cursorRef.current.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' fill='${color}' opacity='.5'/></svg>") 4 4, auto}`
  }
}, [theme])

useEffect(() => {
  changeColor()
}, [changeColor])

useEffect(() => {
  cursorRef.current = new Cursor()
  changeColor()
}, [changeColor])

这下，即使在黑夜模式下刷新也会获取到正确的颜色，正当我准备提代码时：

这样写每次 change 都是 new 一个 Cursor 啊！

问题不大。。。。再来次逻辑判断。。。。。考虑的还是太少了！

useEffect(() => {
  if (!cursorRef.current) {
    cursorRef.current = new Cursor()
  }
  changeColor()
}, [changeColor])

随机图片固定

封面图是从picsum.photos/搞的，只要传入picsum.photos/200/300，输入图片尺寸就给你随机请求一张图片

但是同一 url 的图片是相同的，也很好解决，picsum.photos/200/300?ran…随便传个参数就行

图片加载异常

开发环境看着可美了一看线上环境轻轻破防了。。。。我图呢我这么大个图呢 😅

既然是线上才会出问题那八成是 webpack 有点毛病，看一下配置

哦原来是路径配错了。。。。我的叫 images。。。。那确实是打包不了。。。。。

但是图片作为静态文件保存的话确实很麻烦，图片多了打包体积也会变大，请求的话还得搞个云，结果在 github 上发现了很天才的主意

上传到掘金！

千辛万苦来到卓拉领地

目录

部署