学习归档 - JokerChor | 阿楚 | chor

超细节超简单解决rem引起的页面抖动问题

JokerChor — Tue, 11 Feb 2025 02:36:06 +0000

原因：px转rem的缘故，postcss-pxtorem是在html构建完成即加载，css样式可能未加载生效。

/**
 * 判断是否是IOS客户端
 */
const isIOS = () => {
  const ua = window.navigator.userAgent || "";
  return !!ua.match(/iPhone/i);
};

/**
 * 判断是否是安卓客户端
 */
const isAndroid = () => {
  const ua = window.navigator.userAgent || "";
  return !!ua.match(/(Android);?[\s/]+([\d.]+)?/i);
};

/**
 * 判断是否是移动端
 */
const isPhone = () => {
  return isAndroid() || isIOS() || window.innerWidth <= 900;
};

const initApp = () => {
  const isPhoneValue = isPhone();
  // rem等比适配配置文件
  const baseSize = 14;
  const scale =
    document.documentElement.clientWidth / (isPhoneValue ? 750 : 2560);
  const clientHeight = document.documentElement.clientHeight;
  let scaleHeight = 2;
  if (isPhoneValue)
    scaleHeight = clientHeight / (window.innerHeight > 667 ? 1624 : 1334);

  const scaleValue = Math.min(scale, 2, scaleHeight);
  document.documentElement.style.fontSize = baseSize * scaleValue + "px";
};

解决方法：body添加属性opacity:0，在未加载完之前不显示。在onload事件中将body的opacity变成1

超细节超简单解决rem引起的页面抖动问题最先出现在JokerChor | 阿楚 | chor。

如何使用 WordPress搭建个人博客？

JokerChor — Thu, 29 Aug 2024 12:32:21 +0000

前两天我用WordPress 给自己搭建了一个网站，整个过程非常的顺利，体验非常地好，于是我就整个过程、以及其中的一些搭建心得，记录下来。

如果你也正好有搭建个人网站的想法，那么本文会给你一个参考，也许看了这篇文章你就可以不用再百度、甚至谷歌了，因为我会写得 足够的细致而系统。

1. 写在前面

1. 写在前面

说到网站，其实我搭建过挺多个了。

从最开始的 Hexo 静态博客，github静态托管页面到后来使用 Django 仿照 Hexo -Next 主题自己写了一个有后端的个人博客。

虽然有不少让我心痛的地方，但是它们却有流淌在基因里的优势：

无成本（时间成本当然不算啦）：你不需要服务器，也不需要域名。
新手友好，只要简单配置，就能立马快速上手。

好像扯远了，还是说回 WP 的网站搭建吧。

在教程之前呢，我先 show 一下我的成果，欢迎你去点点点~

网站地址：

2. 准备工作

一台 Linux 服务器

在开始搭建网站之前，当然第一步是购买一个属于自己的『服务器』。

你可以选择如下渠道进行购买：

阿里云
腾讯云
Ucloud

等的大厂服务器，不要贪图便宜去买国外的服务器厂商，因为速度很慢很多，很影响体验。

我的就是在 Ucloud 上购买的，刚开始买个最低配置的服务器就行，以后不够用了，可以慢慢升级，扩容。

一个专属的域名

买了服务器后，你就会拥有一个公网ip，如果网站搭建起来了，你完全可以使用这个 ip 去访问，但仅供开发、测试使用。

如果要真正运营起来，想要有流量，还得搞一个域名，方便你推广。

域名的购买建议和上面服务器使用同一个厂商，可以省去一些麻烦。比如Ucloud购买的域名要备案是需要你在Ucloud下有一台服务器的。

一个远程登陆软件

由于后面我使用的是手工部署的方式，所以要登陆服务器进行操作。

登陆的方法有两种：

厂商提供的控制台界面登陆：Workbench 和 VNC
自己下载专业的远程登陆软件：FinalShell 或者 CRTSecure

在使用这些远程登陆软件时，你需要在服务器厂商控制台上面先获取到三个信息

服务器公网IP
服务器SSH端口
服务器远程连接密码

关于 FinalShell 如何使用的，可以自行百度搜索，教程非常多。

2. 部署方式选择

部署方式，可分为两种

使用服务器管理软件，实现自动化部署，最著名的就是宝塔面板。
手动登陆远程服务器，实现脚本化部署。

那么如何选择呢？

使用宝塔部署，门槛低，只要会界面点一点即可。

而使用脚本自己手工部署，需要你学会

