Chrome is bad! 切換到 Firefox

在我的 Macbook 上使用了幾個月 Chrome 下來, 發現使用期間電池損耗非常之快. 在 Google 上搜索之後, 結果幾乎清一色指向了 Keystone, 一個 Chrome 的更新程式. 根據 Chrome is bad, Keystone 將自己植入系統服務, 瘋狂吃資源, 一度讓 WindowServer CPU 佔用達到 80%. Google 聲稱 Keystone 是用來更新 Chrome 的, 我對此存疑. 更新一個程式需要吃 CPU 吃到 80%? 真當我腦癱啊?

然而要改變習慣也不是那麼容易, 我就很不習慣 Safari 和 Edge 的操作介面. 況且我習慣只有一套密碼, 要切換瀏覽器, 就得先把舊瀏覽器上的密碼通通刪除.

提醒: 如果你也想要轉移到 Firefox, 請不要著急著刪除 Chrome, 在轉移插件和密碼時它還用得到.

Chromium 使用報告

為了解決這個問題, 我先嘗試 Chrome 係的 Chromium ( 通過 Brew 安裝 ), 寄希望於它是一個開源軟件, 不會附帶垃圾代碼.

結果我徹徹底底的錯了. Chromium 一不支持 MacArm, ( 而 Chrome 則是支持的 ), 而來佔用比 Chrome 還要高三到五倍, 最離譜的是, 我用 Brew 卸載掉了它居然還在佔我 CPU. 這怎麼忍?

通過 Brew 卸載之後, Chromium 居然還佔用 將近 100% 的 CPU

除了高佔用以外, Chromium 還移除了大部分 Google API. 也就是說, 谷歌翻譯、密碼同步、谷歌帳號等功能全部無法使用. 從這點就可以看出來, 作為一個商業巨頭的 Google, 本質上就是一個財閥, 其第一要務就是盈利.

失望之餘, 我徹底刪除了 Chromium.

轉移並清除 Chrome 保存的資料

匯出密碼

要跳出 Chrome 的舒適圈, 將密碼轉移到 Firefox 上是一個好主意. 然而我現在正在使用 Keepass ( 一個開源密碼管理器 ), 絕大部分密碼並不儲存在瀏覽器裡. 因此我只要登錄到 Google 帳號, 刪除掉儲存在裡面的密碼就可以了.

要先匯出你的密碼, 或是關閉自動保存, 點擊這個鏈接, 登入 Google 帳戶, 點擊 “Export”.

Export 出來的東西可以導入 Keepass, 也可以導入 Firefox. 我個人偏向於前者.

匯出書籤

在 Chrome 中打開這個鏈接, 點擊右上角的三個點然後點擊 “匯出”.

我個人並沒有選擇從 Chrome 匯出書籤, 我覺得切換瀏覽器也是一個小小的新開始, 那些老的書籤大部分我一生都不會再看一次, 不如直接刪掉好了.

我沒有保留除了 Chrome 書籤欄裡的其他任何東西, 而且我其實也基本不使用書籤功能.

匯出插件

遺憾的是, Chrome 並沒有為插件提供一鍵匯出功能. 在 Chrome 種打開這個鏈接, 手動轉移插件吧. 一些插件提供了到匯出配置功能, 會讓整個操作簡單很多.

刪除 Chrome 相關的所有資料

之前的操作只是匯出了這些資料而已, 接下來要做的是完全刪除這些資料.
Chrome 官方提供了一個一鍵 GoodBye 的功能, 我個人感覺還是非常有良心的.

點擊這個鏈接, 確定你已經匯出了所有這些資料之後, 點擊刪除.

這會刪除你帳戶中關於 Chrome 的所有資料.

刪除帳戶活動

以上操作已經完全抹除了你和 Chrome 的關係了, 但是能不能再進一步呢?

瀏覽紀錄除了被儲存在 Chrome 裡面, 還儲存在 Google 活動裡面, 作為 Google 帳戶資料的一部分. 要完全清除, 我們還要執行下面的操作.

光刪除這些並沒有完全刪除你在 Google 留下的痕跡. 接下來需要轉到 Google – 我的活動 來刪除雲端的瀏覽紀錄.

請點擊這個鏈接, 點擊 刪除 – 不限時間 – 全部勾選 – 刪除.

如果以後都不想要 Google 紀錄你的活動, 可以如圖關閉這三個選項.

要刪除其他服務, 請點擊這個鏈接, 自行選擇並刪除.

