这是本节的多页打印视图。 点击此处打印.

返回本页常规视图.

skyao.io网站定制化

为skyao.io网站定制Academic主题

1 - 定制化概述

定制化的目标和主要工作内容概述

对 Academic 主题进行定制化的主要目标是：

  1. 网络加速：Academic主题使用时需要载入的 图片/css/js 文件，网络地址会被被 GFW 墙，导致访问速度缓慢甚至无法加载。
  2. 部分界面需要微调

2 - 定制化的准备工作

准备fork仓库，建立分支

为了避免遗忘，记录定制化的全过程。

以学习笔记为例，时间为 2024/01/16.

安装hugo

node 安装版本：

  • Node.js v20.10.0 to /usr/local/bin/node
  • npm v10.2.3 to /usr/local/bin/npm

hugo 安装版本为：

  • hugo v0.121.1 extended 版本

Fork 仓库

主题仓库:

从官方仓库： https://github.com/HugoBlox/hugo-blox-builder

Fork 为自己的仓库：https://github.com/skyao/hugo-blox-builder

模版：

从官方仓库： https://github.com/HugoBlox/theme-academic-cv

Fork 为自己的仓库：https://github.com/skyao/theme-academic-cv

克隆代码

注意：

  • 一定要确保 fork 后的仓库的 master 分支上是干净的，即不做任何代码修改，只用于从 upsream 仓库拉取最新的代码。

  • 所有自己的代码改动，在自己 fork 的仓库中新建新的branch

clone 仓库代码到本地，

mkdir skyao
cd skyao
git clone git@github.com:skyao/hugo-blox-builder.git
git clone git@github.com:skyao/theme-academic-cv.git

建立分支

然后建立 skyao-io-2024 分支并增加 upstream。

hugo-blox-builder:

cd hugo-blox-builder
git checkout main
git checkout -b skyao-io-2024
git push --set-upstream origin skyao-io-2024

git remote add upstream git@github.com:HugoBlox/hugo-blox-builder.git

git fetch -a

运行

这时候就可以打开 http://localhost:1313/ 访问了。

不过为了使用本地修改之后的主题，还是需要修改一下 go.mod 文件，增加以下内容，将依赖指向本地 hugo-blox-builder 的 fork 仓库：

// replace for develop when forked repo is in local
replace github.com/HugoBlox/hugo-blox-builder/modules/blox-bootstrap/v5 => ../hugo-blox-builder/modules/blox-bootstrap
replace github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify => ../hugo-blox-builder/modules/blox-plugin-netlify
replace github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-reveal => ../hugo-blox-builder/modules/blox-plugin-reveal

此时的代码完全是上游的代码，除了将依赖关系修改为本地之外，还没有做任何修改。

提交代码改动，此时准备工作完成。

3 - 为个人技术博客网站特别定制

修改模版内容，为个人技术博客网站特别定制

修改 theme-academic-cv 仓库

准备分支

使用之前新建 skyao-io-2024 分支，存放后续的修改：

git checkout -b skyao-io-2024
git push --set-upstream origin skyao-io-2024

修改配置

修改 languages.yaml

将默认语言修改为中文，暂时不需要支持多语言。

注释掉 en, 开启 zh:

#en:
#  languageCode: en-us
  
zh:
  languageCode: zh-Hans
#  contentDir: content
  title: 敖小剑的博客

修改hugo.toml

将默认语言修改为中文:

############################
## LANGUAGE
############################

defaultContentLanguage: zh
hasCJKLanguage: true
defaultContentLanguageInSubdir: false

其他修改：

title: 敖小剑的博客 # Website name
baseURL: 'https://skyao.io/' # Website URL

# 分页数量从10修改为20
paginate: 20

修改 menus.yaml

这是默认的内容：

main:
  - name: Home
    url: '#about'
    weight: 10
  - name: Posts
    url: '#posts'
    weight: 20
  - name: Projects
    url: '#projects'
    weight: 30
  - name: Talks
    url: '#talks'
    weight: 40
  - name: Publications
    url: '#featured'
    weight: 50
  - name: Contact
    url: '#contact'
    weight: 60

修改为：

main:
  - name: 首页
    url: '#about'
    weight: 10
  - name: 演讲分享
    url: talk/
    weight: 20
  - name: 出版作品
    url: publication/
    weight: 30
  - name: 技术博客
    url: post/
    weight: 40
  - name: 开源项目
    url: '#projects'
    weight: 50
  - name: 学习笔记
    url: learning/
    weight: 60
  - name: 内容标签
    url: '#tags'
    weight: 70
  - name: 和我联系
    url: '#contact'
    weight: 80

