Summer

Summer

使用Hugo部署博客以及Stack主题的美化

896
2024-01-28
使用Hugo部署博客以及Stack主题的美化

闲得无聊 玩玩静态博客,Hexo没什么我中意的主题,还要安装Nodejs,而Nodejs很容易让我想到一些不好的回忆…
(喜欢我Nodejs吗)

那就用Hugo吧,东看看西看看最后决定主题就用Stack

本来是打算使用PaperMod的,但是我这前端笨蛋倒腾半天灯箱也没搞出来,只好作罢🫠

需要准备什么?🤔

安装 Visual Studio Code

Download Visual Studio Code - Mac, Linux, Windows

无脑下一步就好

毕竟静态博客涉及不少前端嘛,不过还是自己习惯哪个IDE用哪个比较好

安装Git

参考Git的文档

Git - 安装 Git

安装Hugo

从Hugo的releases页面下载带有extended的安装包,解压得到Hugo.exe

将其放在一个不会被你意外删除的文件夹

例如我放置在D:\repo\Hugo Blog

打开Windows的搜索,搜索环境变量

选择 编辑环境变量

编辑你的电脑账户的环境变量Path,新建一个环境变量,内容填写刚刚我们将Hugo.exe存放位置的完整路径

然后连按三个确定,打开PowerShell(或CMD)输入以下命令来验证我们操作无误

hugo version

若输出了Hugo的版本号+extended 就代表我们成功啦😀

因为我这里使用的主题是Stack,所以必须使用带有+extended的Hugo🧐

Github添加ssh key与创建仓库

生成与添加ssh key可参考Github官方文档,毕竟这也不是什么难事😶

生成新的 SSH 密钥

开始部署啦😆

生成站点

找一个不会被你删掉的文件夹存储Hugo生成的博客文件,在此处打开PowerShell(或是CMD)输入下面这段命令来生成一个叫做Blog的站点

hugo new site Blog

然后Hugo就会在我们当前所处的位置生成文件夹Blog,文件夹内就是我们站点的基础框架啦

添加主题

在这里我以主题Stack为例进行演示😋

先进入到我们刚刚生成的文件夹,然后打开Git bash输入下面这段命令以git子模块的模式来添加Stack

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

如果输出报错 fatal: not a git repository (or any of the parent directories): .git

请先输入 git init后再次输入此段命令

拉取完毕后,打开博客文件夹内的theme/hugo-theme-stack/exampleSite,将文件夹内的config.yaml复制到站点根目录下,同时删除原有的Hugo.toml

然后输入hugo server在本机地址http://127.0.0.1:1313预览一下博客长什么样吧😎

个性化主题🧐

基础设置

下面是一些基础设置的说明🤔:

  • baseurl 博客的URL

  • languageCode 语言代码,例如zh-cn

  • paginate 每页显示的文章数量

  • title 网站名称

  • copyright 网站底部的个性化说明

  • languages 多语言设置,如不需要只需要把别的多余的语言删除即可

  • googleAnalytics Google分析代码

  • DefaultContentLanguage 默认显示的语言

  • since 创建博客的年份

  • emoji 侧栏头像旁显示的Emoji

  • subtitle 博客副标题,同时显示在侧栏的头像下

  • avatar 侧栏头像 下方是关于此设置的说明

  • favicon 站点logo

enabled 是否启用

local 是否储存在本地,如果要储存在本地,请把图片移动到博客根目录下的 assets\img\ 文件夹内(没有img文件夹就新建一个啦🙃)

src 图片本地链接或URL

配置Waline评论系统

首先要修改评论系统为Waline,在你的网站文件夹根目录的config.yaml的第67行启用评论系统,并将默认评论系统修改为waline

    comments:
        enabled: true
        provider: waline

然后在94~105行可以看到与Waline有关的设置

        # Waline client configuration see: https://waline.js.org/en/reference/component.html
        waline:
            serverURL:
            lang:
            pageview:
            emoji:
                - https://unpkg.com/@waline/[email protected]/weibo
            requiredMeta:
                - name
                - email
                - url
            locale:
                admin: Admin
                placeholder:

修改参数即可

修改侧栏个人社交信息

在网站文件夹根目录的config.yaml的192行找到memu,修改配置

