Next主题美化
1 设置主题风格
打开 themes/next/_config.yml
文件,搜索 scheme
关键字,将要启用的 scheme
前面注释的 # 去除即可。
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
2 设置菜单
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项的图标。
NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。
2.1 设置菜单项
打开 themes/next/_config.yml
文件,搜索 menu
关键字。
菜单项的设置格式是:item name: link
。其中 item name
是一个名称,这个名称并不直接显示在页面上,它将用于匹配图标以及翻译。除了 home
, archives
, /
后面都需要手动创建这个页面。
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
home: / || fa fa-home # 主页
# about: /about/ || fa fa-user # 关于
# tags: /tags/ || fa fa-tags # 标签
categories: /categories/ || fa fa-th # 分类
archives: /archives/ || fa fa-archive # 归档
# schedule: /schedule/ || fa fa-calendar
# sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat # 公益 404
以创建分类界面为例,在终端定位到 Hexo
站点目录下,使用 hexo new "categories"
新建一个页面:
$ cd your-hexo-site
$ hexo new page categories
此时在 source
文件夹下会生成 categories
文件夹,其中有一个 index.md
文件,修改其内容如下:
---
title: 分类
date: 2022-03-13 13:18:47
type: "categories"
comments: false
---
2.2 设置菜单项的显示文本
在 2.1 中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml ({language} 为你所使用的语言)。
以简体中文为例,打开 themes/next/languages/zh-CN.yml
文件,搜索 menu
关键字。
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
2.3 设置菜单项的图标
打开 themes/next/_config.yml
文件,搜索 menu_settings
关键字,将 icons
设置为 true
即为显示图标。
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false
效果:
3 设置分类页面
设置分类,在categories: 后添加分类。
---
title:
date: 2022-03-13 18:55:06
categories:
- 考研复试
- 机试
tags:
---
如此可实现多级分类,但显示界面层次感不强。
打开 themes/next/source/css/_common/components/pages/categories.styl
文件,修改以下:
.category-list-item {
margin: 5px 10px;
&::before {
content: "📍 ";
display: inline;
}
}
.category-list-child {
padding-left: 60px;
}
原始:
效果:
4 设置公益404页面
不用 hexo new "404"
,直接打开 themes/next/_config.yml
文件,搜索 menu
关键字,取消 commonweal
前的 # 注释。
在 source
文件夹下新建 404.html
文件,复制粘贴以下代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="https://ni256o.github.io"
homePageName="回到首页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>
其中 homePageUrl
改成自己主页地址。
5 隐藏底部“由 Hexo & NexT.Gemini 强力驱动”
打开 themes/next/layout/_partials/footer.swig
文件,注释 <!--
-->
相关代码:
<!-- {%- if theme.footer.powered %}
<div class="powered-by">
{%- set next_site = 'https://theme-next.org' %}
{%- if theme.scheme !== 'Gemini' %}
{%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
{%- endif %}
{{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
</div>
{%- endif %}
{%- if theme.add_this_id %}
<div class="addthis_inline_share_toolbox">
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
</div>
{%- endif %} -->
原始:
效果:
转载于:
https://zhuanlan.zhihu.com/p/30836436,
https://zhuanlan.zhihu.com/p/106060640,
https://blog.csdn.net/cxy35/article/details/104854753/,