快轉到主要內容
  1. Note/

Hugo Functions:從 Slice 中取得特定範圍

·1 分鐘· ·
Blog Zh-Tw Hugo
Liu Zhe You
作者
Liu Zhe You
涉略全端、DevOps,目前專注在 Backend
目錄

關於 Hugo
#

Hugo 是我目前使用的靜態網站生成器。

  • Hugo 比其他靜態網站生成器(如 Jekyll、Hexo 等)快得多。
  • 支援用於模板功能的 partialsshortcodes
  • 支援用於在模板中處理資料的 functions

常見的 Hugo shortcodes 範例:

/layouts/shortcodes/myImage.html

{{ $image := .Get "image" }}

<img class="w-100" src="{{ $image }}" alt="image">

就可以在 Markdown 文件中這樣使用它:

{{< myImage image="https://example.com/image.jpg" >}}

目前的 Hugo 主題:Blowfish
#

目前使用 blowfish 作為我目前的 Hugo 主題!
它提供了 codeimporter shortcode 用於從 URL 引入整份 Code 。

{{< codeimporter url="https://raw.githubusercontent.com/username/repo/branch/file.go" type="go" >}}

然而,它原本 不支援從特定範圍獲取文件。

在 Hugo 從 Slice 中取得特定範圍
#

由於 Hugo 不支援用於 切片substrcut 函數
不過我們可以利用在 Linux 上使用 headtail GNU 命令 的概念來抓取文件的起始行到結束行。

對於 Linux: 使用 headtail 指定要顯示的範圍。

head -n 10 file.txt | tail -n 5
# 顯示第 6 到第 10 行

對於 Hugo: 我們可以使用 Hugo 中的 firstafter 函數從 slice 取得特定範圍。

firstafter 函數屬於 collection functions 類別。

{{ $lines := slice "line1" "line2" "line3" "line4" "line5" }}
{{ $startLine := 2 }}
{{ $endLine := 4 }}

{{ $startLine := sub $startLine 1 }}
{{ $selectedLines := first $endLine $lines }}
{{ $selectedLines := after $startLine $selectedLines }}

Blowfish 主題的 PR:為 codeimporter 添加 startLine 和 endLine 支援
#

所以順便為 blowfish 主題創發了一個 PR:
codeimporter shortcode 加上 startLineendLine 支援。

PR: https://github.com/nunocoracao/blowfish/pull/1558

codeimpoter-pr

參考
#

相關文章

k8s: 將 ConfigMap 或 Secret 輸出至 .env 格式
·1 分鐘
Blog Zh-Tw Devops Kubernetes
Kubernetes Cheat Sheet: 將 ConfigMap 或 Secret 輸出至 .env 格式
Redis 持久化設定:RDB 與 AOF
·4 分鐘
Blog Zh-Tw Database Redis
Redis 持久化設定:RDB 與 AOF
在 SqlAlchemy 使用 Transaction
·2 分鐘
Blog Zh-Tw SqlAlchemy Backend Python
如何在 SqlAlchemy 中使用 Transaction
Python: 重複讀取檔案(BinaryIO)
·1 分鐘
Blog Zh-Tw Python
在 Python 中重複讀取檔案 (BinaryIO),如何解決在第二次讀取時出現空內容的問題。
PgBouncer: 輕量 Postgres 連接池
·2 分鐘
Blog Database Zh-Tw Postgresql
以 PgBouncer 解決 Django 後端 DB connection 過多的問題
Cloudflare Tunnel
·2 分鐘
Blog Zh-Tw
設定 Cloudflare Tunnel 來穿透內網 IP,Ngrok 的替代方案