如果感觉Stack内置的图标不好看,或又是没有你要用到的图标,那么我们就自己动手来添加图标吧

打开 Tabler Icons ,搜索自己想要的图标,然后将 Size 拉到 24px ,再将 Stroke 拉到 2px

然后单击所需要的图标,网站会会自动复制下这个图标的svg代码,然后在网站根目录下的assets/icons/文件夹内创建一个.svg文件,文件名起一个你能记得住的

比如我的就是这样子的

        - identifier: mail
          name: Mail
          url: mailto:[email protected]
          weight: 1
          params:
              icon: mail

        - identifier: github
          name: Github
          url: https://github.com/V-UwU
          weight: 2
          params:
              icon: brand-github

        - identifier: bilibili
          name: BiliBili
          url: https://space.bilibili.com/1722765856
          weight: 3
          params:
              icon: bilibili
                         
        - identifier: twitter
          name: twitter
          url: https://twitter.com/V_Official_233
          weight: 4
          params:
              icon: brand-twitter 

        - identifier: rss
          name: RSS
          url: https://hugo.vofficial233.com/index.xml
          weight: 5
          params:
              icon: rss 

weight 越小联系方式越靠前哦~

侧栏菜单配置

侧栏同样在网站根目录下的assets/icons/的第192行进行修改即可,图标仍需要从Tabler Icons并放置在assets/icons/

- identifier: xxxx #侧栏标识符
      name: XX #显示名称
      url: https://xxxxxx.com or /xxxx/ #外部链接或是网站内链接
      weight: -70 
      params:
          ### For demonstration purpose, the home link will be open in a new tab
          newTab: false #是否在新页面打开
          icon: planet #svg文件名称

添加友链页面

这里参考了这篇文章

创建友链layout

在网站的根目录的layouts文件夹内新建文件夹page,在page中新建links.html

填入以下内容:

{{ define "body-class" }}article-page keep-sidebar{{ end }}
{{ define "main" }}
    {{ partial "article/article.html" . }}
    
    <div class="article-list--compact links">
        {{ $siteResources := resources }}
        {{ range $i, $link :=  $.Site.Data.links }}
            <article>
                <a href="{{ $link.website }}" target="_blank" rel="noopener">
                    <div class="article-details">
                        <h2 class="article-title">
                            {{- $link.title -}}
                        </h2>
                        
                            {{ with $link.description }}
                            <footer class="article-time">
                                {{ . }}
                            </footer>
                            {{ end }}
                            {{ with $link.notes }}
                            <footer class="article-link">
                                {{ . }}
                            </footer>
                            {{ end }}
                            </div>
            
                    {{ with $link.image }}
                    <div class="article-image">
                        <img src="{{ . }}" loading="lazy">
                    </div>
                {{ end }}
                </a>
            </article>
        {{ end }}
    </div>
    
    {{ if not (eq .Params.comments false) }}
        {{ partial "comments/include" . }}
    {{ end }}
    
    {{ partialCached "footer/footer" . }}

{{ end }}

添加友链数据

在根目录的data文件夹内新建文件links.json,这个文件负责存储友链数据

[
  {
    "title": "Github",
    "website": "http://github.com",
    "image": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
    "description": "Something",
    "notes": "我的备注"
  }
]

原文中似乎提到了使用本地文件存储友链logo,但我这边全是URL外链,所以就不搞了😴

添加双栏样式

在网站根目录的assets/scss/目录下新建文件custom.scss

//友情链接双栏
@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: none;
        box-shadow: none;
        
        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
            border-radius: 10px;
            &:nth-child(odd) {
                margin-right: 8px;
            }
        }
    }
}

设置友链md文件

然后在网站根目录的content内新建一个与友链有关的md文件

例如我的存放在/content/page/friends/index.md

---
title: 友链
slug: "friends"
layout: "links"
---

调整备注格式

在网站根目录的assets/scss/partials/文件夹下新建article.scss

// .article-list--compact

        .article-time {
            font-size: 1.4rem;
        }

        .article-link {
            color: var(--emphasize-text-color);
            font-size: 1.3rem;
            font-style: italic;
        }

增加休眠区并改为三栏

添加冷冻舱数据

在网站根目录的data文件夹下新建文件frozenlinks.json,内容填写

