Memo - 分类 - 菠菜眾長

Mac 上的开发配置总结

Lruihao — Fri, 29 Jul 2022 20:22:44 +0800

记录一下使用 Mac 作为生产工具开发的一些基本配置和经验。

配置文件

Mac 上有很多配置文件都可以用来保存环境变量等配置，根据自己的理解记录了四个文件的用途：

1
2
3
4
5


# etc/profile        系统配置文件
# etc/.bash_profile  系统环境变量配置
# ~/.bash_profile    个人环境变量配置
# ~/.zshrc           zsh 的配置文件
# $ZSH_CUSTOM/*.zsh  自定义 zsh 脚本，在 zsh 启动时会自动执行

编辑最多的应该是 ~/.bash_profile 和 ~/.zshrc, 基本上建议所有的个人配置都放在 ~/.bash_profile 中，然后在 ~/.zshrc 最后执行 source ~/.bash_profile, 这样也方便将自己的个人环境变量配置备份。

常用命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 安装/卸载 homebrew install.sh/uninstall.sh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 注意：安装 Homebrew 会下载 node, 请做好 node 环境被破坏的准备

# 显示隐藏文件 true/false or cmd+shift+.
defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder

# 释放端口
lsof -i:$your_port  # 1. 查看使用端口进程
kill -9 $your_PID   # 2. 释放进程

Node

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


# 设置阿里镜像
npm config set registry=https://registry.npmmirror.com
# npm config set registry https://registry.npmjs.org

# GitHub 仓库下载地址前缀镜像
# disturl=https://registry.npmmirror.com/-/binary/

# 全局安装的依赖
npm install -g npm@8.13.1
npm install -g cnpm
npm install -g @vue/cli
npm install -g nvm
npm install -g nrm
npm install -g yarn
npm install -g yrm

# npm 参数
--ignore-scripts  # 忽略脚本错误
--force  # 会无视冲突，并强制获取远端 npm 库资源，即使本地有资源也会覆盖掉
--legacy-peer-deps  # 安装时忽略所有 peerDependencies，忽视依赖冲突，采用 npm 版本 4 到版本 6 的样式去安装依赖，已有的依赖不会覆盖

# 清除缓存
npm cache clean --force
rm -rf node_modules
rm -rf package-lock.json
npm install

# nvm
nvm alias default [node_version]  # 设置默认版本

# 检查过时依赖
npm outdated

# 安全更新
npm update

# ncu 更新检查工具
# https://blog.51cto.com/u_13028258/5115637?b=totalstatistic
npm install -g npm-check-updates
## 检查
ncu
ncu vue
## 更新
ncu -u
ncu -u vue

electron 相关配置

1
2
3
4


# 设置 electron 镜像仓库
# https://registry.npmmirror.com/-/binary/electron
# 13.1.7 版本 下载链接可能会拼错导致 404，要设置成 https://registry.npmmirror.com/-/binary/electron/v
npm config set electron_mirror=https://npmmirror.com/mirrors/electron/

SourceTree

Custom actions

Script target: /bin/bash
Parameters: /Users/liruihao/workspace/.shell/sync_tags.sh

技巧

根据不同的 shell 程序选择不同的文件后缀名，并给文件增加可执行权限：

zsh: .zsh
bash: .sh

1
2
3
4
5
6


#! /bin/bash
# 同步远程仓库标签分支脚本
git tag -l | xargs git tag -d
# git fetch origin --prune
# git fetch origin --tags
git fetch origin --prune --prune-tags

1
2
3


#! /bin/bash
# 同步所有子模组
git submodule update --remote --merge

1
2
3
4


#! /bin/zsh
# ssh 配置但无法连接时
ssh-agent -s
ssh-add ~/.ssh/Lruihao-Github  # 私钥路径

技巧

开机启动时系统会去自动读取 id_rsa 的私钥来启动 SSH 链接，若不是默认命令就会失败需要手动执行上诉命令启动，可添加到开机自启动。

SourceTree 相关文章

解决 SourceTree 提交时候 husky 命令失败问题

Terminal

Terminal: 系统自带
Shell: zsh
美化: ohmyzsh

修改启动语

1

vim $PREFIX/etc/motd

sublime-text 3

1
2
3
4
5
6
7


# Terminal 启用 sublime 别名 subl
## 1.设置软链（推荐）
sudo ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
## 2.设置别名
vim ~/.bash_profile
alias subl="'/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl'"
source ~/.bash_profile # 每打开一个命令窗口，需要先让命令生效

开机自启动

系统偏好设置 -> 用户与群组 -> 登录项 -> 增删可执行文件 (需配置默认启动软件)
将 shell 命令添加到 /System/Library/StartupItems/ 或 /Library/StartupItems/ 文件夹（测试无效）

备份

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


# -------------------------------------
# This configuration is for Lruihao.
# https://lruihao.cn/posts/config4mac/
# -------------------------------------

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8

# workspace
export WORKSPACE="$HOME/workspace"

# alias
alias subl="'/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl'"
alias mysql=/usr/local/mysql/bin/mysql
alias mysqladmin=/usr/local/mysql/bin/mysqladmin
alias incr="source $WORKSPACE/.shell/incr*.zsh"
alias typora="open -a typora"

# maven
export M2_HOME=$HOME/Applications/apache-maven-3.8.5
export PATH=$PATH:$M2_HOME/bin

# jenv
export PATH="$HOME/.jenv/bin:$PATH"
eval "$(jenv init -)"

# java
export JAVA_8_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_321.jdk/Contents/Home
export JAVA_17_HOME=/Library/Java/JavaVirtualMachines/jdk-17.0.2.jdk/Contents/Home
export JAVA_HOME=$JAVA_8_HOME  # 设置一个中间变量，为了方便多个 JDK 版本时更换 JAVA_HOME
export PATH=$JAVA_HOME/bin:$PATH:.  # 冒号前代表 JDK 目录下的 bin 目录，冒号后代表当前目录
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar

# jmeter
export JMETER_HOME=$HOME/jmeter/apache-jmeter-5.4.1
export PATH=$JAVA_HOME/bin:$PATH:.:$JMETER_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JMETER_HOME/lib/ext/ApacheJMeter_core.jar:$JMETER_HOME/lib/jorphan.jar:$JMETER_HOME/lib/logkit-2.0.jar

# platform-tools of Android SDK
export PATH=$PATH:$HOME/Applications/platform-tools

# Electron-Mac app development
export CSC_LINK=$WORKSPACE/mac_app_dev/Mac.p12
export CSC_KEY_PASSWORD=xxxxxxxxx

# yarn
export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

# zsh custom plugin
# https://mimosa-pudica.net/zsh-incremental.html
# source $WORKSPACE/.shell/incr*.zsh

# Qcloud secret key-value
export SECRET_ID=""
export SECRET_KEY=""

# golang
export GOROOT=/usr/local/go
export GOBIN=$GOROOT/bin
export PATH=$PATH:$GOBIN
export GOPATH=$HOME/go
export GOPROXY=https://goproxy.cn
# Go work bin
export PATH=$PATH:$GOPATH/bin

# sass_embedded
export PATH=$PATH:$HOME/Applications/sass_embedded

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


# https://github.com/nvm-sh/nvm#manual-install
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# https://github.com/nvm-sh/nvm#deeper-shell-integration
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi

  # fix husky hook
  # ref: https://github.com/typicode/husky/issues/390#issuecomment-762213421
  echo "export PATH=\"$(dirname $(which node)):\$PATH\"" > ~/.huskyrc
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

# https://github.com/nvm-sh/nvm#use-a-mirror-of-node-binaries
export NVM_NODEJS_ORG_MIRROR=https://mirrors.ustc.edu.cn/node/

先添加一些基础配置 basic.vim

1
2
3
4
5
6
7


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Custom config for Lruihao
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Enable mouse
set mouse=a
" Enable line-number
set number

Mac 配置 ADB

Lruihao — Tue, 05 Jul 2022 15:39:34 +0800

作为非安卓专业开发，无需下载 Android SDK，
仅下载 Android SDK 中的 platform-tools 命令行工具即可，并配置好环境变量。

安装

platform-tools

配置环境变量

1

open .bash_profile

写入以下内容

1
2


# platform-tools of Android SDK
export PATH=$PATH:$HOME/Applications/platform-tools

1

source .bash_profile

Windows 系统打开高级设置，配置 PATH 变量，增加一条路径即可。

ADB 命令

通过 USB 连接手机和电脑，执行以下命令

1
2
3
4
5
6


# 1. 打开手机 tcpip 5555 端口
adb tcpip 5555
# 2. 查看手机网络 IP
adb shell ifconfig
# 3. 在电脑上 ping 手机网络 IP
# 4. adb connect [Android IP]

注意

windows 系统下的文件（夹）命名所采用的是 GBK 编码，而 linux 是采用的 UTF-8 编码，使用 adb 的 push 和 pull 命令时由于编码方式的不同会产生错误，因此需要修改 adb 的源代码来支持编码转换。

Sublime 剪贴板图片粘贴插件 —— Markdown 必备

Lruihao — Tue, 05 Oct 2021 21:54:06 +0800

插件地址 https://github.com/robinchenyu/imagepaste

功能

支持 Windows/Linux 系统下，实现对剪切板图像的处理调用 (Ctrl+Shift+V)
默认使用 JPG 的方式保存，可以显著减小图片的存储体积。

对剪切板图像保存到本地并在 Markdown 文本中插入链接地址
对剪切板中的图像地址，直接插入到 Markdown 文本中

食用说明

首先下载 zip 到本地，放到 sublime 安装目录的 xxx\sublime\Data\Packages 中，注意不是 xxx\sublime\Packages 下哦。
记得要把 subl_imgpaste2-master 的 -master 删除掉。接着重新打开 sublime, 选择 Preferences->Package Settings->ImaPaste2->settings-Default 输入如下内容：
1 2 3 4 5