我個人感覺, 在一一刪除這些資料時, 我處在一種擔憂與爽感並存的狀態. 然而, 在完全刪除之後, 又釋然了. 隱私與自由有的時後和大麻一樣, 都是一種一旦沾上就再也不想失去的東西, 只不過前者是完全無害的.

安裝 Firefox

Firefox 作為一個開源軟件, 而且有大名鼎鼎的 Mozilla 基金會為它背書. Firefox 的主題、插件市場都不下 Chrome AppStore, 也支持同步設置和密碼. 除了手機上的 Firefox 比較不堪以外 (近年來已經大大改善!) , 好像它一直都是 Chrome 的一個絕佳替代方案.

要安裝 Firefox, 可以使用內建的 Brew 包管理器. 順便一提, Firefox 已經支持 M1 晶片.

brew install --cask firefox

成功!

安裝完畢之後, 整個過程基本就完成了! 享受這個新的瀏覽器吧!

一鍵讓內容農場從搜索結果 Fuck Off

我相信每個網民或多或少都有過這樣的經歷: 你翻出來, 抱著探索更加優質互聯網的期望, 開始了第一次 Google 之旅.

但是很不幸的是, 你的 Google 搜索結果第一頁居然塞滿了比牆內還垃圾數倍的內容農場, 先不提一塌糊塗的格式, 除了標題整個文章和你要搜索的內容就沒有一點相干. 更加奇葩的是, 這個網站還有綠色的背景, 大號正楷做正文字體, 像是從 00 年穿越過來一樣, 簡直就是設計地獄.

圖為其中最流氓的 KKNews, 直接 Ban 掉了訪問

你完全不理解 Google 為什麼要將這些垃圾內容放在第一頁, 於是你離開了 Google, 對萬惡的資本主義徹底失望, 回到了百度的懷抱, 做回了幸福的小粉紅.

完.

完?

The ultimate solution

為了應對這個問題, Google 曾經開發過一款插件 “Personal Blocklist”, 但是因為某些資本主義因素, 又把它下架了. 不過這個概念已經有了, 就是用戶可以通過瀏覽器插件的方式修改搜索結果, 如果 url 符合匹配規則, 就讓他完全消失.

Meet the uBlackList!

Google 商店搜索 uBlackList 就可以搜到這款插件. 我們可以首先設置通配符來最大範圍殺傷那些不長腦子的內容農場:

*://*/so.php
*://*/so.php?s=*
*://*/cha.php?s=*
*://*/list.php?s=*
*://*/?s=*
*://*/so/*

然後請添加以下訂閱, 通過域名精準打擊漏網之魚.

https://git.io/ublacklist

上面這個訂閱基本是全網最全的訂閱, 通過腳本, 每週同步多個 List 的內容; 截至發文時, 它已經包含了超過七萬個採集站.

地鐵見聞

今天在地鐵上聽見看見別人刷抖音, 有一個自稱某姐的主播, 大聲控訴美帝國主義. 剛剛罵完美國人是新納粹, 迫害有色人種, 就開始嘲笑美國現在黑人運動完全是養蠱自噬, “導致社會混亂”.

可見小粉紅的腦袋其實是個化糞池, 不管什麼樣惡臭的思想, 就算拙劣可笑、前後矛盾也都能溶於其中, 大行其道.

Android5 – Termux

我有一支舊手機, 華為 TAG-AL00; 目前閒置無事可幹, 於是我便動起歪腦筋想要將其改造成一台服務器.
如果你的手機已 root, 你大可以安裝 Linux Deploy, 通過 chroot 技術來部署 Linux, 安裝更快也運行更高效.

下載 Termux

首先不得不提的是, 作為有中國社會主義特色的流氓企業, 華為早就 Ban 掉了大部分手機刷機的渠道. 而華為自己的系統又太坑爹, 而且根本沒有系統更新, 導致我想給他刷一個 LineageOS 的嘗試直接打水漂. 所以接下來的一切都是在蛋疼的 Android5 上完成的.

Termux 早在 2020.01.01 就宣布不再支持 Android5/6. 因為是安卓5的緣故, 我們只能下載古老一點的版本. 經過我實測, 不僅是 20 年年初的版本無法安裝, 19 年年末的幾個版本 (如 0.75) 也裝不起來. 所以我只好選擇了更加古老的 Termux 0.70, 可以在這個鏈接下載到.

基礎配置

首先得配置好軟件源, 倒不是翻牆的問題, 而是這個版本 Termux 自帶的軟件源已經失效. 沒有軟件源其他一切都是扯淡. 複製以下命令到手機中執行:

