前言

Theme Sakurairo提供的页脚模板，在博主看来还是有不少改进空间的：

  • 旋转樱花可以更具层次感；
  • Copyright行用的是纯黑色，并且位置过于靠前；
  • 没有提供备案号的位置；
  • 没有提供设置背景图的功能。

博主认为，和企业网站不同，博客网站的页脚部分更多的是装饰和衬托主体内容的功能，所以应该做到美观但不分散注意力，因此考虑对其源代码部分进行改进。但是撰写本文时博主也忘了初始代码长什么样，因此初始代码以Github上的官方源为准（时间：2023.11.13）：

https://github.com/mirai-mamori/Sakurairo.

1 更改五瓣樱的颜色

代码位置：/footer.php 约第26行

初始代码：

PHP
<svg width="30px" height="30px" t="1682340134496" class="sakura-svg" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5240">
<path d="M525.58396628 573.34694353s268.83106938-2.62915481 309.36387092 193.24287089l-76.46458293 21.90962291 12.92667757 84.13295086a214.05701289 214.05701289 0 0 1-96.84053193-4.82011663A224.79272784 224.79272784 0 0 1 525.58396628 578.38615666z" fill="#EE9ca7" p-id="5241">
</path>
<path d="M552.75189802 512.4381922s131.45773592-233.7756732 321.63325979-170.89505575L854.2283053 418.66500728l79.31283344 30.89256828a215.59068679 215.59068679 0 0 1-52.58309388 81.50379604 224.57363215 224.57363215 0 0 1-325.35789552-14.67944718z" fill="#EE9ca7" p-id="5242">
</path>
<path d="M508.49446078 494.0341093S317.00435871 306.48774025 426.77156822 139.31731943l69.4535037 38.78003191L547.4935884 109.30113636a214.05701289 214.05701289 0 0 1 65.72886796 71.86356201 225.01182435 225.01182435 0 0 1-98.37420505 310.67844912z" fill="#EE9ca7" p-id="5243">
</path>
<path d="M473.21996809 525.58396628S242.2925454 661.64272234 109.30113636 512.4381922l55.43134521-57.18411482-53.45947909-65.72886795a213.61882069 213.61882069 0 0 1 86.32391269-43.81924506 224.79272784 224.79272784 0 0 1 274.527572 175.27698099z" fill="#EE9ca7" p-id="5244">
</path>
<path d="M481.76472043 566.55496s72.0826585 258.31445093-106.4807652 348.14390364l-40.31370582-68.13892627-78.21735252 34.17901099a212.30424328 212.30424328 0 0 1-20.15685331-94.64956933 224.57363215 224.57363215 0 0 1 241.00584894-219.09622602z" fill="#EE9ca7" p-id="5245">
</path>
</svg>

可以看出初始代码的处理方法相当高明，通过复用的方式，不仅节约了加载时间，还为每个花瓣都建立了单独的对象。这也为更改颜色提供了极大的便利。直接更改每个花瓣对象的fill元素即可，博主使用的16进制颜色组合为（最后两位“80”代表0.5（50%）透明色）：

#FF818C80

#FF606680

#FF404080

#FF1F1A80

#F0223380

2 更改文本属性

Sakurairo给最后一句作者信息配置（对应CSS类site-info{}）的居中显示、中等灰色和默认字体大小就很适合页脚全面配置，因此直接沿用，不作更改；但如果需要更改的话：

代码位置：/style.css 约第1244行（建议直接ctrl+f搜索“site-info”）

初始代码：

CSS
.site-info {
  text-align: center;
  font-size: 13px;
  color: #B9B9B9;
  font-weight: var(--global-font-weight);
}

直接修改其中的多项元素即可。

3 更改文本内容

根据第2节所述，本站的页脚文本配置只利用Sakurairo提供的site-info{}类进行。

代码位置：/footer.php 约46行

初始代码：