{ "caption": "ImagePaste: Paste Image From Clipboard", "command": "image_paste", "image_dir_name": "images/" # 图片保存目录 }
然后就可以愉快的使用截图，然后在 sublime 里使用 ctrl+shift+v 粘贴 Markdown 格式的图片。默认会自动根据 md 文件名在同级目录下新建文件夹，图片就默认保存在那。如图：

VScode 也有更好用的插件：Past Image

1
2


"pasteImage.defaultName": "YY_X",
"pasteImage.path": "${currentFileDir}/images/"

Hugo 添加知乎卡片式链接 Shortcodes

Lruihao — Tue, 05 Oct 2021 19:33:13 +0800

卡片式链接已整合到 FixIt 主题 https://github.com/Lruihao/FixIt

回顧

之前在使用 hexo 的時候也有用到，模仿知乎卡片式链接
和之前的相比，優化之前是后加載，由 JS 在瀏覽器處理，
使用 shortcodes 方式后，則是在 GO 構建頁面的時候處理，效能上會好很多。

源碼

基於 LoveIt 主題的 Link Shortcodes, 主要改到以下幾個文件，完整提交記錄

assets/css/custom.scss
assets/css/partial/cardlink.scss          # 卡片式鏈接樣式
layouts/partials/plugin/cardlink.html     # 卡片式鏈接模板
layouts/shortcodes/cardlink.html
static/images/card-link-bg.jpg

使用

使用參數见 FixIt 擴展 Shortcodes - Link

1

{{< cardlink href="https://github.com/Lruihao/hugo-blog/commit/089c303693e806bff855ecf3fee110baa62b870b" content="知乎卡片式链接 Git 記錄" >}}

💡 注：FixIt 已合併 shortcode cardlink 到 shortcode link，只需添加 card=true

1

{{< link href="https://github.com/Lruihao/FixIt" content="卡片式链接已整合到 FixIt 主题" card=true >}}

信息

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：
https://cloud.tencent.com/developer/support-plan?invite_code=3o5dmfzf0xkwk

Hugo i18n 添加中文繁體翻譯

Lruihao — Tue, 05 Oct 2021 19:14:45 +0800

工作上一直常用繁體，最近臨帖也都寫的繁體，所以博客的語言也想換成繁體，但是 LoveIt 主題沒有支持中文繁體。就只好自己添加了。

翻譯

屬於直譯，有些詞語可能並不符合現在臺灣或者香港那邊的說法。比如，分類好像臺灣常說歸類吧

新建 i18n/zh-TW.toml

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203


# Translations for Traditional Chinese
# 簡體中文的翻譯
# https://gohugo.io/content-management/multilingual/#translation-of-strings

# === baseof ==
[backToTop]
other = "回到頂部"

[viewComments]
other = "查看評論"
# === baseof ==

# === Post ===
[posts]
other = "文章"
# === Post ===

# === Taxonomy ===
[allSome]
other = "所有{{ .Some }}"

[tag]
other = "標籤"

[tags]
other = "標籤"

[category]
other = "分類"

[categories]
other = "分類"

[years]
other = "年度總結"
# === Taxonomy ===

# === Pagination ===
[more]
other = "更多"
# === Pagination ===

# === partials/header.html ===
[selectLanguage]
other = "選擇語言"

[switchTheme]
other = "切換主題"
# === partials/header.html ===

# === partials/footer.html ===
[poweredBySome]
other = "由 {{ .Hugo }} 強力驅動 | 主題 - {{ .Theme }}"
# === partials/footer.html ===

# === partials/comment.html ===
[valineLang]
other = "zh-TW"

[valinePlaceholder]
other = "你的評論 ..."

[facebookLanguageCode]
other = "zh-TW"
# === partials/comment.html ===

# === partials/assets.html ===
[search]
other = "搜索"

[searchPlaceholder]
other = "搜索文章標題或內容 ..."

[clear]
other = "清空"

[cancel]
other = "取消"

[noResultsFound]
other = "沒有找到結果"

[lunrLanguageCode]
other = "zh"

[lunrLanguageLib]
other = "lib/lunr/lunr.zh.js"

[lunrSegmentitLib]
other = "lib/lunr/lunr.segmentit.js"

[copyToClipboard]
other = "複製到剪貼板"

[cookieconsentMessage]
other = "本網站使用 Cookies 來改善您的流覽體驗。"

[cookieconsentDismiss]
other = "同意"

[cookieconsentLink]
other = "瞭解更多"
# === partials/assets.html ===

# === partials/plugin/share.html ===
[shareOn]
other = "分享到"
# === partials/plugin/share.html ===

# === posts/single.html ===
[contents]
other = "目錄"

[publishedOnDate]
other = "發佈於 {{ .Date }}"

[includedInCategories]
other = "收錄於 {{ .Categories }}"

[wordCount]
other = "約 {{ .Count }} 字"

[readingTime]
other = "預計閱讀 {{ .Count }} 分鐘"

[views]
other = "次閱讀"

[author]
other = "作者"

[updatedOnDate]
other = "更新於 {{ .Date }}"

[readMarkdown]
other = "閱讀原始文檔"

[back]
other = "返回"

[home]
other = "主頁"

[readMore]
other = "閱讀全文"
# === posts/single.html ===

# === 404.html ===
[pageNotFound]
other = "頁面沒找到"

[pageNotFoundText]
other = "抱歉，您要查找的頁面不存在。"
# === 404.html ===

# === shortcodes/admonition.html ===
[note]
other = "注意"

[abstract]
other = "摘要"

[info]
other = "信息"

[tip]
other = "技巧"

[success]
other = "成功"

[question]
other = "問題"

[warning]
other = "警告"

[failure]
other = "失敗"

[danger]
other = "危險"

[bug]
other = "Bug"

[example]
other = "示例"

[quote]
other = "引用"
# === shortcodes/admonition.html ===

# === shortcodes/version.html ===
[new]
other = "新增"

[changed]
other = "更改"

[deleted]
other = "刪除"
# === shortcodes/version.html ===

配置

打開 config.toml

1

defaultContentLanguage = "zh-tw"

Hugo 友情連結模板

Lruihao — Tue, 05 Oct 2021 14:14:10 +0800

過程

以前的 hexo 博客是自己寫的友鏈模板，換到 hugo 後想著在網上隨便找一個範本用著就好，然而並沒有自己想要的 layout, 幾乎都是使用 shortcodes 的，代碼風格有點問題且 shortcodes 作為友鏈添加的方式是真的麻煩。就只好自己寫羅。

友情鏈接模板已整合到 FixIt 主題 https://github.com/Lruihao/FixIt 友情鏈接範本 https://lruihao.cn/friends/

創建模板

開始之前去看了 hugo 的官網，再看了一下 go 模板的語法。

新建 layouts/friends/single.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}} {{- define "content" -}} {{- $params := .Scratch.Get "params" -}}
<div class="page single special">
  {{- /* Title */ -}}
  <h1 class="single-title animated pulse faster">{{- .Title -}}h1>

  {{- /* Subtitle */ -}} {{- with $params.subtitle -}}
  <h2 class="single-subtitle">{{ . }}h2>
  {{- end -}} {{- /* Friend links */ -}} {{- $loading := resources.Get "svg/loading.svg" | minify -}}
  <script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js">script>
  <link rel="stylesheet" href="/friends/css/_friends.css" />
  <div class="friend-links">
    {{ range $index, $friend := .Site.Data.friends }}
    <a
      class="friend-link"
      title="{{ $friend.description }}"
      href="{{ $friend.url | safeURL }}"
      rel="external nofollow noopener noreferrer"
      target="_blank"
    >
      {{ if $friend.avatar }}
      <img class="friend-avatar lazyload" src="{{ $loading.RelPermalink }}" data-src="{{ $friend.avatar }}" alt="{{ $friend.nickname }}" />
      {{ else }}
      <svg class="friend-avatar" aria-hidden="true">
        <use xlink:href="#icon-{{ add 1 $index }}">use>
      svg>
      {{ end }}
      <span class="friend-nickname" title="{{ $friend.nickname }}">@{{ $friend.nickname }}span>
    a>
    {{ end }}
  div>

  {{- /* Content */ -}}
  <div class="content" id="content">
    {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" |
    safeHTML -}}
  div>

  {{- /* Comment */ -}} {{- partial "comment.html" . -}}
div>
{{- end -}}

模板樣式

新建文件 _friends.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63


/**
 * @Description: Style of layout named 'Friend links'.
 * @Author: lruihao.cn
 * @Updated:  2021/9/20 19:26
 */

