博客迁移到 serverless、增加暗黑模式

  in   tech with  7  comment

最近博客做了一些调整,主要增加了暗黑模式、迁移到 serverless 。这里记录一下。

增加暗黑模式

由于平时一直用的浅色模式,没有注意到暗黑模式的问题。前几天偶尔切换到暗黑模式时看了一下感觉不太和谐,所以决定增加一下暗黑模式。

基础修改

通过媒体查询我们可以得知用户是否处于暗黑模式内,然后再增加相应的样式表即可。

@media (prefers-color-scheme: dark) { }

暗黑模式一般有两种做法。一种是增加滤镜,这种很快,只需要几行代码即可,但这种只能算是伪暗黑模式。另外一种就是单独写一套样式,这种可能对一些大项目来说不太现实,因为工作量比较大。但对于一个小博客来说,其实是很快的。

我们只需要把背景颜色与文字颜色修改一下,这里我定义了两种颜色用以表示层次感。

background-color: #1e1e1e!important; color: #9b9b9b!important;
background-color: #0f0f0f!important; color: #d2d2d2!important;

然后再修改一下部分文字颜色即可。最终效果如下

mWTVxu

图片处理

正常的图片在暗黑模式中会显得对比度太高,看起来很难受。所以给图片加了透明度,以减少整体对比度。

img { opacity: .75; transition: opacity .5s ease-in-out } img:hover { opacity: 1 }

滚动条处理

这是比较容易忽视的地方,大部分浏览器右边的滚动条会自动适应颜色,但是我们文章区域的滚动条是不会自动适应的,比如代码块部分。这个地方就需要我们单独处理一下。

::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background-color: #555555; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.4); background: #1e1e1e; }

代码高亮

代码高亮我用的是 highlight.js 找一套 dark 主题替换一下即可。效果如下

cpfyFC

选中效果

在暗黑模式下,浏览器默认的文字选中效果就看起来不太和谐了,我们也修改一下对应样式

::selection { background: #9b9b9b; color: #111111; }

效果如下

ZOLebe

迁移到Serverless

2021-04 更新:以下内容已失效。因腾讯云服务调整下线了[Serverless 云应用]并调整为云托管,费用太高,所以又重新搬回自己的服务器上了。

因为博客原本部署的服务器经常要做一些测试和调整,每次环境变化时都需要重新设置,比较麻烦,所以一直在找能省心、省钱托管 Node.js 项目的服务。所以最终选择了 Serverless 。

serverless 很早就有接触了,现在我仍然有一些自动化脚本运行在 Faas 上,以及一些静态网站也使用腾讯云的 Serverless Framework 上。但是腾讯云的 Faas 冷启动问题一直存在,只能单实例单并发,点击动作稍微快一点就会触发冷启动,体验不是太好。据说阿里云的 Faas 支持单实例多并发,但备案一直在腾讯云,也只能作罢。

前几天偶尔发现 Serverless 云应用 开始公测了。提供了单实例多并发,并且是常驻运行,感觉不错。与 Faas 的差异如下

zEMVXo

测试了一下感觉不错,于是就决定迁移过来。

创建 Serverless 云应用

因为是内测阶段,所以需要先申请一下,地址:https://cloud.tencent.com/product/sca ,申请完成秒通过。

然后在在控制台先开通云开发,新建一个环境,然后点击左侧的 Serverless 云应用,点击创建即可。

数据库问题

首先要解决的是数据库问题,Serverless 云应用是基于 Docker 构建的,问了客服应该是支持 mysql 的。但是我看了一下腾讯云的活动,发现腾讯 CynosDB 数据库 19.9 一年,那直接买了更方便。

买的时候要注意一下私有网络的问题,创建 Serverless 云应用时会自动创建一个 VPC 私有网络,我们的数据库实例一定要在这个私有网络内,否则内网无法互通。

代码修改

几乎无修改,代码根目录增加一个 Dockerfile 文件以及处理一下静态资源在 Faas 环境的问题即可

# https://hub.docker.com/_/node FROM node:12-slim # Create and change to the app directory. WORKDIR /usr/src/app # Copy application dependency manifests to the container image. # A wildcard is used to ensure both package.json AND package-lock.json are copied. # Copying this separately prevents re-running npm install on every code change. COPY package*.json ./ # Install production dependencies. RUN npm install --only=production --registry=https://registry.npm.taobao.org # Copy local code to the container image. COPY . ./ # Run the web service on container startup. CMD [ "node", "production.js" ]
const isFaas = process.env.isFaas; // src/config/middleware.js中修改 { handle: 'resource', enable: isDev||isFaas,// 在开发环境及Faas环境处理静态资源由中间件处理 options: { root: path.join(think.ROOT_PATH, 'www'), publicPath: /^\/(static|uploads|favicon\.ico|index\.html|admin\.html)/ } }

部署方式

Serverless 云应用控制台新建版本,上传代码包,修改服务端口为 8360 ,等待构建完成即可。

Serverless 云应用也提供了从代码仓库拉取的方式部署。有想尝试部署一下的同学可以将 https://github.com/lscho/ThinkJS-Vue.js-blog fork到自己仓库,授权Serverless 云应用拉取部署即可。注意修改数据库配置信息。

最终效果

eFx3EQ

TTFB 时间稳定在150ms左右,比之前自建的 50ms 左右略有下降。不知道这个还有没有办法再优化了。

CDN 切换到腾讯云

CDN 和对象存储原本用的是七牛,也都切换到腾讯云了。为什么?因为有一月 10G 的免费流量。

Responses
  1. nqjolihnmylwdjhjdypwvkmpfjnzuk

    Reply
  2. ytejtkgnvqmuunuupwrmgpdxssisrv

    Reply
  3. vodlytdgjgjpvxjynfxqdkzsuxnyyg

    Reply
  4. 还不错。

    Reply
  5. 123

    123

    Reply
  6. @v

    谢谢

    Reply
  7. v

    博主的博客风格不错,很简洁

    Reply