( 如果執行完出錯, 請清除數據或重裝, 然後僅執行 apt update, 便可挑過此步. )

sed -i '[email protected]^\(deb.*stable main\)[email protected]#\1\ndeb https://mirrors.tuna.tsinghua.edu.cn/termux/termux-packages-24 stable [email protected]' $PREFIX/etc/apt/sources.list
sed -i '[email protected]^\(deb.*games stable\)[email protected]#\1\ndeb https://mirrors.tuna.tsinghua.edu.cn/termux/game-packages-24 games [email protected]' $PREFIX/etc/apt/sources.list.d/game.list
sed -i '[email protected]^\(deb.*science stable\)[email protected]#\1\ndeb https://mirrors.tuna.tsinghua.edu.cn/termux/science-packages-24 science [email protected]' $PREFIX/etc/apt/sources.list.d/science.list
pkg update -y

接下來的問題就是我不想要再在巴掌大的玻璃上戳來戳去了. 配置 SSH.

# 在手機上執行
apt install openssh -y
sshd # 開放 8022 端口
vi ~/.ssh/authorized_keys # 複製公鑰進去
ipconfig -a # 查看 ip 信息

# 在電腦上執行
ssh 192.168.10.116 -p 8022

安裝 Debian

使用 Debian 主要的原因, 除了它比較人性化且持續被維護, 是它的佔用非常之小, 完全可以運行在 “嵌入式設備上”. 在這一個老舊的手機上運行完全沒問題. 另外一個類似的嵌入式系統 Alpine 我不熟, 因此不想安裝.

# 資源來自 AnLinux
cd ~
apt install wget openssl-tool proot -y && hash -r && wget https://raw.githubusercontent.com/EXALAB/AnLinux-Resources/master/Scripts/Installer/Debian/debian.sh
bash debian.sh

執行這個命令花費的時間不多, 所以不要被嚇到.
安裝完成之後, 只要輸入 ./debian-start.sh 便可以啟動 Debian 了!

定期批量刪除图片 EXIF

EXIF 元信息是一種圖片的附加信息, 一般在拍攝的時候就已經寫進圖片, 而圖片被上傳到 WordPress 之後也會留在裡面.我剛剛看完幾篇關於網絡安全的文章, 於是去查詢了一下維基百科看一看 EXIF 到底有沒有這麽恐怖. 很不幸, 確實有.

圖片可以暴露拍攝的時間和地點, 精確到 GPS 坐標

雖然我的網站並不是非常 Secure, 而我使用密碼的習慣也並不是非常 Solid, 但是修復已經注意到的漏洞, 減少攻擊面總是一件好事. 所以我就設置了一個 Cron, 定時刪除 WordPress 中儲存的所有圖片元信息.

怎麼做到

首先安裝 ExifTool, 一個以 Perl 寫成的開源圖片 EXIF 信息處理工具. 樹莓派是基於 Debian, 所以直接 apt 就可以了

apt update && apt install exiftool

然後定位到 /mnt/data/wordpress/ , 這裡是 WordPress 的根目錄. 我先執行一次清除試一下:

( 方法來自 這個討論串 )

$ find -type f -iname '*.jpg' -exec exiftool -all= {} \;

1 image files updated
1 image files updated
...

然而, 除了修改文件以外, 這個工具還產生了 *.jpg_original 格式的備份, 這些備份我並不需要.

find . -name "*.jpg_original" | xargs rm -rf   

寫進 Cron

明確了作法之後, 就可以將任務寫進 Cron 了.

touch /etc/cron.daily/rm_exif
cat > /etc/cron.daily/rm_exif <<EOF
#!/bin/sh
find /mnt/data/wordpress -type f -iname '*.jpg' -exec exiftool -all= {} \;
find /mnt/data/wordpress -name "*.jpg_original" | xargs rm -rf
find /mnt/data/wordpress -type f -iname '*.jpeg' -exec exiftool -all= {} \;
find /mnt/data/wordpress -name "*.jpeg_original" | xargs rm -rf
find /mnt/data/wordpress -type f -iname '*.png' -exec exiftool -all= {} \;
find /mnt/data/wordpress -name "*.png_original" | xargs rm -rf
find /mnt/data/wordpress -type f -iname '*.gif' -exec exiftool -all= {} \;
find /mnt/data/wordpress -name "*.gif_original" | xargs rm -rf
EOF
chmod +x /etc/cron.daily/rm_exif

完成了!

Cloudflare Tunnel Self WebHosting