.friend-links {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 576px) {
  .friend-links {
    justify-content: space-around;
  }
}
.friend-link {
  width: 150px;
  height: 200px;
  font-size: 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  box-shadow: 3px 3px 5px #aaa;
  border-radius: 5px;
  border: none;
  transition-duration: 0.3s;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.friend-link:hover {
  background: #fff;
  transform: scale(1.03);
  box-shadow: 0 0 3px #aaa;
}
.friend-avatar {
  object-fit: cover;
  object-position: center;
  width: 100% !important;
  height: 150px !important;
  border-radius: 5px;
  margin: 0;
  padding: 0;
}
.friend-nickname {
  display: block;
  position: relative;
  color: #2bbc8a;
  font-weight: bold;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 18px;
  margin-bottom: 1rem;
}
.friend-nickname:hover {
  color: #d480aa;
}

友鏈頁面

1

hugo new friends/index.md

將 _friends.css 放到 content/friends/css/

打開友鏈頁面 content/friends/index.md

1
2
3
4
5


---
title: '友鏈'
date: 2021-09-19T12:33:48+08:00
type: 'friends'
---

數據

新建數據文件 data/friends.yml, 數據格式為：

1
2
3
4
5
6
7
8


# - nickname: 标题
#   avatar: 头像
#   url: 站点
#   description: 描述
- nickname: Lruihao
  avatar: https://gravatar.loli.net/avatar/3f985efb5907ca52944a3cd7edd51606?d=wavatar&v=1.3.10
  url: https://lruihao.cn
  description: 不怕萬人阻擋，只怕自己投降

結語

這樣每次添加友鏈或者刪除友鏈衹要操作數據文件 friends.yml 就好，乾淨又衛生！
友鏈頁面 content/friends/index.md 繼承了基礎頁面的功能，內容評論等

Hugo 本地管理 Shell 腳本

Lruihao — Mon, 04 Oct 2021 23:49:00 +0800

摘要

在使用 hugo 寫博客的過程中會使用到一些命令，包括 Git 的使用也會用到 Git 命令，但是這些命令我感覺知道就好，沒必要因輸入命令而增加寫博客和部署博客的額外工作。
自然要想辦法簡化這些過程，Git 還好有 SourceTree 等工具，Hugo 卻沒有，也懶得去網絡上找類似以前 hexo 有 hexo-admin 的插件可以讓大家在瀏覽器寫博客，因為我覺得這和靜態博客初衷背道而馳，於是我就折中方案，寫了一個滿足日常需求的 Shell 腳本，生成管理本地博客。

實現

一共六個腳本，放在 hugo-site/_localadmin/ 下

_localadmin/
  ├── auto_push.sh       # 自動化提交源碼
  ├── hugo_builder.sh    # 構建 hugo 命令
  ├── hugo_main.sh       # 主介面入口
  ├── hugo_server.sh     # 啟動本地服務
  ├── post_generator.sh  # 創建文章
  └── public_async.sh    # 同步 public 子模組

post_generator.sh

輸入文章名稱（建議使用英文）
文章是否會插入圖片等資源（默認：否）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#!/bin/bash
#author: Lruihao
cd ..
read -p "Please enter the article name: " postName
if [ -z $postName ];then
  echo "The article name is required!"
else
  read -p "Will there be pictures in this article? [y/n]..." choice
  if [ $choice = "y" ];then
    hugo new posts/$postName/index.md
  else
    hugo new posts/$postName.md
  fi
fi

hugo_server.sh

1
2


cd ..
hugo server --disableFastRender

hugo_builder.sh

1
2


cd ..
hugo --minify

public_async.sh

1
2
3
4


cd ..
git submodule update --remote
git add public
git commit -m "Feat: Update public module commit id"

auto_push.sh

不輸入 Git 提交訊息會使用腳本中默認訊息 Docs: 『菠菜眾長』内容更新 YYYY-MM-DD week hh:mm::ss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#!/bin/bash
#author: Lruihao
cd ..
# 是否需要每次提交自動更新子模組
# git submodule update --remote
# git add public
# git commit -m "Feat: Update public module commit id"
git add .
read -p "Please enter commit message: " commitMsg
if [ -z $commitMsg ];then
  commitMsg="Docs: 『菠菜眾長』内容更新 $(date +'%F %a %T')"
fi
git commit -m "$commitMsg"
git push

hugo_main.sh

可單獨執行子腳本也可以通過主介面來選擇序號執行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


#!/bin/bash
#author: Lruihao
echo "Please enter the serial number to work"
echo "--------------------------------------"
echo "1. post generator"
echo "2. hugo server"
echo "3. hugo build"
echo "4. public async"
echo "5. auto push"
echo "--------------------------------------"
echo "Press Ctrl+C to stop"

read num
case $num in
  1)
    sh post_generator.sh
    ;;
  2)
    sh hugo_server.sh
    ;;
  3)
    sh hugo_builder.sh
    ;;
  4)
    sh public_async.sh
    ;;
  5)
    sh auto_push.sh
    ;;
  *)
    echo "There is no such serial number"
    ;;
esac

echo "Press any key to continue..."
read x
clear
sh hugo_main.sh

使用

將 hugo_main.sh 建立桌面快捷鍵
雙擊 hugo_main.sh 進入根據提示使用即可

由於一般寫博客會便邊寫邊預覽，所以一般開兩個主介面窗口，如下圖：

一個選擇 2 啟動本地服務

一個用於生成文章，部署文章等

Hugo Admin

Hugo 使用 GitHub Actions 部署到 GithHb Pages 和腾讯云 cos 桶

Lruihao — Mon, 04 Oct 2021 23:46:49 +0800

解決痛點

Github Actions 真是靜態博客的福音，有了它 hugo, hexo 等博客構建過程可以丟給 Github 的服務器幫我們做了。
也就是説實現了在線寫靜態博客的需求。

準備

工作流程涉及到兩個倉庫和一個 cos 桶，例如：

Lruihao/hugo-blog # Blog source repository

Lruihao/lruihao.github.io # GitHub pages repository

blog-1256932288 # COS bucket

Github Actions

創建 workflows 任務

創建 hugo-site/.github/workflows/deploy.yml, 這個文件會寫一些命令告訴 Github 在我們提交源碼的時候，它要幫我們做哪些事情。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


name: Auto Deploy hugo
on: [push]
jobs:
  Explore-GitHub-Actions:
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v2
        with:
          submodules: recursive # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: latest
          extended: true
      - name: Build Hugo static files
        run: hugo --minify
      - name: Deploy to Github Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.GP_DEPLOY_KEY }}
          external_repository: Lruihao/lruihao.github.io
          publish_branch: main
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}
      - name: Install coscmd
        run: sudo pip install coscmd
      - name: Configure coscmd
        env:
          COS_SECRET_ID: ${{ secrets.COS_SECRET_ID }}
          COS_SECRET_KEY: ${{ secrets.COS_SECRET_KEY }}
          COS_BUCKET_NAME: blog-1256932288 # Change for yourself
          COS_BUCKET_REGION: ap-chengdu # Change for yourself
        run: coscmd config -a $COS_SECRET_ID -s $COS_SECRET_KEY -b $COS_BUCKET_NAME -r $COS_BUCKET_REGION
      - name: Deploy to COS Bucket
        run: coscmd upload -r -s --delete -f public/ /

配置 Github Pages 密鑰

為了讓 Lruihao/hugo-blog 提交代碼后自動部署到 Lruihao/lruihao.github.io, 需要生成一對 ssh key.

1
2
3
4


ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
# You will get 2 files:
# gh-pages.pub (public key)
# gh-pages     (private key)

打開 Lruihao/hugo-blog 倉庫的 settings, 再点击 Secrets, 然後添加 private key, name 为 GP_DEPLOY_KEY
打開 Lruihao/lruihao.github.io, 点击 Deploy keys, 添加 public key, name 隨意，Allow write access 一定要勾上，否則無法提交

配置 COS 密鑰

打開 Lruihao/hugo-blog 倉庫的 settings, 再点击 Secrets, 然後添加 COS 桶的 secret_id 和 secret_key:

COS_SECRET_ID
COS_SECRET_KEY

至此，Github Pages 和 COS 都已經可以通過 Github Actions 自動部署了，有部署記錄后，
打開 Lruihao/hugo-blog -> Actions 可以看到構建過程和結果，構建失敗也會收到 Github 發給你的郵件。

COS 自動同步（備用）

本小節內容和 Github Actions 無關，僅作為 COS 備用上傳方式。

COSBrowser

下載 COS 官方軟件 COSBrowser
點開右上角工具箱
選擇文件同步
選擇本地文件夹 eg. hugo-site/public
選擇存储桶目录
同步类型：單次同步、自動同步、定時同步

同步前先執行 hugo 構建命令，eg. hugo --minify
有 Github actions 選單次同步就好，在 Github 不好用時可用。

个人博客从 Hexo 迁移至 Hugo

Lruihao — Sun, 03 Oct 2021 15:27:58 +0800

电脑升级 win 11 后，分盘操作存在 bug, 然后又不小心把装代码的盘格式化了，虽然都有备份到 github, 但是当时为了省事，hexo Node 安装的很多以来插件都没有备份，现在又下载不到了，所以 hexo 博客没办法完整复原，另外，早就觉得基于 Node 的 hexo 实在有些臃肿，且博客内容多了以后部署太慢，就干脆乘机换了好了，经过一段时间寻找，最终选择了基于 Go 的 hugo, 记录一下迁移过程及待办事项。

Hugo 准备

概念

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.

那 hugo 基于编译语言 GO 构建，对于静态页面的构建肯定是碾压 hexo 的存在，其官方标语也是很直白 "The world’s fastest framework for building websites", 作为先后使用过 hexo 和 hugo 的我来说，这确实名副其实。

gohugo

安装

hugo 提供了很多种安装方式，Git, Docker, Binary.
个人电脑使用二进制安装是最方便快捷的，无需安装其他依赖。
到 Hugo Releases 下载对应的 windows 操作系统版本的 Hugo 二进制文件，玩就要玩全的，所以我就选择了扩展版本，此次选择的最新版为 hugo_extended_0.88.1_Windows-64bit.zip, 然后自行解压安装即可。

生成站点

使用 Hugo 快速生成站点，比如希望生成到 /path/to/site 路径：

1

hugo new site /path/to/site

站点目录结构：

▸ archetypes/    # 配置文章模板，相当于 hexo 的 scaffolds
▸ content/       # 文章页面内容，相当于 hexo 的 source
▸ data/          # 可存放一些 yaml, json, toml 格式的数据
▸ layouts/       # 页面布局源码，改造主题可不动主题源码
▸ static/        # 静态文件存放
  config.toml    # 站点配置文件，相当于 hexo 的 _config.yml

创建文章

注：路径要写以 content/ 为根目录的相对路径

1

hugo new path/fileName

添加主题

添加主题的方式选用 Git 子模组的形式，为了日后快速升级，避免在使用 hexo 中因大量魔改 next 主题而导致难以升级的困扰。
精挑细选最终选择了 ~~LoveIt~~ => FixIt

1
2


git init
git submodule add https://github.com/Lruihao/FixIt.git themes/FixIt

在 config.toml 添加 ~~theme = “LoveIt”~~

1

theme = "FixIt"

在本地启动网站

使用以下命令启动网站：

1

hugo serve --disableFastRender

去查看 http://localhost:1313

hugo build

使用以下命令生成静态文件，然后自己可手动选择部署到 github pages 或 COS 等服务器

1

hugo --minify

写作指北

Todo list

本站源码备份 https://github.com/Lruihao/hugo-blog

原来 hexo 做了大量的美化和扩展功能，迁移到 hugo 想尽可能多的保留。取之精华，去其糟粕。

Base

迁移 hexo 所有文章内容
迁移 hexo 所有页面内容

Code Review 怎麼做？新手工程師如何提升「程式碼品質」

