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

  in   tech with  4  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. 还不错。

    Reply
  2. 123

    123

    Reply
  3. @v

    谢谢

    Reply
  4. v

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

    Reply