XIN.

最近博客做了一些调整，主要增加了暗黑模式、迁移到 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

因为博客原本部署的服务器经常要做一些测试和调整，每次环境变化时都需要重新设置，比较麻烦，所以一直在找能省心、省钱托管 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 的免费流量。

本文由 lscho 创作，采用知识共享署名4.0国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 07 27, 2020

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