Indigo主题是一款HEXO的基于material设计的主题,个人比较喜欢material设计的主题,由于之前硬盘损坏且没有备份原主题material,于是换上了Indigo,但是没有友链功能,抽了点时间加上了。

新建文件

首先,在\hexo\blog\themes\indigo\layout下新建links.ejslink.ejs

代码如下

links.ejs

<%- partial('_partial/header', {
title: locals.title || theme.links_title,
hdClass: 'links-header'
}) %>
<div class="container body-wrap fade">
<% if (theme.links && theme.links.length) { %>
<h3 class="archive-separator">
<%=theme.links_title%>
</h3>
<div class="waterfall">
<% theme.links.forEach(function(links) { %>
<div class="waterfall-item">
<article class="article-card archive-article">
<h3 class="post-title" itemprop="name">
<a class="post-title-link" href="<%- links.url %>" target="_blank" itemprop="url">
<%- links.name %></a>
</h3>
</article>
</div>
<%})%>
</div>
<% }%>
<%- partial('_partial/paginator') %>
</div>

如图

link.ejs

<%- partial('links', {
title: theme.links_title + ': '+ page.tag
}) %>

如图

更改CSS

然后在cmd/shell中执行hexo new page 'Links',然后到\hexo\blog\source\Links更改index.md为如下内容

layout: links
comments: false

---

接着在\hexo\blog\themes\indigo\source\css\_partialheader.less搜索

.tags-header,
.categories-header

更改为

.tags-header,
.categories-header,
.links-header

如图

config.yml设置

主题config.yml中设置menu项,去除link前面的注释

link:
text: 测试
url: /Links

如图

主题config.yml中设置# 页面标题项,添加

links_title: 友情链接

如图

最后,在主题config.yml最后添加links项目,格式如下

#友链
#links:
# - name: 名称
# - url: 链接
links:
- name: "名称"
url: "链接"
- name: "名称"
url: "链接"
- name: "名称"
url: "链接"
- name: "名称"
url: "链接"

如图

最终修改的文件如下

然后cmd/shell执行hexo g重新生成页面

预览截图
预览截图