Replica主题修改

最近修改了主题 Replica 的样式，新增了友链页面和关于页面，更新了阿里ui

原版本

新版本

新增了友链页面和关于

优化关联链接ui

新增页面

友链

1.在hexo的/source路径下建一个links文件夹，然后 新建一个 index.md 文件

1
2
3
4
---
layout: "links"
title: "links"
---

2.在\themes\replica\layout下新建模板文件links.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="container-lg">
  <%- partial('_partial/intro') %>

  <div class="blog-detail">
    <%- partial('_partial/navbar-secondary', {nav_selected: page.title}) %>

    <div class="body-secondary">
      <!-- <h2> 友情连接 <h2/> -->
      <h3><%=theme.links_title%>
      </h3>
      <ul class="recent-post clearfix">
        <% theme.links.forEach(function(links) { %>
        <li class="recent-post-item">
          <div class="clearfix">
            <h3><%- links.name %>
            </h3>
            <h3>
              <a class="post-title-link" href="<%- links.url %>" target="_blank" itemprop="url">
                <%- links.url %></a>
            </h3>

          </div>
          <%})%>
        </li>
      </ul>
    </div>

    <!-- 友链结束 -->

  </div>
</div>
</div>

3.修改一级导航navbar.ejs二级导航navbar-secondary.ejs

navbar.ejs添加一个标签

1
2
3
<% if(theme.menu.links){ %>
          <li class="desktop-only"><a href="<%= url_for('/links') %>" >Links</a></li>
          <% } %>

navbar-secondary.ejs增加加一个状态码

1
2
3
<%
var isOverview = ['tags', 'archives','links','about'].indexOf(nav_selected) === -1
%>

添加一个标签

1
2
<li class="<%= nav_selected === 'links' ? 'selected' : '' %>">
     <a href="<%= url_for('/links') %>">Links </a></li>

4.配置_config.yml

1
2
3
4
links_title: 友链
links: 
 - name: "```"
   url: "```"

配置主题的_config.yml

1
2
3
4
menu:
 archives: true
 tags: true
 links: true

5.hexo三连

1
hexo clean &&hexo g && hexo s -p 5000

关于

同上,相同的建立\source\about\index.md，

新建模板文件about.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container-lg">
  <%- partial('_partial/intro') %>

  <div class="blog-detail">
    <%- partial('_partial/navbar-secondary', {nav_selected: page.title}) %>

    <div class="body-secondary">
        <%- page.content %>
    </div>
  </div>
</div>
</div>

在_config.yml中开启

1
2
menu:
	 about: true

优化链接ui

使用了阿里的ui

1.登录官网 iconfont图标

2.把需要的图标添加到项目

3.下载文件

文件目录

参考demo_index.htmlx效果

4.我用了Symbol 引用

引入项目下面生成的 symbol 代码：

1
<script src="./iconfont.js"></script>

加入通用 CSS 代码（引入一次就行）：

1
2
3
4
5
6
7
8
9
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

挑选相应图标并获取类名，应用于页面：

1
2
3
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>