LoveIt配置与使用记录

2021-10-10 约 699 字预计阅读 2 分钟

1. 安装

2. 网站结构

使用hugo new site my_blog后生成的网站文件夹具有固定的结构。

2.1 archetypes/

存放页面front-matter模板，当使用：

1

hugo new posts/a_post.md

生成页面markdown文件时，即复制其中模板文件的内容。

2.2 assets/

本地资源存放位置。支持本地资源引用.

另外，自定义css样式存放于 assets/css/ 下。

2.3 static/

静态资源存放位置，存放网站图标，参考网站图标, 浏览器配置, 网站清单, 本地资源等. 支持本地资源引用，

example - 对比 assets 与 static

调用 assets/image.jpg

1
2
3
4
5
6


<!-- 可以使用 -->
![image](/image.jpg)

        
    image01
      <!-- 扩展的shortcode -->
<!-- 不能使用 -->

            image01
        

  <!-- 内置的shortcode -->
<img src="/image.jpg"/>  <!-- HTML -->

调用 static/image.jpg

1
2
3
4
5


<!-- 可以使用 -->
![image](/image.jpg)

        
    image01
      <!-- 扩展的shortcode -->

            image01
        

  <!-- 内置的shortcode -->
<img src="/image.jpg"/>  <!-- HTML -->

2.4 content/

博客文章存放于 content/posts/。

2.5 layouts/

生成网页所需的html模板、shortcode文件等。生成网页时，系统首先在layouts/下查找所需模板，接着去主题文件夹中的themes/LoveIt/layouts/下查找。因此layouts/下定义的html文件可以覆盖掉主题中的同名文件。

2.6 resources/

hugo 生成的资源文件

2.7 config.toml

配置文件

3. Netlify 自动发布和托管

首先将网站仓库上传到 GitHub 上，然后登陆 netlify 创建网站即可。

技巧

如果站点有很多图片，生成站点可能会花费很多时间来生成不同尺寸的缩略图。为了加速这一过程，Hugo 会把裁剪好的图片缓存在站点目录下的 resources 文件夹。Hugo 官方建议把这个文件夹加入版本控制系统。

在Netlify中可以使用插件hugo-cache-resources来缓存Netlify生成的resources文件夹。

在Netlify的Plugins中搜索该插件并安装。