对yilia主题的改造

2019-10-21

划了快两年水没更新，这次索性把Hexo默认的landscape主题改成了yilia主题。yilia主题是Hexo中一款较为好看的主题，但我自己还是觉得有点别扭，于是自己动手对其进行了些修改。

修改 themes/yilia/_config.yml

1
2
3

menu:
  主页: /
  归档: /archives/index.html

2. 修复失效的微信分享二维码

在themes/yilia/layout/_partial/post/share.ejs文件中

把第 49 行中的

1	//pan.baidu.com/share/qrcode?url=

修改为：

1	//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

在 themes/yilia/source/main.0cf68a.css 文件中

修改smart-menu

.left-col #header .header-smart-menu {
    font-size: 12px;
    margin-bottom: 20px
    }

调整font-size，我调整到了15px。

修改menu

.left-col #header .header-menu li a {
    font-size:14px;
    min-width:300px
    }

调整font-size，我调整到了20px。

4. 修改头像上方颜色和wrap的渐变色

修改 themes/yilia/_config.yml
找到样式定制并修改如下

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#003153'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#feeeed,#9b95c9)'

5. 修改 aboutme-wrap search-tag-wording 的颜色

因为背景颜色较淡，把部分字体颜色加深，如侧栏标题，友链，关于我部分

在 themes/yilia/source/main.0cf68a.css 文件中。

寻找search-tag-wording，设置颜色为#4d4d4d。
寻找aboutme-wrap，设置颜色为#4d4d4d。

把这一段

.tools-col .tools-section .search-ul .search-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    color: #fffff8;
    text-shadow: 1px 1px rgba(77,77,77,.25)
}

颜色改为#4d4d4d

6. 修改categories的路径

原主题中的代码有点问题，导致categories的路径结尾总是多出一个 /

在themes/yilia/layout/_partial/post/category.ejs中，把第7行

1	<a href="<%= config.root %><%= tag.path %>/" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%-tag.name%></a>

改为

1	<a href="<%= config.root %><%= tag.path %>" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%-tag.name%></a>

7. 为yilia主题增加gitalk评论

修改 themes/yilia/_config.yml，在其中添加以下代码，并填上必要信息

#6 Gitalk
gitalk:
  enable: true
  client_id: '' # 申请获得的id
  client_secret: '' # 申请获得的secret
  repo: '' # 仓库名称
  owner: '' # 自己的用户名
  admin: '' # 自己的用户名
  pager_direction: 'first' #排序方式是从旧到新（first）还是从新到旧（last）
  distractionFreeMode: true

新建文件/themes/yilia/layout/_partial/post/gitalk.ejs

<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">

if(<%=theme.gitalk.enable%>){
        var gitalk = new Gitalk({
        clientID: '<%=theme.gitalk.Client_id%>',
        clientSecret: '<%=theme.gitalk.Client_secret%>',
        repo: '<%=theme.gitalk.repo%>',
        owner: '<%=theme.gitalk.owner%>',
        admin: ['<%=theme.gitalk.admin%>'],
        id: '<%= page.date %>',
        pagerDirection: '<%=theme.gitalk.pager_direction%>',
        distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>

新建文件 /themes/yilia/layout/_partial/article.ejs

<% if(theme.gitalk.enable){ %>
  <%- partial('post/gitalk', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
  }) %>
<% } %>

8. 解决代码块行数因为某行太长而对不齐

在 themes/yilia/source/main.0cf68a.css 文件中寻找并删除

1	white-space:pre-wrap;

9. 取消失效的badjs

作者原本想用badjs上报错误，但现在这个端口失效了。保留它会使得加载页面时间超过1s。

在 themes/yilia/source/main.0cf68a.js 文件中寻找BJ_REPORT，并把所有的 id:1 改成 id:0