Lruihao — Thu, 04 Mar 2021 21:04:18 +0000

程式碼的持續優化

對一個入門的工程師來說，掌握程式語法與模仿範例實作是基本的能力。那有了這樣的基本能之後，要如何寫出更好的程式呢？怎樣才能夠成為一個「優秀」的新手工程師呢？事實上，寫出會動的程式不難，但想寫出好的程式其實是需要刻意練習的。大部分的人會建議要「多練習、多實作」，但我認為在大量練習之外，適時的「優化程式」也是提升「程式碼品質」重要的關鍵。而在「優化程式」可以分成兩個角度：

程式執行效能更好
程式碼結構更精簡

程式執行效能就是從速度跟空間來思考，執行時間越短、變數佔用空間越小。而程式碼結構則會從可讀性和精簡來衡量，例如：變數的命名有沒有意義、程式碼有沒有冗余、繁瑣的部分等等。只不過新手很容易停留在寫出程式的喜悅以及受到固有的解題思考，而忽略優化的過程。

透過「Code Review」是推薦新手的方法，經由反饋與討論來找出程式中可優化的空間。

Code Review 的關注點

以我自己的經驗來說，Review 一份專案的時候會關注：

程式能不能正常操作，有没有什么明显的错误？（低標）
程式碼當中有沒有奇怪的地方？（優化）

第一個關注點是程式碼的低標，結果正確與可正常運行一定是最重要的。如果程式無法運行動或存在很明顯的問題，那再多的優化都沒有意義。除了確保執行之外，同時也會檢查一下是否有低級的邏輯失誤或是安全性的疑慮，像是資料庫沒有正確關閉或密碼明碼沒有加密之類的問題。

第二個關注點是「程式碼品質提升」的部分，我會把它定義成程式運作上沒有問題，但看起來很不舒服或執行效率很差的部分。大致上可以從以下幾點下手：

命名有沒有意義/不一致
資料庫的正規化情況
是否存在特別複雜的程式片段（例如多次的資料庫查詢、多層的迴圈使用）
重複的程式碼有沒有定義成 function
冗長的程式碼能不能拆分成 function

不過一次的 Code Review 建議著重在 3 - 5 個優化地方，比較容易聚焦在優化的品質。根據時程的壓力，決定 Code Review 迭代的次數。

從架構的規劃到細節的優化

在拿到一份程式碼時，通常會先掃過一眼程式的檔案結構，是否有不該上傳的檔案或缺漏。

以這個例子來說，第一眼會覺得檔案配置蠻結構化的。但再多看一點會發現存在幾個冗餘的檔案，例如：-filesqqqq、diff，甚至 /icon 資料夾也不該放在最上層。

進入程式的第一步先從 package.json 檔案開始，確認一下專案的基本資訊是否完整、使用到的套件與版本，以及程式的進入點是什麼。然後打開進入點的檔案（通常會命名成 app 或 main），通常有幾個點需要注意：「套件的載入順序」會建議從第三方套件 → 自定義的模組 → 程式內的變數這樣順序定義；「善用 MVC 的架構」將非主程式的部分依照功能拆分模組，避免檔案資訊量太雜亂。接著就會從 Router → Controller → Service → View 的流程一個一個功能，以下分享一些存在優化空間的程式碼：

善用工具，已有的工具，不用自己手刻
變數名稱不建議用大寫開頭（通常是用在 Class 的命名）
保持優化的空間與彈性

「優化其實是一種取捨」，不需要也不應該追求一步到位。開發往往都是在品質跟產出做取捨，初期可以把開發目標放在「先求可以動，再求持續優化」的節奏上。新手需要在意的點有幾下兩點：

很容易把重點全部放在程式碼的產出上而忽略的程式碼的品質。
停留在做出成果的喜悅，而停滯了優化的步調。

因此，會建議在開發當下就「多想」兩秒鐘，感覺可優化但來不及的部分先在旁邊加個註解提醒自己。另外也養成一段時間回頭看之前的程式碼的習慣，試著刻意找出可以優化改進的部分。專案的提交可能會有期限，但程式碼的優化沒有盡頭。面對相同的專案與程式碼，唯有透過不停的迭代優化才能打造更好的程式，同時也見證了你和程式一起變得更好的過程。所以建立逐步優化的空間，養成持續提升程式碼品質的習慣，才是一個新手工程師需要修煉的心法。

cell-blog 开发记录

Lruihao — Sat, 25 Jul 2020 20:42:42 +0000

Cell Blog 开发记录，项目地址

搭建 php 环境

安装 wampserver
安装 composer
更换 aliyun 源

1

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

新建 laravel 项目

1

composer create-project --prefer-dist laravel/laravel cell-blog "7.*"

或者

1
2


composer global require laravel/installer
laravel new blog

下载 debugbar

1

composer require barryvdh/laravel-debugbar --dev

修改语言时区

修改 config/app.php，将 local 的值 en 改成 zh-CN(laravel-admin 自带 zh-CN)：

1
2
3
4


## 时区
'timezone' => 'Asia/Shanghai',
## 语言
'locale' => 'zh-CN',

配置数据库

首先确保安装好了 laravel，并且数据库连接设置正确。

1
2
3
4
5
6
7
8


APP_URL=http://cell.blog

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307
DB_DATABASE=cell_blog
DB_USERNAME=root
DB_PASSWORD=123456

下载 laravel-admin

1
2


cd cell-blog
composer require encore/laravel-admin

卸载命令composer remove xxx

然后运行下面的命令来发布资源：

1

php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"

在该命令会生成配置文件config/admin.php，可以在里面修改安装的地址、数据库连接、以及表名，建议都是用默认配置不修改。

然后运行下面的命令完成安装：

1

php artisan admin:install

运行这个命令的时候，如果遇到了下面的错误： SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes (SQL: alter tableusersadd uniqueusers_email_unique(email))
参考这个 issue 来解决 https://github.com/z-song/laravel-admin/issues/1541
在app\Providers\AppServiceProvider.php添加默认值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema; //add fixed sql

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191); //add fixed sql
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

启动服务后，在浏览器打开 http://localhost/admin/ , 使用用户名 admin 和密码 admin 登录。

报错Disk [admin] not configured, please add a disk config in config/filesystems.php

在config/filesystems.php中 disks 处添加以下配置后执行php artisan storage:link来创建软链接（windows 和 linux 的软链接不一样不能直接复制！）

宝塔执行时删除禁用函数 putenv(),symlink()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


'admin' => [
    'driver' => 'local',
    'root' => storage_path('app/public/system'),
    'url' => env('APP_URL').'/storage/system',
    'visibility' => 'public',
],

或

'admin' => [
    'driver' => 'local',
    'root' => public_path('uploads'),
    'url' => env('APP_URL').'/public/uploads/',
    'visibility' => 'public',
],

下载 dcat-admin

1

composer require dcat/laravel-admin

然后运行下面的命令来发布资源：

1

php artisan admin:publish

在该命令会生成配置文件config/admin.php，可以在里面修改安装的地址、数据库连接、以及表名，建议都是用默认配置不修改。

然后运行下面的命令完成安装：

1

php artisan admin:install

迁移文件创建表

1
2
3
4
5
6
7
8
9


php artisan make:migration create_articles_table
php artisan make:migration create_tags_table
php artisan make:migration create_categories_table
php artisan make:migration create_article_tags_table
php artisan make:migration create_navigations_table
php artisan make:migration create_friendship_links_table
php artisan make:migration create_pages_table
php artisan make:migration create_systems_table
php artisan make:migration create_mottoes_table

运行迁移

1

php artisan migrate

创建模型 model

1
2
3
4
5
6
7
8


php artisan make:model Models/Article
php artisan make:model Models/Category
php artisan make:model Models/Tag
php artisan make:model Models/Navigation
php artisan make:model Models/FriendshipLink
php artisan make:model Models/Page
php artisan make:model Models/System
php artisan make:model Models/Motto

创建控制器

1
2
3
4
5
6
7
8


php artisan admin:make ArticleController --model=App\Models\Article
php artisan admin:make CategoryController --model=App\Models\Category
php artisan admin:make TagController --model=App\Models\Tag
php artisan admin:make NavigationController --model=App\Models\Navigation
php artisan admin:make FriendshipLinkController --model=App\Models\FriendshipLink
php artisan admin:make PageController --model=App\Models\Page
php artisan admin:make SystemController --model=App\Models\System
php artisan admin:make MottoController --model=App\Models\Motto

添加后台路由

app/Admin/routes.php

1
2
3
4
5
6
7
8


$router->resource('articles', ArticleController::class);
$router->resource('categories', CategoryController::class);
$router->resource('tags', TagController::class);
$router->resource('navigations', NavigationController::class);
$router->resource('friendship-links', FriendshipLinkController::class);
$router->resource('pages', PageController::class);
$router->resource('systems', SystemController::class);
$router->resource('mottoes', MottoController::class);

editormd 安装

editormd github 图像问题

存放本地表情

1

public\vendor\laravel-admin-ext\editormd\editormd-1.5.0\images\emojis

修改 editormd.js 及 editormd.min.js

1
2
3
4
5


// Emoji graphics files url path
editormd.emoji     = {
    path  : "/iamges/emojis/",
    ext   : ".png"
};

图片上传

csrf 419 错误

可以在VerifyCsrfToken.php中添加白名单跳过验证，或者手动添加 csrf 验证器：

修改 image-dialog.js 的var dialogContent
参考

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


if (settings.crossDomainUpload)
{
    action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
}
//添加 csrf 验证
var csrfToken = $('meta[name="csrf-token"]').attr('content');
var csrfField = "";
if (csrfToken) {
    csrfField = "";
}

markdown 转 HTML

https://www.zhiqiexing.com/119.html Laravel Markdown 安装

1
2


composer require graham-campbell/markdown
php artisan vendor:publish

扩展表格

1

composer require league/commonmark

config/markdown.php

1
2
3


'extensions' => [
        League\CommonMark\Extension\TaskList\TaskListExtension::class,
    ],

Eloquent 模型事件

