如何在站点中添加漂亮的小图标 ?

在一些页面上,可以看到一些小图标,非常漂亮。如下:



这些小图标看上去非常可爱,给页面带来更好观赏性的同时也提高用户的交互体验,这里简单介绍一下如何在页面中添加这些漂亮小图标,使自己的导航链接从这样子,

变成这样子。这里还是以light_cn主题为例来介绍,看我是如何给页面加上这些小图标的。

这些小图标本质上其实是一种字体,并不是嵌入的图片,当你从页面代码上去查看这个元素的时候,你可能会发现这个:

但是,content是个什么玩意?\f015这又是个啥玩意?

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

这样就清晰了一点,在定义有before伪元素前面添加了一个叫\f015的玩意,这个玩意显示出来就是小房子这个小图标。

好了,那么怎么能随心所欲的添加我们想要的小图标呢?

1. 基本原理

这些图标字体肯定是某人或者某组织设计出来了,这里就要提到Font Awesome这个网站了,据我所知,绝大部分Hexo站点使用的免费icon都是出自这个网站,它是挂在Github上的一个开源项目。

首先将项目文件下载下来,这里我们只使用cssfonts两个文件夹,将他们拷贝进Hexo项目主题目录下source目录中。(注意:拷贝进主题目录下的source目录中)

然后在主题目录下layout/_partial/head.ejs文件中引用这个css样式文件,添加如下一行代码。

<!-- Font-Awesome -->
<link rel="stylesheet" href="<%- url_for('/font-awesome/css/font-awesome.min.css') %>">

接下来你就可以随心所欲的使用它了,使用方法很简单,在你需要显示小图标的元素上加上class="fa fa-***"样式即可。

例如,首页链接前面加个小房子图标:<a class="fa fa-home">首页</a>即可。fa定义了要使用的FontFontAwesomefa-home代表的就是小房子图标,它的Content值都已经在font-awesome.min.css中定义好了,如下房子图标的Content值为\f015

.fa-home:before {
  content: "\f015";
}

2. 导航链接小图标

light_cn主题的导航链接是通过主题配置文件中menu以及submenu来进行配置的,如下:

menu:
  home: /
  archives: /archives
  books: /hexo
  about: /resume

submenu:
  rss: /atom.xml
  customization: /customization

这些链接通过配置需要随时变化,并不是直接写死在布局文件中的,所以无法直接给a标签添加class属性,所以我参照了Next主题的处理办法,链接的图标名称对应关系以配置文件的方式进行维护。如下:

menu_icon:
  home: home
  archives: archive
  books: book
  about: user
  rss: rss
  customization: question-circle

针对每一个导航链接都对应有一个图标名称,该名称即是fa-***中星星字符所代表的图标。全部图标的对应关系请参照Font Awesome Icons,这些列举了官方提供的所有图标。

最后修改layout/_partial/header.ejs导航部分代码如下:

<div class='header-nav-content inner'>
    <div id="main-nav" class="alignleft">
                <% for (var i in theme.menu){ %>
                  <a href="<%- theme.menu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
                <% } %>
    </div>
    <div id="sub-nav" class="alignright">
        <% for (var i in theme.submenu){ %>
          <a href="<%- theme.submenu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
        <% } %>
    </div>
</div>

通过menu找到要显示的导航链接,然后通过menu_icon找到显示的图标样式,赋予到class属性上即可。

3. 不同布局的图标

light_cn主题中针对不同的布局,会显示不同的导航图标。例如:

点击分类的时候显示文件夹图标

点击标签的时候显示标签图标

点击日期归档的时候显示日历图标

这个如何实现呢?这个就需要借助Hexo提供的变量来实现,不同的布局下具有不同的变量,例如分类布局具有page.category变量等等,然后通过判断,设置不同的图标即可。详细见如下代码:

<h2 class="archive-title<% if (page.tag){ %> fa-tag<% } else if (page.category){ %> fa-folder<% } else if (page.archive){ %> fa-calendar<% } %>"><%= title %></h2>

tag布局图标fa-tagcategory布局图标fa-folderarchive布局图标fa-calendar

除了通过使用class属性值外,还可以直接在css中定义某个元素的Font以及content属性值便可,这样就可以更灵活的实现一些样式。

Comments
Write a Comment