PHP
<a href="https://github.com/mirai-mamori/Sakurairo" rel="noopener" target="_blank" id="site-info" >Theme Sakurairo</a><a href="https://docs.fuukei.org/" rel="noopener" target="_blank" id="site-info" > by Fuukei</a>

本站向其中添加了备案号（国外服务器不需要）、版权信息、其他网站链接等内容：

PHP
<!-- 自行添加的备案号等内容-->                   
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=31011402010281" rel="noopener" target=\"_blank\"><img src="https://cdn.jsdelivr.net/gh/IyaoiHarumi/Ichigo_cover/filing_icon.png" height="11" width="11"/>
沪公网安备31011402010281 ·</a><a href="http://beian.miit.gov.cn/" rel="noopener" target="_blank" id="site-info"> 沪ICP备2023026392</a>
<br>
Copyright © 2023 <a href="https://gpluo.cn" rel="noopener" target="_blank" id="site-info">gpluo.</a> All Rights Reserved.
<br>
Thanks to <a href="https://wordpress.org/" rel="noopener" target="_blank" id="site-info">WordPress</a> & <a href="https://github.com/mirai-mamori/Sakurairo" rel="noopener" target="_blank" id="site-info" >Theme Sakurairo</a>

需要注意的是，公安备案是需要将备案徽标放置在最前的（至少上海是这样），所以需要引用图片。博主为了方便管理图片，是将其放置在了自己的git图床里，然后通过cdn链接引用，实际操作中由于图片本身很小，所以放在本地（如放在/menifest里面的文件夹）也不影响加载速度。

最后的呈现效果：

写到这里还是想吐槽一下工信部备案的实名上网问题……点进链接就能查到网站是谁备案的……好歹学公安备案把实名遮两个字啊……

4 设置背景图片

为使网站背景的一体化效果更好，建议使用透明底色的.png图片作为背景。博主使用的背景是个人二次加工产物，原图链接：

https://www.freepik.com/free-vector/colorful-flower-card-template-set_3759020.htm

然后经历了繁琐的重新填充 -> 转png -> 抠素材 -> 重设尺寸 -> 堆叠素材 -> 更改尺寸 -> 压缩操作，得到了现在使用的页脚背景图（大小26.4kB，尺寸2558x440），如果需要这张图的话（反正版权不能算博主的，无所谓）：

https://cdn.jsdelivr.net/gh/IyaoiHarumi/Ichigo_cover/footerPicTrans.png

不管是利用什么方式，搞定原图后，就可以开始添加背景图片了。博主就直接在footer里面加了，省得又去修改CSS文件。

代码位置：/footer.php 约第19行

初始代码：

PHP
<footer id="colophon" class="site-footer" role="contentinfo">

修改代码前要明确几个事项：

  • Sakurairo本身给网站背景提供了一定透明度（这个可以在主题的后台里设置，博主设置的是0.7，当然直接修改site-info{}类效果也一样）的白色遮罩，所以如果直接添加背景图片的话，页脚部分的遮罩是会被覆盖导致失效的；
  • 如果强行在页脚背景图上再次添加遮罩，会使得页脚图片颜色可能过淡，且不方便控制显示效果。

因此这里一定要注意撰写规则，先贴出修改后的代码：

PHP
<footer id="colophon" class="site-footer" role="contentinfo" style="Background:url('https://cdn.jsdelivr.net/gh/IyaoiHarumi/Ichigo_cover/footerPicTrans.png'),linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)); background-size:cover">

解释说明：

  • 利用linear-gradient()创建一个白色半透明的遮罩。其实这个方法的功能更宽泛，可以通过前后两种rgb颜色的设置创建一个渐变效果，但本站这里只需要其保持单色显示。
  • Background元素中，先写背景图片的url()，再铺设半透明遮罩，这样可以保持背景图片图层再上，遮罩图层在下，背景图片不被遮挡。
  • 使用background-size: cover控制背景图片的显示位置。本站的意图是让手机端、平板端和桌面端均从图片左上角开始显示，并呈现不同的效果。

呈现效果如下：

手机端
平板端
桌面端