Lolipop's Studio.

Lolipop's Studio.

how about groping lights through young ages

为 Archer 主题更换字体

看腻了原先的字体,亦或是想满足独树一帜的设计欲望?不妨更换一下博客的字体吧!本文将基于 Hexo 和主题 Hexo-Theme-Archer 展示如何更换博客的中文字体。

引入字体文件

这里提供两种引入的思路,一种是 CDN 引入,一种是本地引入。建议通过 CDN 的方式引入,可以大大提高加载效率。

引入 CDN 字体文件

以更换字体为思源黑体(Google 字体上叫 Noto Sans,Adobe 版本叫 Source Han Sans)为例,考虑到中文站点面向的读者在国内,无法直接下载思源黑体这款 Google 字体,因此考虑通过 CDN 的方式引入它。据笔者测试,目前有这四个 CDN 站点可以提供稳定的服务:

使用基于 Docker 的 Nginx 部署静态网页项目

现在,我已经安装了 Docker,并拉取了 Nginx 的镜像。除此之外,我也购买了域名,完成了备案,并且为域名配置了 SSL。一切准备就绪,那么我该怎么将我的静态网页项目在 Linux 主机上通过 Nginx 部署,最终实现域名访问呢?

本文以部署我的个人博客页面为例,介绍如何使用基于 Docker 的 Nginx 部署静态网页项目。

准备静态网页项目

为了更方便管理网页项目,可以在主机根目录下新建一个目录,例如 www

1
2
3
sudo -i # 切换为管理员用户
cd /
mkdir www

现在,我已经有了一个完整的静态网页项目——我的个人博客。我的个人博客基于 Hexo,其中代码放在 source 分支,生成的静态网页文件放在 master 分支。首先通过 git 命令将静态网页文件克隆下来:

在 Euler 系统上离线安装 MySQL 5.7

查看系统 OS 及架构

以 Euler 系统为例,在终端上输入命令查看,可以通过 rpm -qa | grep euleros-release 命令找到 rpm 包,再通过 rpm -qi ${包名} 查看系统 OS 及架构信息:

1
2
3
4
5
6
7
8
[root@lolipop ~]# rpm -qa | grep euleros-release
euleros-release-2.0SP5-13.eulerosv2r7.x86_64
[root@lolipop ~]# rpm -qi euleros-release-2.0SP5-13.eulerosv2r7.x86_64
Name : euleros-release
Version : 2.0SP5
Release : 13.eulerosv2r7
Architecture: x86_64
......

当然,也可以使用通用的 uname -a 命令。

当前系统为 Euler 2.0 (SP5),处理器架构为 x86_64。

下载 MySQL

漫谈 JavaScript 类(Class)的使用

类(Class)是用于创建对象的模板,他们用代码封装数据以处理该数据,是面向对象编程方法的重要特性之一。JavaScript 中的 class 语法在 ES6 中引入,其底层实现基于原型(Prototype),系原型继承的语法糖(Syntactic Sugar)。

本博文将探讨 JavaScript 中如何使用类的相关知识,文章组织架构和内容基于 MDN 上关于类的章节

定义类

类可以被看作一种“特殊的函数”,和函数的定义方法一样,类的定义方法有两种:类声明类表达式

第一种方法是,直接使用 class 关键字声明类,即类声明的方法。

1
2
3
class User {
//
}
漫谈 JavaScript 闭包

JavaScript 中有一个叫作闭包(Closure)的概念,非常有趣且适用,值得学习并整理为一篇博客。

为了更好理解闭包的作用,不妨看看我的这一篇博客关于 JS 变量提升(Hoisting)和函数提升现象的阐述。

作用域

在 JavaScript 中,作用域(Scope)是当前代码执行的上下文,也即是值和表达式在其中可访问到的上下文。

  • 如果一个变量或其它表达式不在当前作用域中,就会沿作用域链(Scope Chain)往父作用域搜索。如果也仍未找到它的话,那么它就是不可用的。
  • 最顶级的父作用域是全局对象。
  • 父作用域不能引用子作用域中的变量和定义。

