记一些常用的CSS布局方式

发表于 2021-09-17

内容部分占满页面的剩余高度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dock.Full</title>
  <style type="text/css">
    html,
    body,
    #full {
      color: #EFEFEF;
      background-color: #423F3E;
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #full {
      background-color: #171010;
      display: flex;
      flex-direction: column;
    }

    #someid {
      background-color: #362222;
      flex-grow: 1;
    }
  </style>
</head>

<body>
  <div id="full">
    <div id="header">Dock.Top</div>
    <div id="someid">Dock.Full</div>
  </div>
</body>

</html>

线上预览

登录框居中显示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    html,
    body,
    #parent {
      color: #EFEFEF;
      background-color: #423F3E;
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #parent {
      background-color: #171010;
      /* 使用Flex布局 */
      display: flex;
      /* 主轴位于中间 */
      justify-content: center;
      /* 交叉轴位于中间 */
      align-items: center;
    }

    #someid {
      background-color: #362222;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="someid">Dialog Content</div>
  </div>
</body>

</html>

线上预览

解决用 Scoop 安装的 PowerShellCore 无法在 VSCode Shell 使用

By leaker

发表于 2021-03-17

目前在 Windows 安装软件特别喜欢使用 Scoop 进行管理

使用 Scoop 安装 PowerShell Core 最新版

scoop install pwsh

发现在 VSCode 的 Terminal Shells 列表里面依然看不到新安装的 PowerShell Core

但我又不想使用默认的 PowerShell 或者 cmd 当我的 Shell
这时就可以这样配置：

在 VSCode 里打开 Command Palette(Ctrl+Shift+P) 选择 Preferences: Open Settings (JSON) 打开用户配置文件 settings.json

添加如下配置

settings.json
{
    "terminal.integrated.shell.windows": "C:/Users/${env:USERNAME}/scoop/apps/pwsh/current/pwsh.exe",
    "terminal.integrated.automationShell.windows": "C:/Users/${env:USERNAME}/scoop/apps/pwsh/current/pwsh.exe"
}

注：如果用户自定义了 Scoop 的路径($env:SCOOP) 则配置为

settings.json
{
    "terminal.integrated.shell.windows": "${env:SCOOP}/apps/pwsh/current/pwsh.exe",
    "terminal.integrated.automationShell.windows": "${env:SCOOP}/apps/pwsh/current/pwsh.exe"
}

重新运行 VSCode

可以看到我们 VSCode 已经使用了 PowerShell Core 作为默认 Terminal Shells 了

参考文献：

Quick Start · lukesampson/scoop Wiki

卸载 hexo-prism-plugin 代码高亮插件

By leaker

发表于 2021-03-12

最近用 Github 比较频繁，无意间点开 GitHub Pages 的代码库时发现一个大大的 Dependabot alerts 顶在上面

点开后发现最大的一个警告就是这个：

顺着这个 dependencies 一路追查发现是 hexo-prism-plugin 这个插件使用的
由于该插件太久没更新，而且发现 hexo.io 最新版本已经集成了 prism 的代码高亮功能
所以更新 Hexo 版本并启用自带的代码高亮功能应该就可以解决了

解决方法：

卸载 hexo-prism-plugin 插件
更新所有相关 dependencies 到最新版本
配置 _config.yml

_config.yml
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: '    '

重新生成

引用文章： Syntax Highlighting | Hexo

改名“逃避虽然可耻但有用”

By leaker

发表于 2020-05-07

突然心血来潮想把自己的笔记用阿里云CDN加速一下，但域名就需要备案。
而我本身的域名不想因为备案就迁回到国内的域名服务商（这里有一段在国内购买域名的黑历史）
所以干脆重新购买了一个新的域名 www.kaij.cn 用来备案

直接在阿里云上面买域名可以不用等迁移的时间
顺便一说，使用阿里云的快速备案服务来备案真的太方便了

但备案的时候遇到了一点小问题，之前起的博客名称无法用于备案，收到了提示：

