目录

Blog 搭建笔记

注意
本文最后更新于 2021年12月05日,若内容或图片失效,请留言反馈。

hugo安装

Hugo的安装有很多方式 Install Hugo 根据个人喜好可以自行安装。

使用 Hugo 前需要安装 GitGo 语言开发环境。

第一步 下载 hugo,选择符合自己环境的版本下载;

第二步 解压hugo安装文件,比如到 C:\hugo

管理员身份打开cmd,切换到 C:\hugo\ 目录下,输入:

1
hugo version

显示 hugo 版本号,说明安装成功了;

Hugo添加到Windows的环境变量 PATH 中;

步骤 计算机 –> 属性 –> 高级系统设置 –> 环境变量 –> 系统变量 –> Path

现在在任意位置,右键打开 git bash 输入 hugo version 同样也会得到 hugo 版本号;

Node.js安装

打开Node.js,选择合适的版本下载安装即可;

img

我安装的长期维护版,安装过程一路点击下一步即可;

PicGo 配置(Gitee)

安装插件

在左侧 插件设置 选项中,搜索 Gitee 即可出现对应的插件,点击安装即可;

img

我选择的是 gitee-uploader 1.1.2

配置gitee

点击左侧 图床设置 –> gitee

img

填写说明
  • repo: 仓库名称,填写你在创建图床时的仓库名字,这里注意带上你的用户名,比如我的是 cajunlei/ImageBed;
  • branch: 填写分支名称,一般默认 master;
  • token: 这个比较重要,就是上面创建仓库后创建的私人令牌明文,直接粘贴上去就行,如果忘记了那么直接删除重新再创建了;
  • path: 填写仓库下面某个文件夹名字,也就是你存放图片的位置,比如我的是在images,这个名字要和你仓库中创建的对应;
  • customPath: 保持默认可不用修改;
  • customUrl: 保持默认可不用修改;

最后「确认」后直接就可以使用了,记得点击下「设置为默认图床」。

Blog 配置

为自己的博客添加运行时间

第一步 将以下代码中的日期和时间,修改为你博客或者网站的运行开始日期和时间;

1
2
<!-- 修改此行日期及时间 -->
new Date("9/24/2021 22:52:50");

第二步 将修改过后的代码,放到你网站喜欢的位置就好啦。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<span id="runtime_span"></span>
<script type="text/javascript">
    function show_runtime(){window.setTimeout("show_runtime()",1000);
    X=new Date("9/24/2021 22:52:50");
    Y=new Date();T=(Y.getTime()-X.getTime());
    M=24*60*60*1000;a=T/M;
    A=Math.floor(a);b=(a-A)*24;
    B=Math.floor(b);c=(b-B)*60;
    C=Math.floor((b-B)*60);
    D=Math.floor((c-C)*60);
    runtime_span.innerHTML="本站已运行:"+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>

我的放在 /layouts/pratials/footer.html 文件中:

加入不蒜子统计

在根目录的 config.toml 文件中加入以下代码:

1
2
3
4
5
6
[params]
...
# 以下为需添加内容 #
# busuanzi
busuanzi = true
busuanzi_site_offset = 100000

/layouts/pratials/footer.html 文件中加入以下代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{- if ne .Site.Params.footer.enable false -}}
    <footer class="footer">
        <div class="footer-container">
            ...
            <!-- 以下为需添加内容 -->
            <span id="busuanzi_container_site_pv">
                本站访问量:<span id="busuanzi_value_site_pv"></span></span> | 
            <span id="busuanzi_container_site_uv">
                您是本站第 <span id="busuanzi_value_site_uv"></span> 位访问者
            </span>
            <!-- 以上为需添加内容 -->
        </div>
    </footer>
{{- end -}}

用于站长SEO

无需上传验证文件到根目录,直接修改配置文件;

网站验证代码修改,根目录 config.toml 文件;

1
2
3
4
5
6
7
8
# Site verification code for Google/Bing/Yandex/Pinterest/Baidu
# 网站验证代码,用于 Google/Bing/Yandex/Pinterest/Baidu
[params.verification]
  google = "google699009ae438f1e4d"
  bing = "0AA62D35A93C9239B95F5187EC12FAF1"
  yandex = ""
  pinterest = ""
  baidu = "3f7de7fba11a61559c21d907904d0a1b"

jsDelivr 加速

操作步骤

第一步 新建Github仓库;

第二步 将需要cdn加速的静态资源上传到github仓库;

第三步 点击release发布版本,自定义发布版;

第四步 应用资源文件路径:

1
2
3
https://cdn.jsdelivr.net/gh/user/repo@version/file

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

以我的为例,访问仓库目录下的logo.jpg文件,为以下链接:

https://cdn.jsdelivr.net/gh/AyagawaSeirin/BlogAssets@1.3/logo.jpg

注意
版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源,

CDN 缓存

当网站更新时,如果CDN节点上数据没有及时更新,即便在浏览器使用Ctrl+F5的方式强制刷新浏览器的缓存,也会因为CDN节点没有同步最新数据而导致访问不到最近资源。

我们可以通过CDN服务商提供的刷新缓存接口来达到清理CDN边缘节点缓存的目的,这样在更新数据后,可以使用「刷新缓存」功能来强制CDN节点上的数据缓存过期,保证在访问时,拉取到最新的数据。

jsDelivr 缓存刷新

对于jsDelivr,缓存刷新的方式也很简单,只需将想刷新的链接的开头的

1
https://cdn.jsdelivr.net/...

替换成

1
https://purge.jsdelivr.net/...

即可实时刷新。刷新成功后,浏览器会返回缓存刷新成功的信息,如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "id": "I2ZhNWYqdXev0Dmh",
  "status": "finished",
  "timestamp": "2021-12-05T01:54:57.948Z",
  "paths": {
    "/gh/cajunlei/ImageBed/Posts/1.jpg": {
      "throttled": false,
      "providers": {
        "fastly": true,
        "bunny": true,
        "cloudflare": true,
        "quantil": false
      }
    }
  }
}

为图标添加动画效果

示例代码

1
2
3
4
5
6
7
8
<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

显示效果

自定义模板

第一步\themes\LoveIt\layouts\posts\single.html文件复制到\layouts\_default文件夹下;

第二步 按需要修改single.html模板文件;

第三步 最后在文章头部引用模板即可;

1
2
3
4
---
  title: "XX"
  layout: "journal"
---

一些问题

背景设置透明度后文章图片也被透明化的解决方法

因为增加了背景图片,故正文部分填充颜色设置了透明度,但是发现文章的「图片」也被透明了;

解决办法: 在设置透明度的时候改用rgba形式就可以了,只需要在设置颜色的透明度的时候可以先找到16进制颜色对应的rgb值,如:255,255,255然后通过rgba(255,255,255,0.9)来实现透明度;

参考链接


微信扫一扫 分享朋友圈 avatar