为你的 Hexo 博客添加 Logo

2020-01-16 便签格

并不是所有的主题都提供了一键添加 Logo 的方式。如果碰巧你的主题没有直接添加的功能,也可以通过直接修改 <head> 的形式达到我们的目的。


快速生成

即便你不掌握 Photeshop 的操作,也可以快速生成一个。比如直接用艺术字或者首字母之类的。再者可以去类似 YEELOGOLOGASTER 等提供大量模板的地方生成一个。

裁剪成恰当的大小

用在浏览器的 Logo 大概在 16x16 或 32x32 的大小就足够了。我们可以通过一个 在线工具 来裁剪。

添加到网站

基本

定位到 Hexo 主题文件夹的 /layout/_partial/head.xxx 类似的文件。

然后在一个合适的位置插入:

<link rel="shortcut icon" type='image/x-icon' href=":logo-url">

其中 logo-url 为你制作的图片的图床位置。

优化

其实完成上面的步骤已经可以正常显示 Logo 了,但是我们并不满足于此。

比如我们可以这样写:

<% if (config.favicon) { %>
<link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.favicon) %>">
<% } %>

然后在博客配置文件中添加一条:

favicon: {logo-url}

这样就可以直接在博客配置中修改 Logo,事实上许多主题支持直接在配置文件中更改也是如此实现的。

或者像我这样放了许多版本一适配不同位置的显示。

<% if (config.faviconsc) { %>
<link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.faviconsc) %>">
<% } %>
<% if (config.favicon32) { %>
<link rel="icon" sizes="32x32" typt="image/png" href="<%- url_for(config.favicon32) %>">
<% } %>
<% if (config.favicon16) { %>
<link rel="icon" sizes="16x16" typt="image/png" href="<%- url_for(config.favicon16) %>">
<% } %>
<% if (config.favicon180) { %>
<link rel="apple-touch-icon" sizes="180x180" typt="image/png" href="<%- url_for(config.favicon180) %>">
<% } %>
<% if (config.favicon192) { %>
<link rel="icon" sizes="192x192" typt="image/png" href="<%- url_for(config.favicon192) %>">
<% } %>
<% if (config.faviconmask) { %>
<link rel="mask-icon" href="<%- url_for(config.faviconmask) %>" color="#fafafa">
<% } %>

然后在博客配置文件中增加相应条目即可!

本文作者:ChrAlpha

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

本文链接: https://blog.ichr.me/post/add-logo-for-your-hexo-blog/

便签格

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。