网站名称“ 李略帅 ”不合格，个人网站名称不能涉及到行业、企业等信息，且个人网站名称请勿涉及个人姓名、地名，请不要用纯数字或字母组成，不能包含特殊符号，不能使用成语；网站名称请使用3个以上汉字命名，请不能使用XXX个人空间、资讯、网站、网络、网址、爱好者、作品展示、工作室、平台、主页、热线、社团、导航这种的格式命名；网站名称中不能带有博客、论坛、在线、社区、交流等字样，若要带有此类信息，需提交前置审批文；具体命名要求请参考专区文章：https://help.aliyun.com/knowledge_detail/36948.html#title-lhm-b1g-ehx

按照这些要求来说 XXX的个人博客、XXX的个人主页 这类肯定是不行了。由于也禁止使用成语，所以想翻翻字典来找个合适的名字也不行。
想来想去似乎只有一句话类型的语言不容易触犯到这些规则。而经常有一些日系的电视电影起的名字我觉得就非常有创意。
刚好之前看过日本由百分之九十九的码农都会沉浸在她笑容里的公民老婆 Gakki（日文原名：新垣結衣） 出演的两部剧：

《逃避虽然可耻但有用》（日文：逃げるは恥だが役に立つ）
《胜利即是正义》（日文：リーガルハイ）

剧集给我的印象非常深刻。所以抱着试一试的心态填了一个，结果认证了我的猜想。像这样的一句话通常不会触犯到起名规则，可以顺利通过审核。

所以现在我的笔记多出了一个用于国内用户快速访问的通道 https://www.kaij.cn
国外用户依然可以使用之前的域名继续访问 https://www.leelib.com

毕竟出身一名程序员就不能少了使用 GitHub Pages 这样优秀的服务创建一个属于自己的小港湾，去记录一些生活中的点点滴滴。 (๑•̀ㅂ•́)و✧

解决WSL中使用NTFS分区的权限问题

By leaker

发表于 2020-04-30

当使用WSL的过程中访问WSL系统以外目录时候出现一些奇奇怪怪问题
通常就是WSL对于NTFS分区的目录权限问题。

使用 mount -l 查看，可能长这样

[root@wsl] mount -l
rootfs on / type lxfs (rw,noatime)
none on /dev type tmpfs (rw,noatime,mode=755)
sysfs on /sys type sysfs (rw,nosuid,nodev,noexec,noatime)
proc on /proc type proc (rw,nosuid,nodev,noexec,noatime)
devpts on /dev/pts type devpts (rw,nosuid,noexec,noatime,gid=5,mode=620)
none on /run type tmpfs (rw,nosuid,noexec,noatime,mode=755)
none on /run/lock type tmpfs (rw,nosuid,nodev,noexec,noatime)
none on /run/shm type tmpfs (rw,nosuid,nodev,noatime)
none on /run/user type tmpfs (rw,nosuid,nodev,noexec,noatime,mode=755)
binfmt_misc on /proc/sys/fs/binfmt_misc type binfmt_misc (rw,relatime)
cgroup on /sys/fs/cgroup type tmpfs (rw,relatime,mode=755)
cgroup on /sys/fs/cgroup/devices type cgroup (rw,relatime,devices)
C:\ on /mnt/c type drvfs (rw,noatime,uid=0,gid=0,case=off)
D:\ on /mnt/d type drvfs (rw,noatime,uid=0,gid=0,case=off)

可以看到 C:\** 和 *D:\* 加载状况是这样的。这种情况下代表所有目录均以root权限进行访问。在使用ssh或git**等工具的时候有可能会因为一些权限问题导致意外情况发生。

解决办法很简单，通过DrvFs让WSL可以支持NTFS分区增加文件metadata信息：

挂载配置

echo '[automount]
enabled = true
root = /mnt/
options = "metadata,umask=22,fmask=11"
mountFsTab = false' > /etc/wsl.conf

在PowerShell中重启WSL服务
```
Restart-Service LxssManager
```

博客启用 hexo-prism-plugin 代码高亮插件

By leaker

发表于 2020-04-28

之前的高亮插件支持的语言比较少，而且效果不是特别理想。特进行了一次修整，内容如下：

由于hexo的更新导致之前的主题出现了一部分显示错误。目前已经修复
启用 hexo-prism-plugin 插件
重新过了一遍文章并重新优化 code-block 部分文章

解决 Windows 下部署 RabbitMQ 服务本地授权问题