远程登陆服务器：使用 Xshell 或者直接使用厂商提供的在线SSH窗口
一些 Linux 的基本操作：比如 Vi/Vim 的使用，目录及文件的基本操作等

在这里建议大家跟着我使用第二种方法，也就是手工使用脚本进行部署。

原因有二：

第一次接触，更精细的部署步骤会让你对 WordPress 的运作方式有更深的理解，比如使用了哪些软件，装了哪些包？
自己搭建了网站，难免以后会碰到各种各样的服务器问题，尽早的接触 Linux，熟悉各项配置，对以后的运维工作会有很有帮助。

3. 部署 LNMP

3.1 什么是 LNMP

LNMP 是 Linux + Nginx + MySQL + PHP 组合的简写。

类似的组合还有：

LAMP 的全称是 Linux + Apache + MySQL + PHP
LNAMP 的全称是 Linux + Nginx + Apache + MySQL + PHP

其中：

Linux 是类 Unix 计算机操作系统的统称，是目前最流行的免费操作系统。代表版本有：debian、centos、ubuntu、fedora、gentoo 等。
Nginx 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。
Apache 是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。
PHP 是一种在服务器端执行的嵌入 HTML 文档的脚本语言。
MySQL 是一个关系型数据库管理系统。

这些软件一个一个安装比较费力，特别是数据库。

因此有人把这些软件的安装部署过程集成为一个 Shell 脚本，而你只要下载并执行它就可以了。简直不要太方便。

3.2 安装 LNMP

下载 LNMP 安装脚本（目前最新版本是 1.7 ，我安装的是 1.5，更多版本可查看: https://lnmp.org/download.html）

$ wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz

解压并执行它

$ tar zxf lnmp1.5.tar.gz && cd lnmp1.5 && ./install.sh lnmp

接下来会出现大量的选项，如果你不是很懂各个选项间的区别，按默认就行啦

运行脚本后，首先会让你选择数据库的版本：

没有特殊需要，建议使用默认配置，直接回车或输入序号再回车。

选好数据库，会让你设置数据库 root 用户的密码，此时如果你直接回车，会默认设置为 lnmp.org#随机数字，

在输入密码的时候，对于新手有一点注意：如果输入有错误需要删除，需要按住Ctrl再按Backspace键进行删除。

密码输好后，回车进入下一步

询问是否需要启用 MySQL InnoDB，InnoDB引擎默认为开启，一般建议开启，直接回车或输入 y 。

如果确定确实不需要该引擎可以输入 n，(MySQL 5.7+版本无法关闭InnoDB),输入完成，回车进入下一步：选择 PHP 版本，建议安装 PHP 7+的版本

回车进入下一步，选择是否安装内存优化：

可以选择不安装、Jemalloc或TCmalloc，输入对应序号回车，直接回车为默认为不安装。

如果是LNMPA或LAMP的话还会提示设置邮箱和选择Apache：

“Please enter Administrator Email Address:”，需要设置管理员邮箱，该邮箱会在报错时显示在错误页面上。再选择Apache版本：

按提示输入对应版本前面的数字序号，回车。

提示”Press any key to install…or Press Ctrl+c to cancel”后，按回车键确认开始安装。 LNMP脚本就会自动安装编译Nginx、MySQL、PHP、phpMyAdmin等软件及相关的组件。

安装时间可能会几十分钟到几个小时不等，主要是机器的配置网速等原因会造成影响。

如果显示Nginx: OK，MySQL: OK，PHP: OK

表明安装成功。

最后几行的输出

3306 端口是 MySQL 监听的
80 是 HTTP 端口
22 是 SSH 端口

3.3 配置 Nginx

安装好后，使用如下指令查看nginx配置文件（如果你的服务器上找不到该文件，那请使用 find / -name nginx.conf 搜索一下）

$ cat /usr/local/nginx/conf/nginx.conf

你会看到如下内容：

上图表明，安装好的nginx将网站的根目录设置为/home/wwwroot/default，这个可以根据自己的喜好进行修改。

用浏览器打开http://ip，可以看到如下内容（如果访问不了，有可能是你服务器的安全组没有开放 80 端口，去控制台开放一下即可）

其实这就是一个简单的网页demo了，自己随便修改index.html，就会有不同的内容。

4. 安装 WordPress

WordPress是使用PHP语言（这也是我们上面为什么要安装 PHP 的原因）开发的博客平台，也就是一个博客框架。