修改params.yaml

修改如下：

# appearance

# 保持和原来的主题一致
appearance:
  theme_day: 1950s
  
# SEO

marketing:
  seo:
    description: '敖小剑的个人技术博客网站，主要关注服务网格,serverless,kubernetes,微服务等云原生技术。'
    twitter: 'SkyAoXiaojian'
  analytics:
    google_analytics: 'G-4BVWTNS4MB'
    baidu_tongji: '17048c9d4209e5d08a9ae5b0b4160808'
    
    
# Site footer

footer:
  copyright:
    notice: '© {year} skyao.io All Rights Reserved'
    license:
      enable: false
      share_alike: false # 这个暂时还不知道是显示什么内容
    
# Localization

locale:
  date_format: '2006-01-02'
  time_format: '15:04'
  address_format: en-us
  
  
# Site features

features:
  repository:
    url: 'https://github.com/skyao/skyao.io'
    content_dir: content
    branch: master

删除部分不需要的文件

  • data/page_sharer.toml

  • images

  • preview.png

  • static/uploads/*

首页内容修改

替换网站图标

替换 assets/media/icon.png 为自己的图标。

作者信息修改

修改 content/author/admin 目录下的 _index.md 文件，这些内容会直接显示在首页开头部分。

替换 avatar.jpg 文件为自己的头像。

去掉不需要的内容

  • 删除 content/privacy.md
  • 删除 content/terms.md
  • 删除 content/slides 目录，暂时不用这个功能
  • 删除 content/event 目录，暂时不用这个功能

删除首页内容块

修改 content/_index.md 文件。

删除 experience / accomplishments 这两个 block，这样首页就不会显示相关内容了。

  - block: experience
  - block: accomplishments

删除 Gallery 图片显示，用不上：

  - block: markdown
    content:
      title: Gallery

相关的图片存放在 assets/media/albums/demo 目录下，也可以一起删除。

修改 skills 模块的显示

skills 块被我修改为显示我关注的技术方向，但是新版本的样式非常不适合，因此我决定把老版本的内容搬回来。

老版本显示 skills 信息用过的是 wowchemy/layouts/partials/widgets/featurette.html，新版本用的是 modules/blox-bootstrap/layouts/partials/blocks/skills.html ，差别太大不适合直接改动。

好在新版本中还保留有 modules/blox-bootstrap/layouts/partials/blocks/features.html 这个 partial，和老版本的 featurette.html 非常类似，因此改用这个 features.html 来渲染内容。

修改 content/_index.md 文件，将 skills block的内容从原来的

  - block: skills
     ......

替换为：

  - block: features
    content:
      title: 重点关注
      text: '个人看好并正在努力学习和探索中的新技术方向'
      items:
        - name: App Runtime
          description: '为云原生应用提供全面支持'
          icon: object-group
          icon_pack: fa
        - name: Rust
          description: '云原生基础设施最佳编程语'
          icon: rust
          icon_pack: fab
        - name: Web Assembly
          description: '潜在的颠覆性技术突破点'
          icon: space-shuttle
          icon_pack: fa

定制首页节选的内容

首页可以选择从 post/publish/event 等内容中节选部分内容在首页上显示，这些节选的内容可以根据需要自行定制。

最新分享

这是带 feartured 的 talk 内容：

  - block: collection
    id: talks
    content:
      title: 最新分享
      subtitle: ''
      text: ''
      # Choose how many pages you would like to display (0 = all pages)
      count: 3
      # Filter on criteria
      filters:
        folders:
          - talk
        featured_only: true
      # Page order: descending (desc) or ascending (asc) date.
      order: desc
    design:
      # Choose a layout view
      view: compact
      columns: '2'

演讲分享

这是不带 feartured 的 talk 内容：

  - block: collection
    id: talks
    content:
      title: 演讲分享
      subtitle: ''
      text: ''
      # Choose how many pages you would like to display (0 = all pages)
      count: 2
      # Filter on criteria
      filters:
        folders:
          - talk
        exclude_featured: true
      # Page order: descending (desc) or ascending (asc) date.
      order: desc
    design:
      # Choose a layout view
      view: compact
      columns: '2'

出版作品

publication 内容：

  - block: collection
    id: publications
    content:
      title: 出版作品
      text: 
      # Choose how many pages you would like to display (0 = all pages)
      count: 1
      filters:
        folders:
          - publication
        exclude_featured: true
    design:
      columns: '2'
      view: citation

最新博客

Post 博客内容：

  - block: collection
    id: latest-posts
    content:
      title: 最新博客
      subtitle: ''
      text: ''
      # Choose how many pages you would like to display (0 = all pages)
      count: 5
      # Filter on criteria
      filters:
        folders:
          - post
        exclude_featured: true
      # Page order: descending (desc) or ascending (asc) date.
      order: desc
    design:
      # Choose a layout view
      view: compact
      columns: '2'

删除内容

删除最新事件的这段，有需要时再加回来。

  - block: collection
    id: talks
    content:
      title: Recent & Upcoming Talks
      filters:
        folders:
          - event
    design:
      columns: '2'
      view: compact

其他类似的也删除。

开源项目

  - block: portfolio
    id: projects
    content:
      title: 开源项目
      filters:
        folders:
          - project
      # Default filter index (e.g. 0 corresponds to the first `filter_button` instance below).
      default_button_index: 0
      # Filter toolbar (optional).
      # Add or remove as many filters (`filter_button` instances) as you like.
      # To show all items, set `tag` to "*".
      # To filter by a specific tag, set `tag` to an existing tag name.
      # To remove the toolbar, delete the entire `filter_button` block.
      buttons:
        - name: 所有项目
          tag: '*'
        - name: 主导项目
          tag: own
        - name: 参与项目
          tag: participate
    design:
      # Choose how many columns the section has. Valid values: '1' or '2'.
      columns: '2'
      view: showcase
      # For Showcase view, flip alternate rows?
      flip_alt_rows: true

内容标签

  - block: tag_cloud
    id: tags
    content:
      title: 内容标签
    design:
      columns: '2'

和我联系

简化内容：

  - block: contact
    id: contact
    content:
      title: 和我联系
      subtitle:
      text: |-
        欢迎和我取得联系，探讨技术问题。        
      # Contact (add or remove contact options as necessary)
      email: aoxiaojian@hotmail.com
      phone: 
      address:
        street: 天河区
        city: 广州市
        region: 广东省
        postcode: '510600'
        country: 中国
        country_code: CN
      contact_links:
        - icon: twitter
          icon_pack: fab
          name: DM Me
          link: 'https://twitter.com/skyaoxiaojian80'
      # Automatically link email and phone or display as text?
      autolink: true
      # Email form provider
    design:
      columns: '2'

删除地图显示，避免拖慢访问速度。修改 config/_default/params.yaml 文件，将 map.provider 设置为空即可。

  map:
    provider: ''
    api_key: ''
    zoom: 15

去除 powered-by 信息

删除 powered-by 信息，让页面更简洁一些。

需要修改 hugo-blox-builder 仓库下的 modules/blox-tailwind/layouts/partials/site_footer.html 文件，删除这一段：

  <p class="powered-by text-center">
    {{ $is_sponsor := site.Params.i_am_a_sponsor | default false }}
    {{ $hide_published_with_footer := site.Params.power_ups.hide_published_with | default true }}
    {{ if not (and $is_sponsor $hide_published_with_footer) }}
		.......
    {{ end }}
  </p>

主题模板调整

列表页面的图片显示

academic 主题，在 post、publication、talk 等几个列表显示图片时，会按照 808*455 的长宽进行处理，而我之前设置的图片都是长条形，因此显示效果和之前版本差别好大，不够美观，因此考虑修改模板，将图片预处理的长宽比修改为 808*210 （等比1920x500计算而来）。

修改 modules/blox-bootstrap/layouts/partials/views/card.html，将原有的

  {{ $image := .Fill (printf "808x455 %s" $anchor) }}

修改为：

  {{ $image := .Fill (printf "808x210 %s" $anchor) }}

老版本这样修改就可以了，但是在新版本中这样修改无效了，需要继续修改 modules/blox-bootstrap/assets/scss/wowchemy/elements/_content.scss 文件中的 .article-banner，将高度都改成 210:

.article-banner {
  width: 100%;
  height: 210px;
  object-fit: cover;

  @include media-breakpoint-up(lg) {
    height: 210px; /* Increased height on desktop */
  }
}

