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
中开启
优化链接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>
|