目前,作用域有三种:全局作用域函数作用域,以及 ES6 新增的块级作用域

漫谈 JavaScript 变量提升和函数提升

在 ES6 规范出现之前,使用 JavaScript 声明变量只有 var, function 以及隐式声明三种方式。

按照一般编程的思维,我们会通过“先声明,后调用”的方式去使用变量,例如:

1
2
var a = 3;
console.log(a); // 3

但假如反过来,我们“先调用,后声明”,会发生什么呢?

1
2
3
4
5
console.log(a); // undefined
var a = 3;
console.log(a); // 3

console.log(b); // Uncaught ReferenceError: b is not defined

如上所示,在声明变量 a 之前尝试将它的值打印出来,控制台输出的结果是 undefined,而不是预期中的报错 Uncaught ReferenceError: a is not defined。这就是变量提升

函数防抖和节流,以及在 Vue 中的运用

在前端性能优化中存在一个老生常谈的问题:如何优化高频率执行的 JS 代码?例如:

  1. 我们为浏览器滚动 scroll 绑定了监听事件,当滚动到某位置之下后,会在浏览器右下方显示一个点击后能快速回到页面顶部的浮动按钮;而滚动回该位置之上时,浮动按钮消失。现在我们发现,用户每次使用滚轮滑动页面,都会触发很多次该事件,判断当前在该位置之上还是之下,这在一定程度上降低了前端的性能。
  2. 我们为网页添加了搜索功能,当用户输入搜索关键字后,会自动显示出搜索的结果。但是,用户每次更改输入都立即调用后端进行了搜索,彼时用户可能尚未输入完关键字,亦或是关键字输入错误需要修改。这样搜索出来的结果并非用户希望看到的,同时还降低了前端性能,浪费了大量的服务器资源。

针对上述列举的问题,我们应该怎么做,才能在优化前端性能的同时不至于影响到用户的体验,便是本文探讨的内容。

函数节流

函数节流(Throttle),指在触发事件后的一定时间内绑定的函数只能执行一次。

函数节流的实现思路比较简单,例如使用 setTimeout 方法实现:由于 setTimeout 方法的返回值是一个正整数,表示定时器的编号,所以可以利用闭包的方法维护一个定时器编号。每次触发事件时都通过定时器编号判断当前是否有尚未到期的定时器,如果有则结束,如果没有则启用一个定时器。定时器到期后调用绑定的需要节流的函数,并设置定时器编号为空,表示可以启用一个新的定时器。代码如下:

Windows 系统编译安装基于 C++ 的 gRPC

本博客基于 CMake 实现编译 gRPC 1.28.1 版本。

本博客的 Windows 端使用的命令提示符界面为 Powershell。

安装编译依赖软件

在 Windows 系统上编译 gRPC 需要首先准备下述软件:

  • Visual Studio 2015(或 2017),将使用到 Visual C++ compiler
  • Git
  • CMake
  • nasm
  • ninja(可选)

Visual Studio 2015 (或 2017)

Linux 系统编译安装基于 C++ 的 gRPC

本文适用于 C++ 版本 gRPC 的离线编译安装,但对于下载 gRPC 步骤强烈建议使用 git 进行。

如果在能直接连接外网的机器上编译,可直接按照 gRPC 官网文档的指引快速执行编译操作。

安装基本依赖

确保机器上包括这些基本依赖:autoconf, libtool, pkg-config 与 C++ 编译环境。

1
2
3
4
5
6
7
8
# 检查是否有 autoconf
which autoconf

# 如果没有,则安装
# CentOS
yum install autoconf
# Ubuntu
apt-get install autoconf

gRPC 的编译需要 gcc 版本在 4.9 及以上。假如版本低于此,应当在 Docker 容器中安装较新版本的 GCC 再执行编译操作。

avatar
Lolipop
Make them happen.
FRIENDS
Bill Chen