横幅图片的显示

academic 主题，在 post、publication、talk 等几个 single 页面显示 featured 图片时，是放在主题内容中的，宽度很有限。远没有将图片拉宽到占据整个页面宽度那样的视觉效果好。因此考虑修改过来。

从源代码中看到，图片可以设置多种摆放的方式，其中 默认 1 是和主体内容等宽。如果设置为3 ，则就可以实现占据整个页面宽度。

因此可以在每个需要改动的页面设置:

image:
  placement: 3

方便起见，可以在 _index.md 文件设置：

cascade:
- image:
    placement: 3

修改 modules/blox-bootstrap/layouts/partials/page_header.html ，将这一段的位置往下挪，让图片显示在最前面，这样图片宽度占据全屏宽度，就直接和导航条无缝连接了。

原有内容：

{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}

<div class="article-container pt-3">
  <h1>{{ $title }}</h1>

  {{ with $page.Params.subtitle }}
  <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  {{end}}

  {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  {{ partial "page_links_div.html" $page }}
</div>

{{/* Featured image */}}
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
  <div style="position: relative">
    <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
    {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  </div>
</div>
{{else}}

修改为：

{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}

{{/* Featured image */}}
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
  <div style="position: relative">
    <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
    {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  </div>
</div>

<div class="article-container pt-3">
  <h1>{{ $title }}</h1>

  {{ with $page.Params.subtitle }}
  <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  {{end}}

  {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  {{ partial "page_links_div.html" $page }}
</div>
{{else}}

图片的样式默认设置了 “mt-4 mb-4”，导致图片的上下都会留空白，这样顶部就不能和导航条融为一体了，因此删除 mt-4 ，顶部不留空白。将下面这行中的 mt-4 删除即可：

{{/* Featured image */}}
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">

不显示作者名

个人网站，所有的作者都是自己，没有必要到处显示了，不显示作者信息让页面保持简洁。

修改 modules/blox-bootstrap/layouts/partials/page_metadata.html ，删除下面这段内容：

  {{/* If `authors` is set and is not empty. */}}
  {{ if $page.Params.authors }}
  {{ $authorLen := len $page.Params.authors }}
  {{ if gt $authorLen 0 }}
  <div>
    {{ partial "page_metadata_authors" $page }}
  </div>
  {{ end }}
  {{ end }}

统一显示阅读时长

默认只在 post 类型的页面上显示阅读时长，publication等是不显示的，感觉还是都显示比较好。

修改 modules/blox-bootstrap/layouts/partials/page_metadata.html ，将下面这段内容中的 post 判断删除：

{{ if and (eq $page.Type "post") (not (or (eq site.Params.reading_time false) (eq $page.Params.reading_time false))) }}
<span class="middot-divider"></span>
<span class="article-reading-time">
  {{ $page.ReadingTime }} {{ i18n "minute_read" }}
</span>
{{ end }}

修改为：

{{ if not (or (eq site.Params.reading_time false) (eq $page.Params.reading_time false)) }}
  <span class="middot-divider"></span>
  <span class="article-reading-time">
    {{ $page.ReadingTime }} {{ i18n "minute_read" }}
  </span>
  {{ end }}

如果不想显示阅读时长，可以在单独的页面上进行控制。

删除出版作品页面的搜索功能

出版作品没多少，就不需要搜索了。修改 modules/blox-bootstrap/layouts/section/publication.html 文件，删除下面这一段内容：

     <div class="form-row mb-4">
        <div class="col-auto">
          <input type="search" class="filter-search form-control form-control-sm" placeholder="{{ i18n "search_placeholder" }}" autocapitalize="off"
          autocomplete="off" autocorrect="off" role="textbox" spellcheck="false">
        </div>
        <div class="col-auto">
          <select class="pub-filters pubtype-select form-control form-control-sm" data-filter-group="pubtype">
            <option value="*">{{ i18n "publication_type" }}</option>
            {{ range $index, $taxonomy := site.Taxonomies.publication_types }}
            <option value=".pubtype-{{ $index }}">
              {{ i18n (printf "pub_%s" (strings.Replace $index "-" "_")) | default (strings.Title $index) }}
            </option>
            {{ end }}
          </select>
        </div>
        <div class="col-auto">
          <select class="pub-filters form-control form-control-sm" data-filter-group="year">
            <option value="*">{{ i18n "date" }}</option>
            {{ $years_sorted := $.Scratch.GetSortedMapValues "years" }}
            {{ if $years_sorted }}
            {{ range $year := sort $years_sorted "" "desc" }}
            <option value=".year-{{ $year }}">
              {{ $year }}
            </option>
            {{ end }}
            {{ end }}
          </select>
        </div>
      </div>

出版物类型之类的信息也没有必要显示，修改 modules/blox-bootstrap/layouts/publication/single.html，删除以下内容：


    {{/* If the type is Uncategorized, hide the type. */}}
    {{ if $pub_type_display }}
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="row">
          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "publication_type" }}</div>
          <div class="col-12 col-md-9">
            <a href="{{ (site.GetPage "section" "publication").RelPermalink }}#{{ $pub_type_csl | anchorize }}">
              {{ $pub_type_display }}
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="d-md-none space-below"></div>
    {{ end }}

    {{ if .Params.publication }}
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="row">
          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "publication" }}</div>
          <div class="col-12 col-md-9">{{ .Params.publication | markdownify }}</div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="d-md-none space-below"></div>
    {{ end }}

