古法手工制作一个粉丝页面，及相关小述

十月份好，坐在家里。我又开始写博客了。最近博客写得频繁（算频繁吗？）主要还是因为我的小说写作相当不顺，只能先写写博客缓解焦虑。

本文涉及以下“相对有用”的内容：Hugo模板调用有关小述、用CSS制作一个相机照片盒子。多图预警～

有关于博客，发生了如下几件小事：

重新小小装修了一番首页和文章归档页面。

之前的截图

改动不是非常大，因为即将入秋所以换了换一下配色，还挺萌的吧！这个博客的主题代码写得非常乱，每次改改CSS哪怕只是配色也可说是牵一发而动全身。导致我都在想要不要重新建一个主题文件夹了。

改动的另一个重头戏是创建了小饼演员的Fanpage♡

虽然是粗糙的网页，但是真挚的情和百分百的萌（？）这个页面完全是古法手搓HTML，之前有提到过我非常喜欢逛Neocities和Nekoweb上的风格各异、充满创意的网站，这次稍微自己写了一下才发觉这真的很困难……虽然最后呈现的效果很简单。

Hugo模板调用小述

关于如何在Hugo里创建单独的模板/页面并使用，这里也稍微赘述一下。

我的博客有两种页面模板，一种是指南类文章，会使用信息更全面的页面（也是默认页面模板），另一种则是时间字数全都不显示的日记模板（图右）。

默认模板日记模板

本文也是一篇使用了日记模板的文章。那么，如何实现呢？

创建/layouts/posts/diary.html（或是/layouts/_default/diary.html），并在文件内有定义类似{{ .Content }}这样会调用Markdown文章正文内容的参数。
在文章的Front matter里填入layout: "diary"，Hugo就会根据优先级自动查找上述两个文件是否存在，如存在，则调用模板，如果不存在，则按普通的文章，调用/layouts/posts/single.html这个默认文章模板。

关于Hugo模板查找的逻辑，不感兴趣可以跳过

当我们在文章的Front Matter中使用layout: "diary"字段，是在告诉Hugo：我要找的文件名是diary.html。

Hugo会在以下两个地方寻找这个文件，找到即停止：

(内容类型优先)：在当前内容的type对应目录下查找。

type默认是markdown文件所处的文件夹，如果是在/posts/文件夹，则是posts。也可以在Front Matter中用type: "xxx"覆盖。

例如：themes/.../layouts/TYPE/diary.html

(全局默认)：如果上一步找不到，那么退到全局的_default目录下查找。

例如：themes/.../layouts/_default/diary.html

如果上述diary.html均不存在，则返回寻找默认的single.html模板。

按照这个思路，我们几乎可以自己重写所有页面。

而我的Fanpage是用了另一种方式创建，不只作为post的一种单页，也是作为了一种type来创建了/layouts/fanpage/single.html（然后定义Front Matter字段：type: fanpage）。

这和创建一个layouts/.../xxx.html的区别是创建了一个独立的类型组合，这个fanpage type可能会有自己独立的RSS、独立的列表页（list.html）、独立的统计，而非一股脑地都作为/posts/下的一个文章页面存在。

所以如果说想要在一个博客里拥有多种独立的内容管理，例如小说/散文/绘画，可能这种方式会更适合一点。

但因为我还没有深入使用过，因而就先介绍到这里。

用CSS制作一个相机照片盒子

做这个Fanpage花的最多的时间其实是……做这个相机：

⬆️俺的手搓小相机，喜欢。

这个相机的核心思路是，用父级容器（.camera-container）来控制整个相机组件的尺寸和动画效果，用绝对定位控制相机框架和底层的照片的位置，达到一种照片在相机里的效果。

组件代码及相机图片折叠

<div class="camera-container">
  <img class="photo" src="照片路径" > 
  <div class="camera-frame"></div>  
</div>

/* ⬆️HTML及底层照片的路径，⬇️CSS及相机路径 */

<style>
.camera-container {
    width: 274px; 
    height: 179.6px;     /* 相机的尺寸，按照相机图片的像素685x449各乘以40%得到。*/
    transform: translate(0px, 0px); 
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(4px 4px 5px #fdf8e3);
    margin: 0 auto;
    position: relative;
}
.camera-container:hover {
    transform: translate(5px, 5px) scale(1.05); 
    filter: drop-shadow(8px 8px 10px #c6c2b1);
}
.camera-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-image: url('/site/camera.png'); /* 修改为相机图片的路径 */
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    z-index: 10; 
}
.photo {
    width: 60%; 
    height: 60%;
    top: 50px; 
    left: 11px; /* 要根据图片的大小和位置修改上述四个值，以嵌入相机不超出 */
    z-index: 5; 
    position: absolute;
    object-fit: cover;
}
</style>

这里相机的图片应该右键保存就可以用。同理其他的相机、拍立得、回形针，只要图片位置搭配多调整一下应该都可以实现差不多的效果。

不好意思，案例都是李叔叔……见笑了。但很可爱吧。那么本期古法手搓HTML的小指南就写到这里（？）下一期见。

＃monthly ＃Hugo