[
    {
        "title": "",
        "website": "",
        "image": "/link-img/some_picture.png",
     "description": "",
     "notes": "沉睡的博客们会被放在这里喔~"
    },
      {
    "title": "Github",
    "website": "http://github.com",
    "image": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
    "description": "Something",
    "notes": "我的备注"
  }
]

如果要在本地储存图片,请把图片放置在网站根目录的文件夹static

添加三栏样式

再次修改assets/scss/custom.scss,加入三栏代码

/* Extra compact style article list for frozen links */
.article-list--extra-compact {
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    background-color: var(--card-background);
    --image-size: 50px;

    @include respond(md) {
        --image-size: 60px;
    }

    article {
        & > a {
            display: flex;
            align-items: center;
            padding: var(--small-card-padding);
            gap: 15px;
        }

        &:not(:last-of-type) {
            border-bottom: 1.5px solid var(--card-separator-color);
        }

        .article-details {
            flex-grow: 1;
            padding: 0;
            min-height: var(--image-size);
            gap: 10px;
        }

        .article-title {
            margin: 0;
            font-size: 1.4rem;

            @include respond(md) {
                font-size: 1.6rem;
            }
        }

        .article-image {
            img {
                width: var(--image-size);
                height: var(--image-size);
                object-fit: cover;
            }
        }

        .article-time {
            font-size: 1.3rem;
        }

        .article-link {
            color: var(--emphasize-text-color);
            font-size: 1.3rem;
            font-style: italic;
        }
    }
}

/* 冷冻舱友情链接修改为三栏 */
@media (min-width: 1024px) {
	.article-list--extra-compact.links {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		background: none;
		box-shadow: none;
		gap: 1rem;

		article {
			background: var(--card-background);
			border: none;
			box-shadow: var(--shadow-l2);
			margin-bottom: 8px;
			border-radius: var(--card-border-radius);
			&:nth-child(odd) {
				margin-right: 8px;
			}
		}
	}
}

修改友链layout

回到layouts/page/links.html ,新增三栏代码

<!-- 添加三栏冷冻休眠仓 -->
<h3>冷冻休眠舱</h3>

    <div class="article-list--extra-compact links">
        {{ $siteResources := resources }}
        {{ range $i, $link :=  $.Site.Data.frozenlinks }}
            <article>
                <a href="{{ $link.website }}" target="_blank" rel="noopener">
                    <div class="article-details">
                        <h2 class="article-title">
                            {{- $link.title -}}
                        </h2>
                        
                            {{ with $link.description }}
                            <footer class="article-time">
                                {{ . }}
                            </footer>
                            {{ end }}
                            {{ with $link.notes }}
                            <footer class="article-link">
                                {{ . }}
                            </footer>
                            {{ end }}
                            </div>
            
                    {{ with $link.image }}
                    <div class="article-image">
                        <img src="{{ . }}" loading="lazy">
                    </div>
                {{ end }}
                </a>
            </article>
        {{ end }}
    </div>

这段代码要添加到下方这段代码之前🧐

    {{ if not (eq .Params.comments false) }}
        {{ partial "comments/include" . }}
    {{ end }}
    
    {{ partialCached "footer/footer" . }}

{{ end }}

添加归档页和搜索页

直接将主题文件夹下的exampleSite/content/page内的所有文件全部复制到网站根目录从/content/page内即可

记得自己改一下源文件哦,如果使用单语言仅保留index.md即可

文章右侧不显示目录

在网站根目录config.yaml的第292行,修改

startLevel: 1

在归档页增加标签

在网站根目录layouts/_default/内新建archives.html