页面内容宽度调整

默认页面正文内容的宽度最大为 760 像素，在今天4k显示器初步普及的现在有些小，页面上大片空白。因此考虑增加一些。

打开 modules/blox-bootstrap/assets/scss/wowchemy/elements/_content.scss，找到 .article-container:

.article-container {
  max-width: 760px;
  padding: 0 20px;
  margin: 0 auto;
}

默认 760，增加到 960 比较合适。（尝试过 1280，文字内容太宽，图片太窄，有点不协调，退回960.）

更新网站

skyao.io 网站之前建立时是使用了其他的仓库，内容是调整之后再复制过去的，代码无法和 theme-academic-cv 仓库合并。

因此，在 theme-academic-cv 仓库代码修改完成之后，就需要将修改好的内容，复制到 skyao.io 网站的仓库，然后提交。

由于这个更新操作我一般2到3年才做一次，因此也还好。

4 - 使用本地文件加速网络访问

使用本地文件加速，避免被墙

准备修改 hugo-blox-builder ，将可能会被墙的文件修改为使用本地文件。

为了方便修改，建议用 vs code 之类的 IDE 打开 fork 下来的 hugo-blox-builder 仓库。

准备工作

准备分支

开一个 local-files 分支，准备修改为本地文件用，后面还是要合并到 skyao-io-2024 分支的：