Eloquent 模型可以触发事件，允许你在模型生命周期中的多个时间点调用如下这些方法：retrieved, creating, created, updating, updated, saving, saved, deleting, deleted, restoring, restored。事件允许你在一个指定模型类每次保存或更新的时候执行代码。

retrieved 事件会在从数据库中获取已存在模型时触发。当一个新模型被首次保存的时候，creating 和 created 事件会被触发。如果一个模型已经在数据库中存在并调用 save 方法，updating/updated 事件会被触发，无论是创建还是更新，saving/saved 事件都会被触发。

添加后台验证码

依赖 php 扩展fileinfo
添加验证码

Media manager

1
2


composer require laravel-admin-ext/media-manager
php artisan admin:import media-manager

’extensions’ => [ ‘media-manager’ => [ // Select a local disk that you configured in config/filesystem.php ‘disk’ => ‘public’ ], ],

1
2

## 给 laravel-admin 增加锁屏功能

composer require laravel-admin-ext/lock-screen

1
2
3
4
5
6
7
8


'route' => [
    'prefix' => 'demo',

    'namespace'     => 'App\\Admin\\Controllers',

    // 在中间件数组中加上'admin.lock'
    'middleware'    => ['web', 'admin', 'admin.lock'],
],

前台设计

创建控制器

1
2
3
4
5


php artisan make:controller HomeController
php artisan make:controller ArticleController
php artisan make:controller CategoryController
php artisan make:controller TagController
php artisan make:controller PageController

后台 img 灯箱

https://github.com/laravel-admin-extensions/grid-lightbox

1
2
3


composer require laravel-admin-ext/grid-lightbox

php artisan vendor:publish --tag=laravel-admin-grid-lightbox

Sublime Text3 快捷键大全

Lruihao — Thu, 15 Aug 2019 20:59:10 +0000

Sublime Text3 快捷键一览表

tab 转 space

打开 Settings, 加入几行配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
  "color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme",
  "font_size": 14,
  "ignored_packages":
  [
    "Vintage"
  ],
  "theme": "Adaptive.sublime-theme",
+  "expand_tabs_on_save": true,
+  "tab_size": 2,
+  "translate_tabs_to_spaces": true
}

选择类

Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。
Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。
Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。
Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容。
Ctrl+M 光标移动至括号内结束或开始的位置。
Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。
Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行。
Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。
Ctrl+Shift+] 选中代码，按下快捷键，展开代码。
Ctrl+K+0 展开所有折叠代码。
Ctrl+← 向左单位性地移动光标，快速移动光标。
Ctrl+→ 向右单位性地移动光标，快速移动光标。
shift+↑ 向上选中多行。
shift+↓ 向下选中多行。
Shift+← 向左选中文本。
Shift+→ 向右选中文本。
Ctrl+Shift+← 向左单位性地选中文本。
Ctrl+Shift+→ 向右单位性地选中文本。
Ctrl+Shift+↑ 将光标所在行和上一行代码互换（将光标所在行插入到上一行之前）。
Ctrl+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后）。
Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行。
Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行。

编辑类

Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的 CSS 属性合并为一行。
Ctrl+Shift+D 复制光标所在整行，插入到下一行。
Tab 向右缩进。
Shift+Tab 向左缩进。
Ctrl+K+K 从光标处开始删除代码至行尾。
Ctrl+Shift+K 删除整行。
Ctrl+/ 注释单行。
Ctrl+Shift+/ 注释多行。
Ctrl+K+U 转换大写。
Ctrl+K+L 转换小写。
Ctrl+Z 撤销。
Ctrl+Y 恢复撤销。
Ctrl+U 软撤销，感觉和 Gtrl+Z 一样。
Ctrl+F2 设置书签
Ctrl+T 左右字母互换。
F6 单词检测拼写

搜索类

Ctrl+F 打开底部搜索框，查找关键字。
Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是 sublime 允许添加多个文件夹进行查找，略高端，未研究。
Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。
Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。
Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数。
Ctrl+：打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。
Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用 sublime text 或插件的功能，例如使用 package 安装插件。
Esc 退出光标多行选择，退出搜索框，命令框等。

显示类

Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。
Ctrl+PageDown 向左切换当前窗口的标签页。
Ctrl+PageUp 向右切换当前窗口的标签页。
Alt+Shift+1 窗口分屏，恢复默认 1 屏（非小键盘的数字）
Alt+Shift+2 左右分屏-2 列
Alt+Shift+3 左右分屏-3 列
Alt+Shift+4 左右分屏-4 列
Alt+Shift+5 等分 4 屏
Alt+Shift+8 垂直分屏-2 屏
Alt+Shift+9 垂直分屏-3 屏
Ctrl+K+B 开启/关闭侧边栏。
F11 全屏模式
Shift+F11 免打扰模式

NetBeans IDE 开发设置

Lruihao — Thu, 15 Aug 2019 18:36:15 +0000

安裝

官方下載點

擴充功能

安裝擴充功能

下載擴充套件包
- 官方套件庫
- 或者在 NetBeans IDE 裏面下載插件（方便）
開啟 NetBeans→Tools→Plugins→Downloaded→Add Plugins
選擇要安裝的擴充套件包

啟用已安裝的擴充功能

開啟 NetBeans→Tools→Plugins→Installed
選擇要啟用的套件 (*.npm)
點擊 Activate

匯入設定

開啟 NetBeans→Tools→Options
點擊 Import 匯入設定
選擇要匯入的套件包 (*.zip)

常用設定

程式碼排版

在程式開發中，程式碼排版很重要。一個好的排版利於開發人員程式閱讀，也便於後期維護人員閱讀。

在 NetBeans 中設置程式碼排版

打開 NetBeans->Tools->Options->Editor->Formatting；
Language 選擇 All Languages，勾選"Expand Tabs to Spaces", 用兩個空格鍵代替 Tab 鍵，首行留兩個 Tab 鍵。
點擊 Apply 或 Ok 完成設置。具體設置及效果如下圖所示：

程式碼樣板

程式碼樣板可以幫助你快速書寫程序，不必繁瑣地聲明函數或其他代碼塊，更專注與邏輯的書寫。

在 NetBeans 中設置程式碼樣板

打開 NetBeans→Tools→Options→Editor→Code Templates；
選擇你所用的語言（這裡以 JavaScript 為例）；
點擊"New"新建屬於你的或修改原有的程式碼樣板（例子僅為演示）；
在編程中應用它。

前端壓縮

下載擴充套件netbeans minify 或者 minifierBeans

開啟 NetBeans→Tools→Plugins→Downloaded→Add Plugins
選擇你下載的擴充套件開啟
開啟 NetBeans→Tools→options

快捷鍵

键位	作用
Ctrl+/	注释一行（或选中部分）
Ctrl+X	剪切一行（或选中部分）
Ctrl+E	删除一行（或选中部分）
Shift+Alt+上下方向键	移动当前行
Ctrl+Shift+上下方向键	复制当前行（该操作并非复制到粘贴板）
Shift+Alt+F	整理代码
TAB	代碼自動補全/缩进/選中文字同時缩进
Shift+TAB	選中文字同時取消缩进
Ctrl+F	查找某个字
Ctrl+Shift+F	整个项目中查找某个字
Ctrl+H	替换某个字
Ctrl+Enter	增加空白行，光标不动。
Ctrl+(0~7)	打开各种小窗口
Shift+方向键	選中文字
Ctrl+Alt+Space	代码输入提示，不习惯的可以设置为 (Alt+/)，超级好用！！！
Ctrl+Shift+F5	调试当前程序
Shift+F6	运行当前程序
F6	运行主程序
Alt+Enter	显示程式 bug 建议或者警示等

NetBeans 中常用的快捷鍵 ↑：
三種複製行方法

复制一行：Ctrl + Shift + 上下方向键（该操作并非复制到粘贴板）；
复制一行：在该行任何地方连续三击选中一样，然后 Ctrl + C 即可复制一行。；
复制一行（使用宏）: 编辑-开始录制宏 (Home,Shift + End,Ctrl + C)-停止录制宏-设置宏名称（如 select-entire-line)-设置快捷键（如 Ctrl + Alt + C)；

也可自己修改快捷鍵 (Tools→Options→Keympa), 如下圖

{% asset_img quickkey.png quickkey %}

遠程開發 (FTP)

工作为例

新建项目
1. 打开软件，进入新建项目页面（File-New Project），新建 php 项目，选择第一个（PHP-PHP Application）
2. 项目名和地址自己选择（注意，选择地址后需在地址最后面加上"/项目名"）
FTP 设置
1. 点击下一步，进入 FTP 设置，Run As 选择 Remote Web Site(FTP,SFTP)
2. Project URL 填写http://127.0.0.1/training/工号
Manage 设置
1. 点击 Manage, 进入页面。名字自取。Host Name 填写：127.0.0.1
2. Encryption 选择 Pure FTP,User Name 和 Password（填写工号/课务系统登录密码）
3. Initial Directory 填写_training
4. 点击 Test Connection 测试是否连接成功
其他设置
1. Upload Directory, 上传目录不填，直接上传至个人根目录
2. Upload File 改为保存时上传文件（On Save）

Chrome with NetNeans Connector

打開 chrome 中的應用程式商店（使用 chrome 瀏覽器點擊下方鏈接即可）
chrome 應用程式商店
在搜索框中輸入 NetNeans Connector 后搜索，然後點擊右邊的加到 Chrome 即可，安裝成功后右上角會顯示 NetBeans 圖標。
開啟 netbeans 選擇 Run→Set Project Browser→ 選中 Chrome with NetBeans Connector
選擇 default 下的 Customize → 選擇 Browser → 選擇 Browser 下 Chrome with NetBeans Connector 即可

WAMPServer 自定义网站根目录等设置

Lruihao — Fri, 12 Jul 2019 18:44:36 +0000

使用 WAMPServer 时自定义网站根目录。

WAMPServer 自定义网站根目录

修改 apache 配置文件

打开httpd.conf文件搜索documentroot后，找到路径修改为自定义的。

再打开httpd-vhost.conf文件修改对应的路径。
修改完配置文件需要重启所有服务！

修改 wampmanager 文件

