文章目录
- 获取Yilia主题
- 添加新页面
- 设置打赏
- 点击所有文章提示缺失模块
- 配置智能菜单
- 设置主页展示截断
- 添加live2d模型
- 左侧导航栏设置背景图片
- 最后给大家推荐几个博主
使用yilia这个主题时用到的一些设置
我的博客:https://blog.justlovesmile.top
获取Yilia主题
$ cd /hexo
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
- 其中/languages存放语言包，/layout存放主题布局文件，/source存放静态文件，如图片，图标等，/source-src存放外部引用资源
添加新页面
- 打开
/hexo/theme/yilia/_config.yml
menu:
主页: /
分类: /categories
标签: /tag
- 新建页面
hexo new page categories
- 其会在/hexo/source下生成一个categories文件夹，其下有index.md文件，修改categories/index.md：
---
title: 文章分类
date: 2019-07-10 18:52:02
type: "categories"
layout: "categories"
comments: false
---
- 在hexo/theme/yilia/source/main.0cf68a.css文件中添加内容：
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文件，输入：
<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>共计 <%= site.categories.length %> 个分类</h2>
<%- list_categories(site.categories, {
show_count: true,
class: 'category-list-item',
style: 'list',
depth: 2,
separator: ''
}) %>
</div>
<% } %>
</article>
- 在写文章时加入：
---
title: hexo-yilia的配置
date: 2019-09-06 17:53:09
tags: [hexo,学习笔记]
categories: [hexo,学习笔记]
---
设置打赏
- 将二维码图片放到/yilia/source/img中
- 打开主题目录下的_config.yml文件，在reward_wording处修改
# 打赏
# 打赏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
- 在需要的文章添加：
---
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
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
配置智能菜单
# 智能菜单
# 如不需要，将该对应项置为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 -->
---
title: xxx
data: xxxx
tag: XXX
categories: xxx
---
简短介绍
<!-- more -->
- 可在
/yilia/_config.yml
# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
添加live2d模型
- live2d的官网
- 首先，安装npm包：
npm install --save hexo-helper-live2d
- 所有模型列表如下：
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
- 然后下载模型
npm install live2d-widget-model-koharu
- 然后在hexo的配置文件_config.yml中添加如下配置，详细配置可以参考官网文档：
# 添加萌妹子效果
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是移动端效果
左侧导航栏设置背景图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7LxCCsM-1593406364657)(https://s2.ax1x.com/2019/09/06/nMDbee.png)]
- 找到
/yilia/layout/_partial/left-col.ejs
<% 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" />
<% } %>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="<%=theme.root%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="profilepic">
<img src="<%=theme.avatar%>" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="<%=theme.root%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><%=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]) %>" target="_blank" rel="external nofollow" ><%= 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)" target="_blank" rel="external nofollow" ><%= 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]) %>" target="_blank" rel="external nofollow" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
<%}%>
</div>
</nav>
</header>
</div>
- 在
/yilia/_config.yml
leftimg: 图片的链接，不加引号即可
最后给大家推荐几个博主
一个主题可以添加或修改很多东西，但是逐步让它变成自己的东西是一门技术活。
由于可以加的东西很多，给大家推荐几个博主，他们写的文章给我提供了很大的帮助，希望也能帮到更多人
- 小丁的个人博客
- Tigerliu的博客
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)