cd hugo-blox-builder
git checkout skyao-io-2024
git checkout -b localfiles
git push --set-upstream origin local-files

准备local目录

在 hugo-blox-builder 仓库下的 blox-bootstrap 模块下建立$ static/local 文件夹：

cd hugo-blox-builder
cd modules/blox-bootstrap/static
mkdir local
cd local

修改

修改 assets.toml 文件

打开 modules/blox-bootstrap/data/assets.toml 文件，这个文件中定义了大部分js和css文件的地址和版本。

从地址和版本中获取到下面这些下载地址，将文件下载到 static/local 目录：

wget -x "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
wget -x "https://cdn.jsdelivr.net/gh/metafizzy/isotope@v3.0.6/dist/isotope.pkgd.min.js"
wget -x "https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js"
wget -x "https://cdn.jsdelivr.net/gh/hpneo/gmaps@0.4.25/gmaps.min.js"
wget -x "https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.min.js"
wget -x "https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"
wget -x "https://cdn.jsdelivr.net/gh/krisk/Fuse@v3.2.1/dist/fuse.min.js"
wget -x "https://cdn.jsdelivr.net/gh/julmot/mark.js@8.11.1/dist/jquery.mark.min.js"
wget -x "https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"
wget -x "https://cdn.jsdelivr.net/npm/anchor-js@5.0.0/anchor.min.js"
wget -x "https://cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min.js"
wget -x "https://cdn.jsdelivr.net/gh/osano/cookieconsent@3.1.1/build/cookieconsent.min.js"
wget -x "https://cdn.jsdelivr.net/gh/plotly/plotly.js@v1.55.2/dist/plotly.min.js"
wget -x "https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1.9.4/css/academicons.min.css"
wget -x "https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.min.css"
wget -x "https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"
wget -x "https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css"
wget -x "https://cdn.jsdelivr.net/gh/osano/cookieconsent@3.1.1/build/cookieconsent.min.css"

然后将这个文件中的所有 https:// 替换为 /local/

修改 fonts.googleapis.com css2文件

将这个css文件保存到 static/local/fonts.googleapis.com 目录下，改名为 css2.css:

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto+Mono&family=Roboto:wght@400;700&display=swap