在 wampserver 安装路径根目录知道wampmanager.ini和wampmanager.tpl两个文件。搜索menu.left, 然后也修改为自定义的路径。 然后退出，重启软件！

编写 php 文件测试

1
2
3


php
	echo "hello world";
?>

WAMPServer 多站点配置

打开httpd-vhost.conf文件，复制原有的几行配置文件，粘贴修改路径和域名等配置。比如

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


## Virtual Hosts
#

  ServerName localhost
  ServerAlias localhost
  DocumentRoot "g:/Demo"
  
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  



  ServerName test01.com
  DocumentRoot "g:/Demo/test01"



  ServerName test02.com
  DocumentRoot "g:/Demo/test02"

再打开C:\Windows\System32\drivers\etc\hosts文件，在文件最后添加类似于云服务器的域名解析，进行本地域名解析，当输入域名时优先从本地申请资源。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


...

## For example:
#
## 102.54.94.97 rhino.acme.com ## source server
## 38.25.63.10 x.acme.com ## x client host
## localhost name resolution is handled within DNS itself.
#	127.0.0.1 localhost
#	::1 localhost
127.0.0.1 steamcommunity.com
192.168.28.1 windows10.microdone.cn
127.0.0.1 localhost
::1 localhost
127.0.0.1 test01.com
127.0.0.1 test02.com

WAMPServer 自拟定端口

WAMP 服务我安装了好几次，每次因为修改配置文件搞崩了。第一次装的时候发现 80 端口被占用了，因为以前玩了一下 Windows 的 IIS，暂停 IIS 的网站，再使用命令或者直接在控制面板关掉就好了。

如果不使用 80 多为默认端口，比如修改为 8080，还是在httpd.conf文件里修改。搜索80都改成8080然后，Ctrl+S 保存，重新启动 WampServer
在浏览器地址栏输入localhost:8000

1
2
3
4


#监听端口
Listen 0.0.0.0:8080
Listen [::0]:8080
ServerName localhost:8080

使用 Notepad++打开 C:\wamp 目录下的 wampmanager.ini 和 wampmanager.tpl
Ctrl+F 查找 localhost
将其全部替换为localhost:8000
然后，Ctrl+S 保存，重新启动 WampServer

HustOJ 基础搭建教程

Lruihao — Fri, 17 May 2019 23:08:04 +0000

目前 HustOj 在 GitHUb 地址是：https://github.com/zhblue/hustoj
安装时注意 ubuntu 版本，没条件的可以在自己 ubuntu 上尝试，或者虚拟机上（关注公众号回复ubuntu16.04获取 iso 镜像文件），也可以在云实验室的云服务器上做做实验。
更多说明及 ACM/NOIP 题库下载见官网博客代码的那些事|程序员回忆录

快速安装 OJ

下载

1

wget https://raw.githubusercontent.com/zhblue/hustoj/master/trunk/install/install-ubuntu16+.sh

安装

1

sudo bash install-ubuntu16+.sh

等待中一路回车，当提示 done！则表示安装成功：

使用 HustOJ

打开网页/IP 地址
注册 admin
用 admin 作为用户名注册一个用户，将会自动成为管理员。

注册成功，会提示：

登录后台
登录账号，并点击右上角的管理：

添加测试题目
在后台选择添加题目，添加成功：

然后再提交代码测试判题机。

说明

安装后几个重要配置文件的位置

1
2
3
4


/home/judge/etc/judge.conf
/home/judge/src/web/include/db_info.inc.php
/etc/php5/fpm/php.ini 或 /etc/php7.0/fpm/php.ini
/etc/nginx/sites-enabled/default

前端面试题 - HTML+CSS

Lruihao — Sat, 30 Mar 2019 22:58:39 +0000

原文链接
“卓越班”到了大三突然掀起一股毕业慌，一部分人投身于考研的热潮中，一部分人选择了培训机构学习技术。而我出于种种原因既不考研也不培训，选择自学 java 和 web 相关的知识，也希望因此能在以后谋得一份心仪的工作。

如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

HTML

1. Doctype 作用，HTML5 为什么只需要写

doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。声明必须是 HTML 文档的第一行，位于 html 标签之前

HTML5 不基于 SGML，所以不需要引用 DTD。在 HTML5 中只有一种

SGML: 标准通用标记语言，是现时常用的超文本格式的最高层次标准

2. 行内元素有哪些，块级元素有哪些，空 (void) 元素有那些

行内元素：a span i img input select b 等

块级元素：div ul ol li h1~h6 p table 等

空元素：br hr link 等

3. 简述一下你对 HTML 语义化的理解

简单来说，就是合适的标签做合适的事情，这样具有以下好处：

有助于构架良好的 HTML 结构，有利于搜索引擎的建立索引、抓取，利于 SEO
有利于不同设备的解析
有利于构建清晰的机构，有利于团队的开发、维护

4. 常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解

Trident 内核：IE

Gecko 内核：NETSCAPE6 及以上版本，火狐

Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]

Webkit 内核：Safari，Chrome 等。[Chrome 的：Blink（WebKit 的分支）]

浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

5. html5 有哪些新特性

语义化标签：header footer nav section article aside 等
增强型表单：date（从一个日期选择器选择一个日期） email（包含 e-mail 地址的输入域） number（数值的输入域） range（一定范围内数字值的输入域） search（用于搜索域） tel（定义输入电话号码字段）等
视频和音频：audio video
Canvas 绘图 SVG 绘图
地理定位：Geolocation
拖放 API：drag
web worker：是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
web storage: localStorage sessionStorage
WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

6. 描述一下 cookie，sessionStorage 和 localStorage 的区别

特性	Cookie	localStorage	sessionStorage
生命周期	可设置失效时间，没有设置的话，默认是关闭浏览器后失效	除非被手动清除，否则将会永久保存	仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
存放数据大小	4KB 左右	可以保存 5MB 的信息	可以保存 5MB 的信息
http 请求	每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信

7. 如何实现浏览器内多个标签页之间的通信

使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
websocket 协议
webworker

多个标签页之间的通信

8. HTML5 的离线存储怎么使用，解释一下工作原理

HTML5 的离线存储

9. src 与 href 的区别

区别：src 用于替代这个元素，而 href 用于建立这个标签与外部资源之间的关系

浏览器加载到这里的时候，html 的渲染和解析不会暂停，css 文件的加载是同时进行的

当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个 js 文件

10. 表单提交中 Get 和 Post 方式的区别

Get 一般用于从服务器上获取数据，Post 向服务器传送数据
Get 传输的数据是拼接在 Url 之后的，对用户是可见的；Post 的传输数据对用户是不可见的
Get 传送的数据量较小，不能大于 2KB。Post 传送的数据量较大，一般被默认为不受限制
Get 安全性非常低，Post 安全性较高
在 FORM 提交的时候，如果不指定 Method，则默认为 Get 请求

CSS

1. css 盒子模型，box-sizing 属性的理解

css 的盒模型由 content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。但盒子的大小由 content+padding+border 这几部分决定

box-sizing 是一个 CSS3 属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing 有三个属性：

1

box-sizing: content-box|border-box|inherit:

content-box 使得元素的宽高即为内容区的宽高（默认模式）
border-box: 计算方式 content + padding + border = 本身元素大小，即缩小了 content 大小
inherit 指定 box-sizing 属性的值，应该从父元素继承

2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。

清除浮动的方式：

为父元素设置高度
为父元素添加overflow:hidden
伪元素

1
2
3
4
5


.fix::after {
  content: '';
  display: block;
  clear: both;
}

使用伪元素的好处：不增加冗余的 DOM 节点，符合语义化

overflow:hidden 可以触发 BFC 机制。BFC：块级格式化上下文，创建了 BFC 的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算 BFC 的高度时，浮动元素也参与计算

3. 如何让一个不定宽高的盒子水平垂直居中

定位的方式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

css3 属性

1
2
3
4
5
6
7
8
9