由於不習慣用 Hugo 管理內容, 且文章漸漸多了起來, 我在家中的樹莓派上跑起了一個 WordPress. 一切都進行的很順利, 直到我發現發佈這個網站並不是我想像中的那麼容易.

這篇文章是一篇踩坑文, 就是說我會把我在設置中遇到的一切困難完整的紀錄在文章中, 因此你不應當將其當作教程來看. 如果需要教程的話, 我推薦 官方文檔 , 或者 土豆不好吃 的教程.

前言

失敗的嘗試

首先, 我的樹莓派跑在內網, 我需要在路由器上配置一個端口轉發. 借助 Openwrt 的圖像介面, 我輕鬆的完成了轉發.

其次, 我還需要一個公網 IP. 撥打了電信的電話, 我成功的要到了公網 IP.

因為 “維穩” 需求, 電信是封殺 80, 443, 等常見的端口的. 因此我將 443 端口轉發到了 2053 端口上. ( HTTPS 證書是 Cloudflare 的原站證書 ) 2053 端口確定可以訪問.

在然後, 每次撥號的時候 IP 都會改變, 我需要配置一個 DDNS. 為了解決這個問題, 我找到了一個 Cloudflare DDNS 腳本跑在 Openwrt 裡來動態更新我的 IP.

一個類似 ip.justin.education:2053 的地址為免有些太過不友好, 於是我使用 CF-Workers 反向代理網站到 proxy.justin-zhang.workers , 再將其 CNAME 到 justin.education.

如果是靜態頁面這個時候已經可以訪問了, 但是 WordPress 並不支持多個域名, 一直在執著的 301 重定向. 我不能配置其地址為 justin.education, 因為那樣我就沒辦法登錄後台: CF 反代不支持保存 Cookies.

我於是在 Openwrt 上用 Docker 跑了一個 Nginx 來反代網站, 放棄了簡單的端口轉發的方案. 這次成功了, 不過我遇到了一些圖片和CSS不能加載的問題. 安裝插件之後我配置了替換 Header 的規則, 總算是可以看了.

但是由於 CF Workers 的緣故, 評論還是不工作. 而且攻擊者只要知道了我的端口是 2053, 他可以全網搜索 ip.justin.education:2053 的證書來找到我的真是 ip; 這顯然太冒險.

這個方案失敗之後, 還剩下的就是使用 frp 內網穿透的方案. 然而我並不想用我的翻牆服務器來代理網站, 我經常換 ip, 而且不安全, 而且效率太低.

看起來我已經被逼到絕路了.

柳暗花明

CF 經常被戲稱為做公益. 確實, 免費 CDN、雲端運行JS、免費證書、DDOS防護都看起來太美好了一點; 而且這些技術在捍衛隱私、對抗專制方面有奇效. 比如說: CDN可以用於隱藏翻牆服務器IP, 雲端 JS 可以做反向代理瀏覽器, 而且都完全不需要備案.

而就在 4月, CF 把 Argo Tunnel 免費對公眾開放 ( Tunnels for everyone ), 正好解決了我用樹莓派在家 Host Web 的需求! 說幹就幹, 立馬上手玩起來吧!

安裝 Cloudflared

樹莓派架構問題

我的是樹莓派 4B, 但是下載 Arm64 的版本跑不起來, 提示 “可執行檔格式錯誤”, 應當是說架構不對.

$ uname -m
armv7l

$ getconf LONG_BIT
32

$ cat /proc/cpuinfo

processor	: 3
model name	: ARMv7 Processor rev 3 (v7l)
BogoMIPS	: 270.00
Features	: half thumb fastmult vfp edsp neon vfpv3 tls vfpv4 idiva idivt vfpd32 lpae evtstrm crc32 
CPU implementer	: 0x41
CPU architecture: 7
CPU variant	: 0x0
CPU part	: 0xd08
CPU revision	: 3

Hardware	: BCM2711
Revision	: d03114
Serial		: 1000000038a6ce51
Model		: Raspberry Pi 4 Model B Rev 1.4
截取自 樹莓派官網
截取自 Arm 官網

這就有一點迷糊了, 我的樹莓派明明是 64 位的 Armv8, 為什麼顯示是 32 位的 Armv7 ?

經過一番搜索之後, 我發現我通過 Rpi-Imager 刷入的系統默認是32 位的. 根據 樹莓派官網, 我嘗試修改系統架構.