上一步安装的 LNMP，只是保证了 WordPress 的基本运行环境。

想要把你的个人网站跑起来，咱还需要安装 WordPress 。

方法也很简单，下面跟着操作就行。

第一步：安装 wordpress 安装包并解压到 /home/wwwroot

$ wget https://cn.wordpress.org/latest-zh_CN.zip && unzip latest-zh_CN.zip -d /home/wwwroot

第二步：登录MySQL（密码在前面部署LNMP 时你设置过），创建wordpress表，创建完后输入exit退出。

$ mysql -u root -p
Enter password: 
MySQL > create database wordpress;

第三步：使用 vim 修改 nginx 配置文件（不会vim的自行百度）

$ vim /usr/local/nginx/conf/nginx.conf

找到网站根目录位置，如下图所示：

修改成如下内容：

随后，使用wq保存配置退出即可。

验证nginx是否有配置错误：

$ nginx -t

如果出现ok，successful字样，说明没有错误。没有错误，重新加载nginx：

$ nginx -s reload

修改wordpress目录权限：

$ cd /home/wwwroot && chown -R www wordpress/ && chgrp -R www wordpress/

用浏览器打开http://ip/wp-admin/setup-config.php，你可以看到如下内容：

现在就开始，进行安装。填写信息如下：

其中，*** 改为你设置的MySQL数据库密码。点击提交，出现如下内容：

在/home/wwwroot/wordpress下，创建并编写wp-config.php文件：

$ vim wp-config.php

将上图内容复制进去并wq保存退出，然后点击现在安装。最后就是配置用户信息了，这个是你登录wordpress用户后台的，要记住：

最后点击安装WordPress，安装成功会出现如下界面：

点击登录，输入账户密码，就可以登录自己的 wordpress 后台了。

这时候你使用浏览器去访问 http://ip ，就可以看到你搭建的第一个网站了。

此时你看到的这个网站，是 wordpress 默认为你安装的免费主题（应该有三个），可能并不是那么的好看，但没关系，后面我会教大家如何挑选一个自己合适的主题，把你的网站装扮得有模有样。

装扮主题可以查看这篇文章https://veryjack.com/technique/how-to-build-blog/

如何使用 WordPress搭建个人博客？最先出现在JokerChor | 阿楚 | chor。

配置nginx ssl 开启站点https请求，真的把我坑惨啦！

JokerChor — Wed, 28 Aug 2024 06:40:10 +0000

1.获取ssl证书

1.获取ssl证书

https://www.sslforfree.com/

可以免费获取证书

得到crt、key后缀文件

一般放在服务器的/etc/nginx/ssl/路径下

没有对应文件夹的话可以新建，与nginx的路径一致即可

2.添加nginx配置

xxx 替换为你的域名并修改你的域名后缀

server {
    listen 443 ssl http2;
    server_name xxx.cn www.xxx.cn; #记得修改后缀

    ssl_certificate /etc/nginx/ssl/xxx.crt;
    ssl_certificate_key /etc/nginx/ssl/xxx.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;

    root /home/wwwroot/wordpress; #这里是你的网站访问根节点，我的是wordpress所以是此路径，按照自己的修改
    index index.php index.html index.htm;

    location / {
        try_files  $uri$ uri/ /index.php? $args; } location ~ \.php$  {
        include fastcgi_params;
        fastcgi_pass unix:/tmp/php-cgi.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME  $document_root$ fastcgi_script_name;
    }

    location ~ /\.ht {
        deny all;
    }

    access_log /home/wwwlogs/ssl_access.log;
    error_log /home/wwwlogs/ssl_error.log;
}

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name xxx.cn www.xxx.cn; #记得修改后缀
    return 301 https:// $host$ request_uri;
}

3.检查nginx状态并重启

nginx -t

systemctl reload nginx

4.访问https后的地址

这里特别注意一下！！！

坑了我一下午

就是浏览器缓存问题，导致一直访问https的地址没有正常显示

一定要清下浏览器缓存！！！

配置nginx ssl 开启站点https请求，真的把我坑惨啦！最先出现在JokerChor | 阿楚 | chor。

查看页面结构神器，查看页面结构小技巧，UI走查必备神器

JokerChor — Mon, 26 Aug 2024 02:43:32 +0000

浏览器添加网页
粘贴代码至网页，点击保存
将书签拖拉到常用位置
查看效果
再次点击去除效果

查看页面结构神器，查看页面结构小技巧，UI走查必备神器最先出现在JokerChor | 阿楚 | chor。