.father {
  position: relative;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 布局

1
2
3
4
5


.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. px 和 em 和 rem 的区别

px: 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em的值并不是固定的，会继承父级元素的字体大小，代表倍数

rem的值并不是固定的，始终是基于根元素的，也代表倍数

5. position 的值有哪些

static：默认值。没有定位，元素出现在正常的流中

relative（相对定位）：生成相对定位的元素，相对于其正常（原先本身）位置进行定位

absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

6. display:none 与 visibility：hidden 的区别

区别	display:none	visibility：hidden 的
是否占据空间	不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）	该元素空间依旧存在
是否渲染	会触发 reflow（回流），进行渲染	只会触发 repaint（重绘），因为没有发现位置变化，不进行渲染
是否是继承属性	不是继承属性，元素及其子元素都会消失	是继承属性，若子元素使用了 visibility:visible，则不继承，这个子孙元素又会显现出

7. CSS 中 link 和@import 的区别

link 属于 XHTML 标签，@import 完全是 CSS 提供的一种方式，只能加载 CSS

加载顺序的差别，当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载

兼容性的差别。由于@import 是 CSS2.1 提出的所以老的浏览器不支持，而 link 标签无此问题

当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的

8. 什么是响应式设计，响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

9. 为什么要初始化 CSS 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异

初始化样式会对 SEO 有一定的影响

10. CSS3 有哪些新特性

实现圆角border-radius，阴影box-shadow，边框图片border-image
对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
实现旋转transform:rotate(90deg), 缩放scale(0.85,0.90),translate(0px,-30px)定位，倾斜skew(-9deg,0deg);
增加了更多的 CSS 选择器、多背景、rgba()
唯一引入的伪元素是::selection；
实现媒体查询@media，多栏布局flex
过渡transition 动画animation

11. ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用

单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。（伪元素由双冒号和伪元素名称组成）, 双冒号是在当前规范中引入的，用于区分伪类和伪元素

12. CSS 优化、提高性能的方法有哪些

移除空的 css 规则（Remove empty rules）
正确使用 display 的属性
不滥用浮动、web 字体
不声明过多的 font-size
不在选择符中使用 ID 标识符
遵守盒模型规则
尽量减少页面重排、重绘
抽象提取公共样式，减少代码量

13. 重绘和回流

重绘和回流

14. flex 布局

flex 布局教程–阮一峰

15. css 预处理器

提供了一种 css 的书写方式，常见的就是 SAAS 文档和 LESS 文档

hexo-theme-next @modified LRH

Lruihao — Thu, 21 Mar 2019 16:43:19 +0000

危险

如无必要，不再更新！（2019.09.13）
今晚我做出了一个慎重的决定，由于博主时间精力有限，需要更多的时间来工作和学习。所以我将放弃对 next 的主题的自定义修改，next 主题官方已经更新到了 7.0+的版本，喜欢 next 主题风格的朋友可以在 github 更新。
我这也算是上古版本了，版本差距实在过大，所以我也将放弃博客使用主题的更新。
以下仍为当前博客使用主题，lib 资源已打包 github。

基于 hexo-theme-next 6.0+ 的 Pisces 模板做的 DIY 扩展性设计（部分兼容 next 其他几种模板）。主要是一些 custom style 还有一些第三方的 js。修改的地方太多也有点小乱就不提 PR 了。
modified 官方 Demo => https://theme-next.org
记录一下折腾过程，以后备份恢复博客也好方便自己。本文之前的美化修改请见 hexo 标签。
主题中若有遗漏第三方插件或应用的 key 及 id 值等请修改为自己对应的值

主要的几个自定义文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


_config.swig                                 #主题配置文件 相关账户信息自己注册替换
\layout\custom\head.swig                     #在头部自定义加入标签
\layout\custom\google_adsense.swig           #谷歌广告模块，内有注释暂时弃用
\layout\_layout.swig                         #主布局
\layout\_macro\post.swig                     #文章布局
\layout\_macro\post-copyright.swig           #文章版权
\layout\_macro\siderbar.swig                 #侧栏模板
\layout\_third-party\copy-code.swig          #复制按钮
\layout\_partials\comments.swig              #评论主模板
\layout\_partials\footer.swig                #底部模板#该模块在 layout.swig 引入，用于在 body 自定义标签
\layout\_partials\footer_custom.swig         #footer 自定义文件
\layout\_third-party\custom.swig             #该模块在 layout.swig 引入用于在 body 自定义标签
\source\css\_custom\customs.styl             #主要用户自定义样式表
\source\fonts\                               #引入了一些我的手写体及外部字体
\scripts\qcloudcdn.js                        #腾讯云 cos 桶刷新缓存的脚本，不需要可删掉 [^1]

初步安装

安装整个改过的主题，然后下载相应的 lib 资源解压放入 source 文件夹

1
2


cd hexo
git clone https://github.com/Lruihao/hexo-theme-next themes/next

主题配置文件_config.yml, 选择主题

1

theme: next

lib 下载 http://github.com/Lruihao/hexo-theme-next/releases/tag/v6.9.1

更新内容

更多自定义详见源码

links 模板

自定义友链模板，打开hexo\themes\next\layout\新建links.swig文件，写下以下内容后保存。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129


{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

  {% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === "categories" and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

  #}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}


    {##################}
    {#### PAGE BLOCK ###}
    {##################}

      {% include '_partials/page-header.swig' %}
      {#################}
      {#### PAGE BODY ###}
      {#################}

      


          {% for svg,link in site.data.links %}

              
                {% if link.avatar %}
                  
                {% else %}
                  
                    
                  
                {% endif %}
                @{{ link.nickname }}
              
            
          {% endfor %}
        
        {{ page.content }}
      

      

      {#####################}
      {#### END PAGE BODY ###}
      {#####################}
    
    {% include '_partials/breadcrumb.swig' %}
    {######################}
    {#### END PAGE BLOCK ###}
    {######################}
  

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

若未使用懒加载请将模板中的data-original属性改为src
若懒加载无法加载预览图请手动添加src="/images/loading.gif"
若 fancybox 显示 alt 内容请更换 fancybox2 或者将 alt 属值删除

然后hexo n page links新建一个页面文章配置写下如下内容：

1
2
3
4


---
title: 友情链接
layout: links
---

然后在links页面文件夹下面新建文件夹_data，再在里面新建links.yml，内容如下

1
2
3
4
5
6
7
8


- nickname: 博採眾長
  avatar: http://lruihao.cn/images/avatar.png
  site: http://lruihao.cn
  info: 一个菜鸟的博客
- nickname:                 #友链名称
  avatar:                   #友链头像
  site:                     #友链地址
  info:                     #友链说明

备案信息自定义

1
2
3
4
5
6
7
8


## -------------------------------------------------------------
## footer_custom Settings
## -------------------------------------------------------------
beian:
  enable: true
  gov: 湘公网安备 43030402000254 号
  recordcode: 43030402000254
  icp: 湘 ICP 备 18020535 号

文字抖动特效

1

 class="shaky">（づ●'◡'●) づ ❥内容区

（づ●'◡'●) づ ❥内容区

左下角微信公众号

1

\source\css\_custom\customs.styl

Chat Services

共 chatra,tidio,daovoice 三个选项，三选一

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


## Chatra Support
## See: https://chatra.io
## Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: ## visit Dashboard to get your ChatraID
  #embed: ## unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto

## Tidio Support
## See: https://www.tidiochat.com
## Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
  enable: false
  key: ## Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer

#在线客服
daovoice: true
daovoice_app_id: xxxx   ## http://www.daovoice.io/

pdf 和 Mermaid 解析模块

pdf 传送门

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


pdf:
  enable: false
  ## Default height
  height: 500px
  pdfobject:
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

## Mermaid tag
mermaid:
  enable: false
  ## Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

模仿 csdn 转发样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


...
   
+    {% if post.repost %}
+      转
+    {% endif %}
     {{ post.title | default(__('post.untitled'))}}
   
 {% else -%}
+  {% if post.repost %}
+    转
+  {% endif %}
   {{- post.title -}}
...

1
2
3
4
5
6
7
8


.repost {
  color: #5acc79;
  border: 1px solid #e7f4df;
  border-radius: 20px;
  padding: 2px 5px;
  font-size: 15px;
  font-weight: 500;
}

1
2
3
4


---
title: xxxx
repost: true
---

预览

热度页面

打开hexo\themes\next\layout新建 top.swig 文件，写下如下内容保存：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109


{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

  {% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === "categories" and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

  #}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}


    {##################}
    {#### PAGE BLOCK ###}
    {##################}

      {% include '_partials/page-header.swig' %}
      {#################}
      {#### PAGE BODY ###}
      {#################}


        {{ page.content }}
      

      
      
      
      

      {#####################}
      {#### END PAGE BODY ###}
      {#####################}
    
    {% include '_partials/breadcrumb.swig' %}
    {######################}
    {#### END PAGE BLOCK ###}
    {######################}
  

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

其中第 36 行改成你自己的 leancloud 的 appid 和 appkey, 比如我的是在主题配置文件里面的 valine 配置下，所以我就写成theme.valine.appid。和我一样就不需要修改，其他自行配置。

然后hexo n page top新建一个页面文章配置写下如下内容，limit 表示显示篇数：

1
2
3
4
5


---
title: 热度
layout: top
limit: 20
---

复制按钮样式

本来只想简单美化一下变成 night 样式的，后来写完发现 3dbtn 也挺喜欢的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


codeblock:
  ## Manual define the border radius in codeblock
  ## Leave it empty for the default 1
  border_radius: 5
  ## Add copy button on codeblock
  copy_button:
    enable: true
    ## Show text copy result
    show_result: true
    ## Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme
    style: night

web 汇总

Lruihao — Mon, 18 Mar 2019 20:40:55 +0000

下面一些 web 开发的一些总结，还有一些常用到的代码，脚本等！

front-end

html

HTML+CSS

oblique 和 intalic 的区别

这两个都是font-style属性的值，这两个值都能实现倾斜的效果，但是有区别的。

intalic: 这个是字体的倾斜，相当于斜体，字体必须有倾斜属性。
oblique: 这个准确地说是让文字倾斜。相当于斜字，字体不一定要有倾斜属性。

title 显示换行

使用或使用

1
2


使用`
`
使用``

图片类型选择

css

flexbox

Flex 布局将成为未来布局的首选方案，比如说常见的 bootstrap4 的版本就用 flex 替代了 float 来进行排版。
我在网上看到几个很好的教程，图文并茂，一目了然。

A Complete Guide to Flexbox

Flex 布局教程：语法篇

实在懒癌发作，笔记本上手抄了笔记我就不写学习总结了，还有网友 Demo 也写了。

javascript

keydown 和 keypress

keydown：按下键盘键
keypress：紧接着keydown事件触发（只有按下字符键时触发）
如果用户按下了一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止。
如果用户按下了一个非字符键不放，就会重复触发keydown事件，直到用户松开该键为止。

详解键盘事件 (keydown，keypress，keyup)

textContent、innerText 和 innerHTML 的区别

设置标签中的文本内容，应该使用textContent或innerText（更老）属性，区别在于浏览器支援程度

innerHTML能够获得元素内的所有标签内容，也可以设置标签使之生效。（注意防止 XSS 注入）

如果某个属性在浏览器中不支持，那么这个属性的类型是undefined，判断这个属性的类型是不是undefined，就知道浏览器是否支持。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<script>
  // 设置任意的标签中间的任意文本内容
  function setInnerText(element, text) {
      //判断浏览器是否支持这个属性
      if (typeof element.textContent == "undefined") {//不支持
          element.innerText = text;
      } else {//支持这个属性
          element.textContent = text;
      }
  };
</script>

图床方案

自行搭建比如使用开源图床 ImgURL 搭建的img.lruihao.cn（需要服务器）
使用上传工具加第三方免费空间，比如PicGo + 腾讯云 COS（无需服务器）

使用各大图床
诸如 sm.ms，腾讯云 COS，阿里云 OSS，七牛云，又拍云，Github，微博图床，ImgURL 图床等等

font-awesome

现在使用 5 的版本，可以使用webfont+css或svg+js

1

 rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

其他的图标 js

响应式（自适应）

1
2


 rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
 src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">

1

 name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

.col-xs- 超小屏幕手机 <768px

.col-sm- 小屏幕平板 >=768px

.col-md- 中等屏幕 >=992px

.col-lg- 大屏幕 >1200px

css3 写法 @media （宽度具体调整）

1
2
3
4
5
6
7
8


/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
  /*手机端 css 样式表*/
}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
  /*电脑端 css 样式表*/
}

link 引入不同 css

1
2
3
4



 rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/>

 rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/>

jquery

1
2
3
4
5
6
7
8


 src="https://code.jquery.com/jquery-3.3.1.min.js">

 src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

 src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

 src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js">
//还有其他的源 ...

QQ 推广链接

QQ 推广 QQ 群

Google fonts

1
2
3
4


https://fonts.google.com/
一般选用国内源镜像替代（待补充 ...）
+ https://fonts.loli.net
+ //fonts.lug.ustc.edu.cn

fancybox

github 介绍 fancybox 源

1
2


 href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
 src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js">

back-end

更多学习内容见学习课件
练习作业源码+Demo

eclipse 的基本使用

Lruihao — Fri, 15 Mar 2019 23:47:24 +0000

基本使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


A: 选择一个工作空间
	D:\develop\eclipse-SDK-3.7.2-win64\workspace
B: 如何写一个 HelloWorld 案例（代码以项目为基本单位）
	a: 创建项目（工程）
		*File -- New -- Java Project
		*在左边空白处，直接右键 -- New -- Java Project

		键入项目名称后直接 Finish。
	b: 所有的 java 文件必须写到 src 下面才有效
	c: 创建一个包
		cn.lruihao
	d: 在包下创建一个类
		HelloWorld

		同时让它帮我们写好了 main 方法。
	e: 在 main 方法中写内容即可
	f: 编译程序
		自动编译，在保存的那一刻帮你做好了
	g: 运行程序
		选择要运行的文件或者在要运行的文件内容中
		右键 -- Run as - Java Application 即可
	h: 内容显示
		在 Console 控制台显示内容

Eclipse 的基本设置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


A: 程序的编译和运行的环境配置（如果你的 Eclipse 启动没有问题，就不要配置了）
B: 去掉默认注释（可以不用改）
C: 行号的显示和隐藏
	显示：在代码区域的最左边的空白区域，右键 -- Show Line Numbers 即可。
	隐藏：把上面的动作再做一次。
D: 字体大小及颜色
	a:Java 代码区域的字体大小和颜色：
		window -- Preferences -- General -- Appearance -- Colors And Fonts -- Java 修改 -- Java Edit Text Font
	b: 控制台
		window -- Preferences -- General -- Appearance -- Colors And Fonts -- Debug -- Console font
	c: 其他文件
		window -- Preferences -- General -- Appearance -- Colors And Fonts -- Basic -- Text Font
E: 窗体给弄乱了，怎么办
	window -- Reset Perspective
F: 控制台找不到了
	Window--Show View—Console

快捷键的使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


A: 内容辅助键
	Alt+/ 起提示作用
	main+alt+/,syso+alt+/, 给出其他提示
B: 快捷键
	格式化  ctrl+shift+f
	导入包  ctrl+shift+o
	注释	ctrl+/
		ctrl+shift+/,ctrl+shift+\
	代码上下移动 选中代码 alt+上/下箭头
	查看源码  选中类名 (F3 或者 Ctrl+鼠标点击）

Eclipse 中如何提高开发效率

1
2
3
4
5


A: 自动生成构造方法
	a: 无参构造方法 在代码区域右键--source--Generate Constructors from Superclass
	b: 带参构造方法 在代码区域右键--source--Generate Constructors using fields.. -- finish
B: 自动生成 get/set 方法
	在代码区域右键--source--Generate Getters and Setters...

利用腾讯云对象存储 COS 桶托管 hexo 博客

Lruihao — Tue, 22 Jan 2019 14:57:08 +0000

本以为 coding pages 与腾讯云合作后会更好，没想到正是这种初期 bug 不断，速度也是非常慢。比 gitee, 甚至 github 都要慢很多了。所以决定放弃 coding 了，本想挂到云服务器上，但是这个云服务器只续费了半年，可能不会再续费，前几天看到用腾讯云的 cos 桶 xml 制作动态相册的文章，知道了对象存储这个玩意，腾讯云 COS 提供免费 50G 的存储空间，还有 CDN 加速服务，我觉得是个不错的选择，部署后发现速度还挺好。
适用于 hexo, hugo 等静态博客的部署。

创建存储桶

打开腾讯云控制台–云产品–存储–对象存储，然后创建存储桶。

开启静态网站设置

在基础配置打开静态网站（关掉强制 https)

绑定域名

SSL 设置

域名解析，添加记录

去 dns 服务商添加域名解析记录 CNAME 指向上面的域名

hexo 设置

安装插件

1

npm install hexo-deployer-cos --save

站点配置文件

1
2
3
4
5
6
7


deploy:
  type: cos
  bucket: yourBucketName #cos 桶名称
  appId: yourAppId #cos 桶名称后数字
  secretId: yourSecretId  #云 API 密钥
  secretKey: yourSecretKey #云 API 密钥
  region: yourRegion #所属地域

发布还是一样的

1
2


hexo clean
hexo g -d

结果类似于

CDN 刷新

每次更新博客内容完后，都要登陆腾讯云 CDN–缓存刷新，手动刷新一下 CDN。

用脚本在每次更新后刷新

安装

1

npm install qcloud-cdn-node-sdk --save

创建qcloudcdn.js放入script文件夹

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const qcloudSDK = require('qcloud-cdn-node-sdk');

qcloudSDK.config({
  secretId: '你的 ID',
  secretKey: '你的密钥'
});

qcloudSDK.request(
  'RefreshCdnDir',
  {
    'dirs.1': 'http://博客地址'
  },
  (res) => {
    console.log(res);
  }
);

自动 CDN 刷新配置（推荐）

进入腾讯云，找到函数计算 -> CDN 缓存刷新函数 -> 创建 CDN 缓存刷新函数
修改 index.js 内容后重新部署

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79


'use strict';

const CosSdk = require('cos-nodejs-sdk-v5');
const CdnSdk = require('./common/CdnSdk');
const CdnRefreshTask = require('./common/CdnRefreshTask');
const { getParams, getObjectUrl, logger, getLogSummary } = require('./common/utils');

exports.main_handler = async (event, context, callback) => {
  /**
   * parse param from event and process.env
   */
  const { objects, cdnHosts, secretId, secretKey, token } = getParams(event);

  logger({
    title: 'param is parsed success, param as follow: ',
    data: { objects, cdnHosts, event }
  });
  /**
   * init cos instance
   */
  if (!secretId || !secretKey || !token) {
    throw new Error(`secretId, secretKey or token is missing`);
  }

  const cdnSdkInstance = new CdnSdk({ secretId, secretKey, token });
  const cosInstance = new CosSdk({
    SecretId: secretId,
    SecretKey: secretKey,
    XCosSecurityToken: token
  });

  const taskList = objects.map(({ bucket, region, key }) => {
    /* 变更内容-START */
    const purgeUrls = [];
    cdnHosts.forEach((host) => {
      const tempUrl = getObjectUrl({
        cosInstance,
        bucket,
        region,
        key,
        origin: `${/^(http\:\/\/|https\:\/\/)/.test(host) ? '' : 'https://'}${host}`
      });
      purgeUrls.push(tempUrl);
      // 如果以 /index.html 结尾，则增加目录首页/。
      // 例如 https://www.xxxx.com/index.html, 则增加 https://www.xxxx.com/。
      if (tempUrl.lastIndexOf('/index.html') == tempUrl.length - 11) {
        purgeUrls.push(tempUrl.substr(0, tempUrl.length - 10));
      }
    });
    return new CdnRefreshTask({
      cdnSdkInstance,
      urls: purgeUrls
    });
    /* 变更内容-END */
  });

  const taskResults = [];
  for (const task of taskList) {
    const results = await task.runPurgeTasks();
    taskResults.push(...results);
  }

  logger({
    title: 'cdn refresh full logs:',
    data: taskResults
  });

  const { status, messages } = getLogSummary(taskResults);

  logger({
    messages: messages.map((item) => item.replace(/\,\ /g, '\n'))
  });

  if (status === 'fail') {
    throw messages.join('; ');
  } else {
    return messages.join('; ');
  }
};

Memo - 分类 - 菠菜眾長

Mac 上的开发配置总结

配置文件

常用命令

Node

SourceTree

Terminal

sublime-text 3

开机自启动

备份

Mac 配置 ADB

安装

配置环境变量

ADB 命令

注意

Sublime 剪贴板图片粘贴插件 —— Markdown 必备

功能

食用说明

Hugo 添加知乎卡片式链接 Shortcodes

源碼

使用

Hugo i18n 添加中文繁體翻譯

翻譯

配置

Hugo 友情連結模板

創建模板

模板樣式

友鏈頁面

數據

結語

Hugo 本地管理 Shell 腳本

實現

post_generator.sh

hugo_server.sh

hugo_builder.sh

public_async.sh

auto_push.sh

hugo_main.sh

使用

Hugo 使用 GitHub Actions 部署到 GithHb Pages 和 腾讯云 cos 桶

準備

Github Actions

創建 workflows 任務

配置 Github Pages 密鑰

配置 COS 密鑰

COS 自動同步 （備用）

个人博客从 Hexo 迁移至 Hugo

Hugo 准备

概念

安装

生成站点

创建文章

添加主题

在本地启动网站

hugo build

写作指北

Todo list

Base

Code Review 怎麼做？新手工程師如何提升「程式碼品質」

程式碼的持續優化

Code Review 的關注點

從架構的規劃到細節的優化

cell-blog 开发记录

搭建 php 环境

新建 laravel 项目

下载 debugbar

修改语言时区

配置数据库

下载 laravel-admin

下载 dcat-admin

迁移文件创建表

创建模型 model

创建控制器

添加后台路由

editormd 安装

存放本地表情

图片上传

csrf 419 错误

markdown 转 HTML

Eloquent 模型事件

Hugo 使用 GitHub Actions 部署到 GithHb Pages 和腾讯云 cos 桶

COS 自動同步（備用）