Hexo主题 | Hexo-yilia的配置

Justlovesmile

发布于 2021-12-13 21:05:16

1K0

发布于 2021-12-13 21:05:16

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

获取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处修改为：

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>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</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文件中添加内容：

---
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是移动端效果

左侧导航栏设置背景图片

找到/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" 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: 图片的链接，不加引号即可

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-09-06，如有侵权请联系 cloudcommunity@tencent.com 删除

hexo

npm

腾讯云开发者社区

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

hexo

npm

腾讯云开发者社区

登录后参与评论

0 条评论

热度

Hexo主题 | Hexo-yilia的配置

Hexo主题 | Hexo-yilia的配置

获取Yilia主题

添加新页面

设置打赏

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

配置智能菜单

设置主页展示截断

添加live2d模型

左侧导航栏设置背景图片

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