web之路，学无止境。

JokerChor — Fri, 23 Aug 2024 11:02:12 +0000

web之路，学无止境。
1. python
2. 系统架构设计师
3. taro
4. electron：node+web
5. 鸿蒙：ArkTS
6. three.js

web之路，学无止境。最先出现在JokerChor | 阿楚 | chor。

ChatGPT 图文注册教程，再不会我咬舌

JokerChor — Sun, 25 Jun 2023 09:03:54 +0000

1.打开ChatGPT官网：点击直达
2.验证人机，点击注册，填入你所需要的的注册邮箱，密码



3.然后他会发验证邮箱，根据操作继续进行下一步


4.这一步很关键，因为需要国外手机验证码，这时我们去接码平台：点击直达，不会使用的小伙伴可以查看教程：点击直达
5.找到 openai 这一栏，选择购买，然后把号码粘贴到chatgpt上，等待验证码接收


6.大功告成，不过目前注册的直送 $5 ，以前是赠送$ 18 的，因为批量注册的人太多了，薅太厉害了，目前的话也有很多账号被封，但自己用干净的地址注册绝对没问题，且用且珍惜。

ChatGPT 图文注册教程，再不会我咬舌最先出现在JokerChor | 阿楚 | chor。

关于程序员-学习

JokerChor — Sat, 03 Sep 2022 11:49:37 +0000

关于如何学习，这个每个人都有自己的认知，我这里只是简单的讲下我的认知和学习方法。希望能对新人有帮助吧。

程序员这一行需要具备的能力，可以归纳为以下几点：理解能力、学习能力。还有一定要养成自律的习惯，要有坚持学习的能力，要不然就会很容易被行业所淘汰。随着时间的发展，这一行会不断的出现新的理论、新的工具、新的技术，需要你不断的学习新的知识，新的技能，这就需要大家具备自学的能力，才能适应行业的变化。千万别成为那种经验和能力不符的人(就是工作经验看起来很长，但是能力却很一般的人)，学习能力其实是和大家的基础理论能力息息相关的，这就是科班和非科班的区别了。其实我刚走出校门的时候也会觉得大学啥都没学，慢慢的随着时间的变化，才发现学校学的那些基础的理论的知识对编程这一行的影响真的很大。

至于学习方法，其实我的建议一直是看文档自学。原因其实很简单，每个人对事物的认知都不一样，别人的文章或者视频，作者都会加入自己的认知在里面，这就会影响你的判断，万一你看的那篇文章的作者刚好理解错了，那不就完了。

还有其实从个人角度我都是完全不建议看视频学习的，还是建议直接读文档，看第一手的资料。作为程序员，一定要学会看文档的习惯。当然也有那种门外行想入行的人，那么去看视频学习也行，但是随着自己的成长一定要学会看文档，学会自学。说到看文档，这里就需要大家具备一定的英文阅读能力，建议大家读一手的资料。对于程序员这一行来讲，一定要知道Github这个神奇的网站，你想要的任何相关资料和案例上面都有；还要学会使用搜索引擎查资料。

学习了一些基础操作之后，就可以试着多做一些项目进行实战，当自己能完成一些简单的项目之后，就基本算是入门了，然后就赶紧去找一份工作进行实战。千万别怀疑自己能力不行，没有公司愿意要了咋办。这都不重要，可以降低工资标准啊，大不了免费打工赚取经验。其实工作带给你的除了金钱之外，对于新人来讲最重要的是经验。其实对于很大在校学生来讲，自学一些和实际工作相关的技能之后，在自己的毕设中进行实际操作，这个真的是一个超级好的选择。记住一件事情，练习很重要，编程是一个技术型工种，重要的是动手能力，光看不练是绝对不行的。

原文：https://www.bilibili.com/read/cv18428763/?spm_id_from=333.999.0.0

关于程序员-学习最先出现在JokerChor | 阿楚 | chor。

批量给文件添加前缀的方法

JokerChor — Sat, 06 Feb 2021 10:36:59 +0000

业务场景：假如我们需要把很多文件的名称加上统一的前缀，这个时候怎么办？

实现方法：

for %%i in (*.*) do ren "%%i" 1"%%i"
在需要操作的文件所在文件夹创建txt文件，将上边的一行代码复制到txt文件中，将1替换为想要替换的前缀，保存，将txt文件设置为bat后缀，双击运行即可

批量给文件添加前缀的方法最先出现在JokerChor | 阿楚 | chor。