99、【Ubuntu】【Hugo】搭建私人博客：搜索功能（三）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

分析了 http://www.w3.org/2000/svg 在 SVG 中的功能，下面继续

OK，再回到上一行 <h1> 标签

这里有几个点

首先，这里关于 {``{- ... -}} 的语法，之前 blog 【Ubuntu】【Hugo】搭建私人博客：行内代码颜色修改（二）说过的，这是 Go 模板的语法动作，开头和结尾的 - 表示去除前后空白字符（包括换行和空格）避免渲染出多余的空白
OK，然后是这里的 .Title，这个是 Hugo 的上下文变量，表示当前页面的标题，一般就是 Markdown 文件中 front matter 的 title 字段，比如
接着是这里的 printf "%s " .Title，printf 是 Go 模板的格式化函数，类似 C 或 Python 的 printf，%s 表示字符串的占位符，.Title 标题会被插入进去，  是 HTML 中的不换行空格（non-breaking space），所以整体的意思是：把标题后面加一个不换行空格，变成 标题  ，注意，这里加上   是因为 <h1> 标签后面紧跟着一个 <svg> 搜索图标，如果用普通空格，浏览器就可能会在标题和图标之间自动换行，导致图标跑到下一行，而用   可以强制把标题和图标粘在一起，保持在同一行
最后是 | htmlUnescape，前面的 printf 输出的是字符串，其中   是作为字面量存在的，但这里需要它在 HTML 中真正变成一个不换行空格，而不是显式成文字 &nbsp，htmlUnescape 这个管道会把 HTML 实体（比如  ，< 等），还原成对应的字符或行为，所以最终   会被正确渲染成空格，而不是文本

OK，接下来说下 SVG 图标里面的具体属性

一个个来看：

width="28" 和 height="28"：指定 SVG 在网页中实际显示的尺寸（单位默认是像素 px），表示渲染出来的，是 28px × 28px 的图标 ，这里的属性可以用 CSS 样式覆盖（比如 style="width: 50px"），但默认按 28px 显式
viewBox="0 0 24 24"：SVG 最重要的概念之一 ，其格式为 viewBox="min-x min-y width height"，负责定义 SVG 内部坐标系的范围，其中 0 0 表示左上角起点，24 24 表示整个图形画在一张 24×24 的虚拟画布上，这里的精髓在于，图标的设计是在 24×24 的逻辑坐标系里完成的 ，比如上图中那条线，是从 (21, 21) 到 (16.5, 16.5)，但是可以通过上面的 width 和 height 属性，可以把这个设计的图标缩放到任意尺寸，比如 28px，100px，都可以，而不会导致失真，因为是矢量图，这就是矢量图可缩放的核心原理，即使前面的 width="100" 和 height="100"，图标内容仍是基于 0 ~ 24 的坐标绘制，只是被等比例放大了
fill="none"：设置 SVG 图标内部的填充色为透明，很多线性图标只用描边，不需要填充 ，如果设置成 fill="red"，那整个形状内部就会变成红色
stroke="currentColor"：让描边颜色 = 当前文本颜色，currentColor 是一个 CSS 关键字，会继承父元素的 color 值，这样只要改变文字颜色，图标颜色就会自动同步，比如可以这样设置

html 复制代码

<p style="color: blue;">
  文字是蓝色，<svg>...</svg> 图标也是蓝色
</p>

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：元信息&翻译（一）