我在使用yilia这个主题时用到的一些设置

获取Yilia主题

1
2
$ cd /hexo
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

nMNdc4.png

  • 其中/languages存放语言包,/layout存放主题布局文件,/source存放静态文件,如图片,图标等,/source-src存放外部引用资源

添加新页面

nMUhGT.png

  • 打开/hexo/theme/yilia/_config.yml文件,在menu处修改为:
1
2
3
4
menu:
主页: /
分类: /categories
标签: /tag
  • 新建页面
1
hexo new page categories
  • 其会在/hexo/source下生成一个categories文件夹,其下有index.md文件,修改categories/index.md:
1
2
3
4
5
6
7
---
title: 文章分类
date: 2019-07-10 18:52:02
type: "categories"
layout: "categories"
comments: false
---
  • 在hexo/theme/yilia/source/main.0cf68a.css文件中添加内容:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
category-all-page {
margin: 30px 40px 30px 40px;
position: relative;
min-height: 70vh;
}
.category-all-page h2 {
margin: 20px 0;
}
.category-all-page .category-all-title {
text-align: center;
}
.category-all-page .category-all {
margin-top: 20px;
}
.category-all-page .category-list {
margin: 0;
padding: 0;
list-style: none;
}
.category-all-page .category-list-item-list-item {
margin: 10px 15px;
}
.category-all-page .category-list-item-list-count {
color: $grey;
}
.category-all-page .category-list-item-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-item-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-item {
margin: 10px 10px;
}
.category-all-page .category-list-count {
color: $grey;
}
.category-all-page .category-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-child {
padding-left: 10px;
}
  • 新建/hexo/theme/yilia/layout/categories.ejs文件,输入:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">
<%= page.title %>
</h1>
</header>

<% if (site.categories.length){ %>
<div class="category-all-page">
<h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
<%- list_categories(site.categories, {
show_count: true,
class: 'category-list-item',
style: 'list',
depth: 2,
separator: ''
}) %>
</div>
<% } %>
</article>
  • 在写文章时加入:
1
2
3
4
5
6
---
title: hexo-yilia的配置
date: 2019-09-06 17:53:09
tags: [hexo,学习笔记]
categories: [hexo,学习笔记]
---

设置打赏

  • 将二维码图片放到/yilia/source/img中
  • 打开主题目录下的_config.yml文件,在reward_wording处修改
1
2
3
4
5
6
7
8
9
# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 1
# 打赏wording
reward_wording: '给作者点一杯奶茶吧'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay: /img/alipay.png
# 微信二维码图片地址
weixin: /img/weixinpay.png
  • 在需要的文章添加:
1
2
3
4
5
6
7
---
title: hexo-yilia的配置
date: 2019-09-06 17:53:09
tags: [hexo,学习笔记]
categories: [hexo,学习笔记]
reward: true
---

点击所有文章提示缺失模块

  • 确保 node 版本大于 6.2
  • 在博客根目录/hexo执行以下命令:npm install hexo-generator-json-content --save
  • 在 hexo博客根目录_config.yml 里添加配置,关掉 hexo s 之后执行 hexo g 重新生成:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true

配置智能菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '所有文章'
friends: false
aboutme: '关于我'

friends:
#HEXO: https://hexo.io/zh-cn/index.html
#LIVE2d: https://www.npmjs.com/package/hexo-helper-live2d
#Python: https://www.python.org/
#Bootstrap: https://www.bootcss.com/
#我的github: https://github.com/Justlovesmile
#我的微博: https://www.weibo.com/5252319712/profile?topnav=1&wvr=6

aboutme: 孜孜不倦<br>认真且怂<br>正在努力提升自己

设置主页展示截断

  • 在md文件中添加内容<!-- more -->
1
2
3
4
5
6
7
8
---
title: xxx
data: xxxx
tag: XXX
categories: xxx
---
简短介绍
<!-- more -->
  • 可在/yilia/_config.yml中修改:
1
2
3
4
# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'

添加live2d模型

nMBBuD.png

  • live2d的官网
  • 首先,安装npm包:
1
npm install --save hexo-helper-live2d
  • 所有模型列表如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
  • 然后下载模型
1
npm install live2d-widget-model-koharu
  • 然后在hexo的配置文件_config.yml中添加如下配置,详细配置可以参考官网文档:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 添加萌妹子效果
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-koharu
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
position: left
width: 112.5
height: 225
hOffset: 0
vOffset: -20

mobile:
show: true
scale: 0.5
react:
opacityDefault: 0.7
opacityOnHover: 0.2
  • 主要是配置model.use使用的模型名称,mobile是移动端效果

左侧导航栏设置背景图片

nMDbee.png

  • 找到/yilia/layout/_partial/left-col.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
33
34
35
36
37
38
39
40
41
<% var defaultBg = '#4d4d4d'; %>
<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>">
<% if (theme.leftimg){ %>
<img src="<%=theme.leftimg%>" alt="background.jpg" border="0"/>
<% } %>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="<%=theme.root%>" class="profilepic">
<img src="<%=theme.avatar%>" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="<%=theme.root%>"><%=theme.author%></a></h1>
</hgroup>
<% if (theme.subtitle){ %>
<p class="header-subtitle"><%=theme.subtitle%></p>
<%}%>

<nav class="header-menu">
<ul>
<% for (var i in theme.menu){ %>
<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<%}%>
</ul>
</nav>
<nav class="header-smart-menu">
<% for (var i in theme.smart_menu){ %>
<% if(theme.smart_menu[i]){ %>
<a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
<% } %>
<%}%>
</nav>
<nav class="header-nav">
<div class="social">
<% for (var i in theme.subnav){ %>
<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
<%}%>
</div>
</nav>
</header>
</div>
  • /yilia/_config.yml中添加:
leftimg: 图片的链接,不加引号即可

最后给大家推荐几个博主

一个主题可以添加或修改很多东西,但是逐步让它变成自己的东西是一门技术活。
由于可以加的东西很多,给大家推荐几个博主,他们写的文章给我提供了很大的帮助,希望也能帮到更多人