{{ define "body-class" }}template-archives{{ end }}
{{ define "main" }}
    <header>
        {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
        {{- $terms := $taxonomy.Pages -}}
        {{ if $terms }}
        <h2 class="section-title">{{ $taxonomy.Title }}</h2>
        <div class="subsection-list">
            <div class="article-list--tile">
                {{ range $terms }}
                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
                {{ end }}
            </div>
        </div>
        {{ end }}
    </header>
    {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "tags" -}}
    {{- $terms := $taxonomy.Pages -}}
    {{ if $terms }}
    <section class="widget tagCloud">
    <h2 class="section-title">{{ $taxonomy.Title }}</h2>
    
        <div class="tagCloud-tags">
            {{ if ne (len $.Site.Taxonomies.tags) 0 }}
                {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
                    {{ $tagCount := len $taxonomy.Pages }}
                    <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" class="tagCloud-tags">
                        {{ $name }}<span class="tagCloud-count">{{ $tagCount }}</span>
                    </a>
                {{ end }}
            {{ end }}
        </div>
    <section>
    {{ end }}
    

    {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
    {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
    {{ $filtered := ($pages | intersect $notHidden) }}

    {{ range $filtered.GroupByDate "2006" }}
    {{ $id := lower (replace .Key " " "-") }}
    <div class="archives-group" id="{{ $id }}">
        <h2 class="archives-date section-title"><a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a></h2>
        <div class="article-list--compact">
            {{ range .Pages }}
                {{ partial "article-list/compact" . }}
            {{ end }}
        </div>
    </div>
    {{ end }}

    {{ partialCached "footer/footer" . }}
{{ end }}

在网站根目录assets/scss/partials/ 内新建widgets.scss

.widget {
    display: flex;
    flex-direction: column;

    .widget-icon {
        svg {
            width: 32px;
            height: 32px;
            stroke-width: 1.6;
            color: var(--body-text-color);
        }
    }
}

/* Tag cloud widget */
.tagCloud {
    .tagCloud-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        a {
            background: var(--card-background);
            box-shadow: var(--shadow-l1);
            border-radius: var(--tag-border-radius);
            padding: 8px 20px;
            color: var(--card-text-color-main);
            font-size: 1.4rem;
            transition: box-shadow 0.3s ease;

            &:hover {
                box-shadow: var(--shadow-l2);
            }
        }
    }
}

/* Archives widget */
.widget.archives {
    .widget-archive--list {
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        background-color: var(--card-background);
    }

    .archives-year {
        &:not(:last-of-type) {
            border-bottom: 1.5px solid var(--card-separator-color);
        }

        a {
            font-size: 1.4rem;
            padding: 18px 25px;
            display: flex;

            span.year {
                flex: 1;
                color: var(--card-text-color-main);
                font-weight: bold;
            }

            span.count {
                color: var(--card-text-color-tertiary);
            }
        }
    }
}

.tagCloud {
    .tagCloud-count {
        color: var(--body-text-color);
    }
}

在归档列表里面显示文章副标题/简介

在网站根目录的assets/scss/partials/新建article.scss

并将主题同目录下的同名文件内的内容全部复制粘贴进此文件夹,找到.article-list--compact,在里面添加如下内容:

.article-subtitle {
    margin-top: -5px;
    font-size: 1.5rem;

    @include respond(md) {
        font-size: 1.6rem;
    }
}

再在layouts/partials/article-list/中新建compact.html 填入如下内容:

<article>
    <a href="{{ .RelPermalink }}">
        <div class="article-details">
            <h2 class="article-title">
                {{- .Title -}}
            </h2>
            {{ with .Params.description }}
            <div class="article-subtitle">
                {{ . }}
            </div>
            {{ end }}
            <footer class="article-time">
                <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </footer>
        </div>

        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
        {{ if $image.exists }}
            <div class="article-image">
                {{ if $image.resource }}
                    {{- $Permalink := $image.resource.RelPermalink -}}
                    {{- $Width := $image.resource.Width -}}
                    {{- $Height := $image.resource.Height -}}

                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
                        {{- $thumbnail := $image.resource.Fill "120x120" -}}
                        {{- $Permalink = $thumbnail.RelPermalink -}}
                        {{- $Width = $thumbnail.Width -}}
                        {{- $Height = $thumbnail.Height -}}
                    {{- end -}}
                    
                    <img src="{{ $Permalink }}" 
                        width="{{ $Width }}"
                        height="{{ $Height }}" 
                        alt="{{ .Title }}"
                        loading="lazy">
                {{ else }}
                    <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
                {{ end }}
            </div>
        {{ end }}
    </a>
</article>

外部链接后面会显示跳转图标

在网站根目录layouts/_default/_markup/新建render-link.html,并填入

<a class="link" href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
    {{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"
    {{ end }}>{{ .Text | safeHTML }}</a>
{{ if strings.HasPrefix .Destination "http" }}
<span style="white-space: nowrap;"><svg width=".7em"
    height=".7em" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
    <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor" />
    <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"
        fill="currentColor">
</svg></span>
{{ end }}

在文章中这样使用

[Summer](https://vofficial233.com)

缩小代码块的字体大小

默认的在移动端UA下看起来实在是太大了😨,还是小一点比较好看😋

在网站根目录的assets/scss/partials/ 内新建article.scss

并将主题同目录下的同名文件内的内容全部复制粘贴进此文件夹,在文件最后加入以下内容

code {
    border-radius: var(--tag-border-radius);
    font-size: 14px; // Add font size setting for code block
    font-family: var(--code-font-family);
}

修改切换深色模式图标

Stack默认的切换深色模式是和Walker默认相同的胶囊形状,但是我个人并不喜欢这种,好难看的😨

再打开上文我们使用过的 Tabler Icons ,搜索自己想要的图标,然后将 Size 拉到 24px ,再将 Stroke 拉到 2px

然后单击所需要的图标,网站会会自动复制下这个图标的svg代码,然后在网站根目录下的assets\icons\文件夹内创建一个.svg文件,文件名起一个你能记得住的

然后在博客根目录assets/scss/partials/内新建sidebar.scss

并将主题同目录下的同名文件内的内容全部复制粘贴进此文件夹,找到第154行的[data-scheme="dark"] {

将内容修改为:

[data-scheme="dark"] {
    #dark-mode-toggle {
        color: var(--accent-color);
        font-weight: 700;

        .icon-tabler-sun-high {
            display: none;
        }

        .icon-tabler-moon-stars {
            display: unset;
        }
    }
}

#dark-mode-toggle {
    margin-top: auto;
    color: var(--body-text-color);
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: var(--menu-icon-separation);

    .icon-tabler-moon-stars {
        display: none;
    }
}

layouts/partials/sidebar/left.htmlsidebar.scss操作一致

找到第91行,修改为

{{ if (default false .Site.Params.colorScheme.toggle) }}
  <li id="dark-mode-toggle">
    {{ partial "helper/icon" "浅色模式svg文件名称" }}
    {{ partial "helper/icon" "深色模式svg文件名称" }}
    <span>{{ T "darkMode" }}</span>
  </li>
{{ end }}

使用Fancybox作为灯箱放大图片

为什么不使用Stack自带的PhotoSwipe呢?因为PhotoSwipe只支持内部存储的图片,一旦图片是外链就无法放大了😨(不方便跑路换框架😉)

首先打开博客根目录的config.yaml,在第34行找到params,加入以下内容

params:
    fancybox: true 

首先来更改render-image.html

在博客根目录的/layouts/_default/_markup/内新建render-image.html

填写以下内容:

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := "" -}}

{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}

{{- if $image -}}
	{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
	{{- $Permalink = $image.RelPermalink -}}

	{{- if $notSVG -}}
		{{- $Width = $image.Width -}}
		{{- $Height = $image.Height -}}
		{{- $galleryImage = true -}}

		{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
			{{- $small := $image.Resize `480x` -}}
			{{- $big := $image.Resize `1024x` -}}
			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
		{{- end -}}
	{{- end -}}
{{- end -}}


{{if .Page.Site.Params.fancybox }}
<div class="post-img-view">
<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</a>
</div>
{{ end }}

然后更改custom.html

在博客根目录的layouts/partials/hand/内新建custom.html

并将主题同目录下的同名文件内的内容全部复制粘贴进此文件,并新增以下内容:

{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
{{ end }}

解决部分静态资源在大陆地区访问过慢问题

像是前面我们添加的Waline,又或是Fancybox,都使用到了 jsdelivr.netunpkg.com ,但是他们在国内因为某个众所周知的原因,访问实在是太慢啦😵‍💫

不过我们可以通过把使用到这两个站点的静态文件下载后,存储到博客根目录的static文件夹内,然后将引用文件的URL改为本地路径

例如我们修改Fancybox的资源

修改前:

{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
{{ end }}

修改后:

{{if .Page.Site.Params.fancybox }}
<script src=" https://npm.elemecdn.com/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="/Fancybox/jquery.fancybox.min.css" />
<script src="/Fancybox/jquery.fancybox.min.js"></script>
{{ end }}

我将这两个文件储存在了/static/Fancybox

本文所参考的文章🤔