修改 modules/blox-bootstrap/layouts/partials/site_head.html 文件，将原来的内容从：

      <link rel="preload" as="style" {{ printf "href=\"https//fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }}>
      <link rel="stylesheet" {{ printf "href=\"https//fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }} media="print" onload="this.media='all'">

修改为

      <link rel="preload" as="style" {{ printf "href=\"/local/fonts.googleapis.com/css2.css?%s&display=swap\"" . | safeHTMLAttr }}>
      <link rel="stylesheet" {{ printf "href=\"/local/fonts.googleapis.com/css2.css?%s&display=swap\"" . | safeHTMLAttr }} media="print" onload="this.media='all'">

这个修改方式可能会带来其他问题，因为参数可能不一样。但总比这个css地址老是被墙而无法访问好。

先这么对付用。

修改 woff2 文件

用开发者工具可以看到还是有部分 woff2 文件走的不是本地文件，比如：

https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2

这些文件的地址定义在 上面的 fonts.googleapis.com css2.css 文件中。 grep 以下然后替换，就得到这些下载命令：

wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2
wget -x https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2
wget -x https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2
wget -x https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SeW4AJi8SJQtQ4Y.woff2
wget -x https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_QOW4AJi8SJQtQ4Y.woff2
wget -x https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_R-W4AJi8SJQtQ4Y.woff2
wget -x https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_S-W4AJi8SJQtQ4Y.woff2
wget -x https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SuW4AJi8SJQtQ4Y.woff2
wget -x https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2

将文件下载到 static/local 目录。

然后将这个文件中的所有 https:// 替换为 /local/。

其他文件修改

# modules/blox-analytics/layouts/partials/blox-analytics/services/fathom.html
wget -x https://cdn.usefathom.com/script.js

# modules/blox-analytics/layouts/partials/blox-analytics/services/pirsch.html
wget -x https://api.pirsch.io/pirsch.js

# modules/blox-analytics/layouts/partials/blox-analytics/services/plausible.html
wget -x https://plausible.io/js/script.js

这些文件用开发者工具没有发现访问，算了，不继续改了。

小结

修改完上述的文件地址，基本上绝大部分的远程文件请求都被修改为本地文件请求了。

5 - 本地搭建

本地从头开始搭建博客网站的编辑环境。

简单记录备忘和快速重复搭建。

准备工作

先安装好：

  • go

  • nodejs

  • hugo

    vi ~/.zshrc 增加 h alias，方便后续使用:

    alias h='hugo -D -F server --disableFastRender --bind "0.0.0.0"'
alias h2='hugo -D -F server --disableFastRender --bind "0.0.0.0" --port 2323'
alias h3='hugo -D -F server --disableFastRender --bind "0.0.0.0" --port 3333'
alias h4='hugo -D -F server --disableFastRender --bind "0.0.0.0" --port 4343'

  • git

  • markdown编辑器：如 typora

准备好目录，

mkdir -p ~/work/code/skyao
cd ~/work/code/skyao

主题和构建脚本

hugo-blox-builder 仓库：

cd ~/work/code/skyao
git clone git@github.com:skyao/hugo-blox-builder.git
cd hugo-blox-builder
git checkout skyao-io-2024

skyao.io 仓库

# skyao.io.git
cd ~/work/code/skyao
git clone git@github.com:skyao/skyao.io.git
cd skyao.io

启动 hugo server

# run hugo server
h

输出为：

Watching for changes in /home/sky/work/code/skyao/{hugo-blox-builder,skyao.io}
Watching for config changes in /home/sky/work/code/skyao/skyao.io/config/_default, /home/sky/work/code/skyao/hugo-blox-builder/modules/blox-plugin-netlify/config.yaml, /home/sky/work/code/skyao/hugo-blox-builder/modules/blox-plugin-reveal/config.yaml, /home/sky/work/code/skyao/hugo-blox-builder/modules/blox-bootstrap/hugo.yaml, /home/sky/work/code/skyao/skyao.io/go.mod
Start building sites … 
hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740+extended linux/amd64 BuildDate=2023-12-08T08:47:45Z VendorInfo=gohugoio


                   |  ZH   
-------------------+-------
  Pages            |  227  
  Paginator pages  |    7  
  Non-page files   | 1154  
  Static files     |  113  
  Processed images | 3394  
  Aliases          |   48  
  Sitemaps         |    1  
  Cleaned          |    0  

Built in 16862 ms
Environment: "development"
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0) 
Press Ctrl+C to stop

我的博客网站内容有点多，启动速度要17秒，有点慢。