摘自 樹莓派官網
rpi-update # 先更新樹莓派固件
reboot
echo 'kernel=kernel8.img' &gt;&gt; /boot/config.txt
echo 'arm_64bit=1' &gt;&gt; /boot/config.txt
reboot

要完成上述操作並保證可以正常啟動, 你需要滿足所有以下條件:

  • /boot 非只讀 ( 你可以在
  • 保證 /boot/kernel8.img 存在
  • /boot/condfig.txt 不存在衝突的配置

然而, 失敗了. LONG_BIT 提示 32.
我嘗試下載 文件之後運行, 結果提示找不到文件. I beg your parden ? 大白天活見鬼.

我只好重裝了 64bit 的 PiOS, 現在運行這個程序應該沒有問題了.

下載並配置 Cloudfalred

wget https://github.com/cloudflare/cloudflared/releases/download/2021.5.6/cloudflared-linux-arm64
chmod +x ./cloudflared-linux-arm64
mv ./cloudflared-linux-arm64 /usr/local/bin/cloudflared

執行以下命令並將提示的 URL 複製到瀏覽器中打開, 點擊授權按鈕.

$ cloudflared tunnel login

Please open the following URL and log in with your Cloudflare account:

https://dash.cloudflare.com/argotunnel?callback=https%3A%2F%2Flogin.argotunnel.com%2FFFFFFFFFFFFFFFFFF-FFFFFFFFFFFFFFFFFFFFFF%3D

Leave cloudflared running to download the cert automatically.
You have successfully logged in.
If you wish to copy your credentials to a server, they have been saved to:
/root/.cloudflared/cert.pem

創建並配置 Tunnel

創建 Tunnel

$ cloudflared tunnel create wpblog

Tunnel credentials written to /root/.cloudflared/00000000-aaaa-bbbb-1111-000000000000.json. cloudflared chose this file based on where your origin certificate was found. Keep this file secret. To revoke these credentials, delete the tunnel.

Created tunnel blog with id 00000000-aaaa-bbbb-1111-000000000000

配置 Tunnel

touch /root/.cloudflared/config.yml
cat > config.yml <<EOF
tunnel: 00000000-aaaa-bbbb-1111-000000000000
credentials-file: /root/.cloudflared/00000000-aaaa-bbbb-1111-000000000000.json

ingress:
  - hostname: justin.education
    service: http://localhost:80
  - service: http_status:404
EOF

根據 Cloudflare 文檔 的解釋, 最後這一條是一個 “catch-all rule”, 也就是保底規則. 當有流量被導到我的樹莓派這裡, cloudflared 會一條條匹配 hostname, 如果都沒匹配到, 就返回 404. ( 你可以在樹莓派上跑其他服務比如說 gitlab, 郵件服務器之類的, 這個時候就更凸顯出 catch-all rule 的意義. )

設置 Cloudflare DNS

5 月 23 日 更新:
請直接跳過這一步. 最新版的 Cloudflare 已經無需手動配置 DNS, 如果配置了還會要求你刪除.

根據 官方文檔 , 接下來需要將要配置 Tunnel 的域名解析到 [id].cfargotunnel.com 來讓配置生效.

代理狀態勾選已代理來獲得 HTTPS 以及 CDN

由於我的 WordPress 是跑在 Docker 裡面的, 要配置 HTTPS 需要掛上一層 Nginx 的反向代理. 而 CF 正好解決了這個問題 ( Cloudflare -> SSL -> 完全 ), 而且還附帶了免費無需備案的 CDN, 說他做公益真的不是玩笑啊🤔

還可以額外配置一個重定向, 讓 www.justin.education 重定向到 justin.education . 因為前者真的很醜…

註冊服務並運行

在執行以下操作之前, 先保證 DNS 服務器設置為 1.1.1.1 . 用 Openwrt 可以在 網絡/接口/Wan/高級設置 處取消勾選 “使用對端通告的 DNS 服務器” (即運營商提供的 DNS), 然後寫上 1.1.1.1 . 普通路由器可以按照型號在網上搜索.
理想狀態是執行以下命令之後返回 _origintunneld._tcp.argotunnel.com.

$ dig srv _origintunneld._tcp.argotunnel.com

; <<>> DiG 9.11.5-P4-5.1+deb10u5-Debian <<>> srv _origintunneld._tcp.argotunnel.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 36844
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;_origintunneld._tcp.argotunnel.com. IN	SRV

;; ANSWER SECTION:
_origintunneld._tcp.argotunnel.com. 300	IN SRV	2 1 7844 region2.argotunnel.com.
_origintunneld._tcp.argotunnel.com. 300	IN SRV	1 1 7844 region1.argotunnel.com.

;; Query time: 156 msec
;; SERVER: 192.168.10.1#53(192.168.10.1)
;; WHEN: 日 5月 16 22:48:51 CST 2021
;; MSG SIZE  rcvd: 147

滿足以上條件之後, 運行以下命令註冊 cloudflared 為 service

cloudflared service install

在我的這個版本, cloudflared.service 的啟動參數實際上是設置 /etc/cloudflared/config.yaml 為其配置文件的. 所以如果某一天你想添加一個服務, 然後不管怎麼改 ~/.cloudflared/config.yaml 都是 404, 那就是你沒有改對地方. 你可以通過 cat /etc/systemd/system/cloudflared.service 來檢查啟動參數, 如果確實是這樣的話, 直接將 home 目錄下的配置文件軟鏈接過去就可以了.

rm /etc/cloudflared/config.yml
ln -s $HOME/.cloudflared/config.yml /etc/cloudflared/config.yml

然後應該可以使用 systemctl 來控制 cloudflared 的運行和停止了.

systemctl enable cloudflared
systemctl start cloudflared
systemctl status cloudflared

成功!

做完以上所有步驟之後等待 3 -5 分鐘, 應該已經可以透過無痕模式看到網站了. 這個時候設置就基本成功了.
由於我正在使用 WordPress, 我碰到了幾個問題, 羅列如下:

問題解決方案
圖片路徑不正確在數據庫中查找替換掉舊的網址
網頁加載太慢啟用 Cloudflare 插件和 Jetpack 插件
準備將圖片批量轉化爲 Webp 格式
郵件發不出去Docker中跑 Mailu 郵件服務器
安裝 WP Mail 插件
首頁顯示錯誤
(把電腦端當成移動端處理)
自己好了
可能是缓存没刷过来的问题

WordPress Enligher 插件適配主題

感覺博客缺少一個代碼高亮插件, 所以我就挑了一個免費的, 功能比較多的插件 Enligher 安裝到博客.

好用但是挺好用, 但是好像和當前的主題不太兼容, 具體症狀請見下圖:

可以看見, 不管是編輯器還是實際文章, 這個插件都有兼容性問題.

所以我馬上要做的事情, 就是找出問題並自己解決掉.

我沒有學過任何關於 CSS 或者 JS 的知識, 以下所有紀錄都來源於常識… 如果我有哪邊做錯, 歡迎在評論區指正😄

(下文所有的修改都會寫在文末的 patch 文件中)

編輯器部分

錯位修正

margin 的左右都是 0

這個比較簡單, 修改 enlighter/resources/gutenberg/enlighterjs.gutenberg.min.css , 如下所示:

div[data-type="enlighter/codeblock"] {
	border: 1px solid #cccbcb;
	border-radius: 5px;
	/* max-width: 100%; */
	padding: 15px
}

刪除/移動 干擾信息

右下角的提示 “EnligherJS Syntax Highlighter” 一直都在那裡, 非常佔空間而且還會產生打擾的效果, 所以我們不能讓它達到目的, 可以直接把它刪掉. 另外, 左上角的粗體字提示 Highlighting 種類未免有些太過喧賓奪主, 要是可以把它移到右下角的話豈不完美.

所以我就將 enlighter-footer 的部分刪掉, 然後將 enlighter-title 的部分移到 原來的 footer 的部分. 目前一切進行的都比較順利.

wp.element.createElement("div", {
                    className: "enlighter-header"
                },
                    /*wp.element.createElement("div", {
                        className: "enlighter-title"
                    }, (e = t.language, s()[e] || "Unknown language"))), wp.element.createElement(u, {
                        value: t.content,
                        onChange: function (e) {
                            return n({
                                content: e
                            })
                        },
                        placeholder: "Insert Sourcecode..",
                        "aria-label": "Code"
                    }),*/
                    /*wp.element.createElement("div", {
                        className: "enlighter-footer"
                    },
                        wp.element.createElement("div", {
                            className: "enlighter-footer-label"
                        },
                            wp.element.createElement("strong", null, "EnlighterJS"), " Syntax Highlighter"))*/
                    wp.element.createElement(u, {
                        value: t.content,
                        onChange: function (e) {
                            return n({
                                content: e
                            })
                        },
                        placeholder: "Insert Sourcecode..",
                        "aria-label": "Code"
                    }), wp.element.createElement("div", {
                        className: "enlighter-footer"
                    }, wp.element.createElement("div", {
                        className: "enlighter-footer-label",
                    }, (e = t.language, s()[e] || "Unknown language")))),

美化

到這一步, 編輯器 Enlighter 區塊的效果是這個樣子的:

不夠完美啊!

從使用的角度來說, 它已經夠用了.
但是右下角的那一行字總覺得有點不和諧.

所以我就把它往下移動了一點點, 並且加粗.

div[data-type="enlighter/codeblock"] {
	border: 1px solid #cccbcb;
	border-radius: 5px;
	padding: 15px;
	padding-block-end: 1px /* New */
}
div[data-type="enlighter/codeblock"] .enlighter-footer-label {
	text-align: right;
	font-size: 10px;
	font-family: Menlo,Consolas,monaco,monospace;
	color: #23282d;
	cursor: pointer;
	padding-top: 3px; /* New */
	font-weight: 800 /* New */
}

( 以上所有代碼全部由我目測得到, 且並不理解其含義, 均未考慮兼容性. 使用前請再三考慮 )

最終效果

現在感覺好多了 👌

網頁展示部分

EnlighterJS 官網按鈕倒不難去掉, 插件提供了開關可以直接把它關掉.

將 EnlighterJS website button 設為 Disable 就可以了

那麼接下來要做到就是適配暗黑模式.

適配暗黑模式的話… (撓頭) 要改的變量好像有點太多了, 暫時就不寫了吧.
本身 MDX 的暗黑模式就不太好看, 我的解決方法就是 徹 . 底 . 不 . 開 ! 這下不會有問題了吧?

Patch via Gist

樹莓派 4B 安裝 Arm64 PiOS

安裝系統

  1. 在 Ubuntu 中安裝 Rpi-imager 來準備鏡像
sudo apt update -y && sudo apt upgrade -y
sudo snap install rpi-imager

2. 從 清華大學鏡像 下載 Arm64 的 PiOS_Lite.

3. 使用 Rpi-Imager 刷入鏡像. 使用 Ubuntu 自帶的磁碟工具擴展 rootfs 容量到最大. (也可以不要, 最新版本的系統第一次開機會自動 Resize Partitions 將 / 分區擴到最大)

4. 在 boot 目錄下新建空白的 ssh 文件

cd ~/media/boot/
touch ssh
  1. 彈出 SD 卡, 插入樹莓派並通電.

基礎配置

0. 連線到樹莓派.

ssh [email protected] #raspberry
  1. 修改登錄方式
# 設置密碼
sudo passwd pi
sudo passwd root
​
# 配置 SSH 登錄
su
cd ~/
mkdir .ssh
chmod 700 .ssh
vi /root/.ssh/authorized_keys # 複製你的公鑰進去
chmod 644 /root/.ssh/authorized_keys
vi /etc/ssh/sshd_config # 配置ssh登錄

2. 在 sshd_config 中修改以下幾句.

LoginGraceTime 10m                 # afk達10min自動登出
PermitRootLogin prohibit-password  # 只允許root用ssh登錄
MaxAuthTries 6                     # 最多允許三次錯誤登錄嘗試
MaxSessions 10                     # 最多允許三個client同時登錄
​
PubkeyAuthentication yes           # 開啓公鑰登錄
​
AuthorizedKeysFile      .ssh/authorized_keys #開啓公鑰
​
PasswordAuthentication no          # 不允許任何用戶使用密碼登錄
PermitEmptyPasswords no            # 不允許任何空密碼用戶登錄

3. 繼續執行一下語句, 確定 status 沒有報錯之後登出.

systemctl restart sshd.service
systemctl status sshd.service
exit

4. 重新以 root 身份登錄.

5. 更新/設置系統

apt update && apt upgrade -y
​
# 更新系統 (可跳過)
rpi-update # 更新 Kernel
reboot
rpi-eeprom-update # 更新 Bootloader
raspi-config # 6 -> A7 -> E1
​
# 設置系統
raspi-config
​
# 重新登錄
exit

設置系統的部分自己選擇, 畢竟選項和提示都寫的很清楚.

我是比較喜歡開啟 Overlay Filesystem + ReadOnly Boot Partition 的, 前者就是一個開機一鍵還原, 後者是防止突然斷電破壞 boot 分區. 我覺得這兩個都比較實用, 建議全部設置完之後開啟.

至於語言 (Locale) 設定, 我喜歡把所有 zh 開頭的都勾上, 然後選用 zh_CN.UTF8, 可以保證亂碼不會出現.

至於測試的話, 只要 mkdir 測試, 然後 ls 一看看一看中文是否正常顯示就可以了.

軟件安裝

  1. 基本設置於基礎軟件安裝
# 安裝基本軟件
apt install vim git make wget -y

# 設置 UFW
apt install ufw -y
ufw allow from 192.168.10.1/24
ufw default deny
ufw enable
ufw status

# 設置 NTP 服務
apt install ntpdate -y
echo '@reboot ntpdate 192.168.10.1' >> /etc/crontab

# 設置 開機掛載硬盤
mkdir /mnt/data
mount /dev/sda1 /mnt/data
blkid # 複製顯示的 uuid 和 type
echo 'UUID=2e2e58b1-8fe8-4f5c-9478-f5eef65c5aa5 /mnt/data ext4 defaults 1 2' >> /etc/fstab
mount -a # 確定沒有報錯!

# 開機掛載網絡硬盤
sudo apt install -y curlftpfs
echo '@reboot curlftpfs -o rw,allow_other ftp://username:[email protected]/ /media/ftpdrive' >> /etc/crontab

# 安裝 ZSH & OH MY ZSH
apt install zsh -y
sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

# 重啟
reboot

簡單的解釋一下為什麼我上面是這樣配置:

  • 我因為樹莓派完全運行在家庭網絡裡面, 所有流量都要經過轉發, 所以防火牆只允許家裡設備訪問最穩妥.
  • 因為路由器的系統是 Openwrt, 開著 NTP 服務, 所以可以直接向它更新時間.
  • 插上硬盤之後, 最新的系統應該會自動創建一個掛載點 /media/pi/... , 我不想要它, 所以已經把它 unmount 掉了.

2. 安裝 Docker

# 安裝 Docker
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
docker -v
systemctl enable docker.service
systemctl enable containerd.service

# 將 Docker 數據卷掛到外接硬盤
systemctl stop docker
systemctl stop containerd

# 第一次使用這個方法
mv /var/lib/docker /mnt/data/
mv /var/lib/containerd /mnt/data/containerd
# 如果重裝過系統想要恢復數據
# mv /var/lib/docker /var/lib/docker.bak
# mv /var/lib/containerd /var/lib/containerd.bak
ln -s /mnt/data/docker /var/lib/docker
ln -s /mnt/data/containerd /var/lib/containerd

systemctl start docker
systemctl start containerd

3. 安裝 Docker-compose ( 使用 pip3 因為 Github 上下載不到針對 Arm 的二進制包 )

apt install pip3 -y
apt install libffi-dev # 構建環境, 完成後可以卸載掉
pip3 install docker-compose
docker-compose -v

# 刪除構建緩存
rm -r ~/.cache/pip

4. 最後可以啟用 Overlay Filesystem + ReadOnly Boot Partition 了. 之後要是想裝東西可以直接使用 Docker, 改動會保存在外接硬碟中, 就算重裝系統也可以輕鬆恢復數據, 是目前我找到的最好的方案.

raspi-config

5月26日附: 在插拔 HDMI 线的时候不小心把电源也带出来了,赶紧插上,开机没发现任何问题,一分钟后博客恢复访问,lost+found下没添加任何文件。Overlay filesystem 确实是,高!

為官方 Nginx 鏡像安裝 Extras 插件

要用到 Nginx 的額外功能, 我需要安裝插件合集 nginx-extras . 但是官方 Nginx 鏡像並不提供插件功能, 而我也不想就為了這麽一個小功能就去用別人自己 Build 的鏡像, 鬼知道裡面有什麼東西.

我了解到 官方 Nginx, 如果沒有特殊指定的話, 是基於 Debian 的. 那麼在 Debian 裡面如果我想要安裝這個插件, 我只需要執行以下命令, 就可以用了

apt-get update && apt-get install -y nginx-extras

經過簡單的搜索, 我發現 Docker 提供 Dockerfile 的方法來構建自己的鏡像. 就是一個小腳本, 有點像 Git Actions 那樣的小腳本, 不過比那個還簡單.

Dockerfile Cheatsheet, 截取自 devhints.io

知道了 Dockerfile 怎麼使用之後, 就可以上手了

FROM nginx:latest
RUN apt-get update
RUN apt-get install -y nginx-extras
docker build -t nginx_extras .
docker image ls

因為我用了 Portainer, 我可以直接替換鏡像為我自己構建的 nginx_extras .

你也可以手動 rm 掉舊的容器然後用新的鏡像創建容器

到此為止, Nginx 已經可以用上這些插件了.