By leaker

发表于 2018-07-07

遇到这种情况原因就是本地的授权cookie文件不匹配导致的，结局方法如下：

删除 %UserProfile% 目录下的 .erlang.cookie 文件
使用 C:\Windows\System32\config\systemprofile 目录下的 .erlang.cookie 覆盖掉之前 %UserProfile% 目录的同名文件

在试试，现在应该已经可以正常访问了

使用 firewall 配置端口转发

By leaker

发表于 2018-03-30

开启NAT转发

firewall-cmd --permanent --zone=public --add-masquerade

本机到本机

firewall-cmd --permanent --zone=public --add-forward-port=port=80:proto=tcp:toport=8080
firewall-cmd --permanent --zone=public --add-service=http

本机到其他机器

firewall-cmd --permanent --zone=public --add-forward-port=port=80:proto=tcp:toport=8080:toaddr=192.168.0.2
firewall-cmd --permanent --zone=public --add-port=80/tcp

重新加载应用

firewall-cmd --reload

只允许指定IP连入指定端口

firewall-cmd --permanent --add-rich-rule='rule family="ipv4" source address="192.168.0.2" port protocol="tcp" port="80" accept'

只允许指定IP段连入指定端口范围

firewall-cmd --permanent --add-rich-rule='rule family="ipv4" source address="192.168.0.0/24" port protocol="tcp" port="80-8080" accept'

Linux 常用网络优化

# 发送 KeepAlive 消息的间隔 1200=2分钟
sysctl -w net.ipv4.tcp_keepalive_time=1200
# IP端口重用
sysctl -w net.ipv4.tcp_tw_reuse=1

使用 iptables 配置端口转发

By leaker

发表于 2018-03-29

配置

sysctl -w net.ipv4.ip_forward=1 # 启用IP转发功能
sysctl -p # 立即生效
echo "net.ipv4.ip_forward=1" >> /usr/lib/sysctl.d/50-default.conf
iptables -t nat -A POSTROUTING -j MASQUERADE

添加端口转发脚本 portforward.sh

#!/bin/bash
# $1=listen port
# $2=connect address and port example:111.111.111.111:2222
iptables -t nat -A PREROUTING -p tcp -i eno1 --dport $1 -j DNAT --to $2

想要添加端口的时候只要这么用就好

./portforward.sh 22 111.111.111.111:22

Ubuntu安装最新版本nodejs

By leaker

发表于 2018-03-29

指定版本，通常用于安装LTS版本。比如当前最新LTS版本是8

sudo curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

逃避虽然可耻但有用

少壮不努力，一生在内地

记一些常用的CSS布局方式

内容部分占满页面的剩余高度

登录框居中显示

解决用 Scoop 安装的 PowerShellCore 无法在 VSCode Shell 使用

卸载 hexo-prism-plugin 代码高亮插件

解决方法：

改名“逃避虽然可耻但有用”

解决WSL中使用NTFS分区的权限问题

解决办法很简单，通过DrvFs让WSL可以支持NTFS分区增加文件metadata信息：

博客启用 hexo-prism-plugin 代码高亮插件

解决 Windows 下部署 RabbitMQ 服务本地授权问题

使用 firewall 配置端口转发

开启NAT转发

本机到本机

本机到其他机器

重新加载应用

只允许指定IP连入指定端口

只允许指定IP段连入指定端口范围

Linux 常用网络优化

使用 iptables 配置端口转发

配置

添加端口转发脚本 portforward.sh

Ubuntu安装最新版本nodejs

最新发行版

指定版本，通常用于安装LTS版本。比如当前最新LTS版本是8

内容部分占满页面的剩余高度

登录框居中显示

解决方法：

解决办法很简单，通过DrvFs让WSL可以支持NTFS分区增加文件metadata信息：

Authentication failed (rejected by the remote node), please check the Erlang cookie

开启NAT转发

本机到本机

本机到其他机器

重新加载应用

只允许指定IP连入指定端口

只允许指定IP段连入指定端口范围

Linux 常用网络优化

配置

添加端口转发脚本 portforward.sh

最新发行版

指定版本，通常用于安装LTS版本。比如当前最新LTS版本是8