干货时刻
hexo
个人主页系列教程:本文主要next
主题的文章的相关优化工作。
增加标签和分类页面
我们按照路径themes/next/_config.yml
打开主题配置文件,找到menu
字段,更改为:
menu:
home: / || fa fa-home
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
tags
为标签页界面,以标签为分类基准展示整个站点的文章;categories
为归类页界面,以类别为分类基准展示文章。
例如tags: /tags/ || fa fa-tags
中,/tags/
为页面的前端路由。fa
为图标的标签属性,用于统一化样式。fa-tags
为图标的名称,next
主题默认使用的图标库是 Font Awesome,如果想更换图标,只需要到该网站记下对应图标的名称,然后在配置文件中替换即可。
OK
,设置好后进入终端,键入:
hexo new page "categories"
hexo new page "tags"
此时,我们已经新建了两个页面,在themes/sources
文件夹下可以看到这两个同名文件夹,每个文件夹下都有一个index.md
文件。我们分别打开,进行修改:
# tags/index.md
---
title: 我是选择标签的页面
date: 2022-04-14 10:58:17
type: "tags" # 设置页面类型
comments: false
---
# categories/index.md
---
title: 我是选择类别的页面
date: 2022-04-14 12:13:13
type: "categories"
comments: false
---
给文章添加标签和分类
上节说到,我们已经增加了标签和分类两个页面,接下来,我们就要给文章添加标签和分类。
打开一篇文章,我们可以看到开头已经有yaml
语法的框架了,不知道或者想回顾yaml
语法的话移步:开发者必须要掌握的 YAML 知识点。将其修改为:
---
title: 张三的自我救赎
date: 2022-04-24 10:25:34
categories:
- 随笔
tags:
- 张三
- 笔记
keywords:
- 张三
- 救赎
description: "这是张三的自我救赎。"
---
title
是文章的标题;date
是文章的创建时间;categories
是一个数组,[随笔]
表示该文章的类别是随笔
,[随笔, 子随笔]
表示该文章的类别是随笔
下的子类别子随笔
;tags
数组中是要添加的标签;keywords
数组中是文章关键词;description
是文章的描述,在主页中会显示成摘要。接着走一波hexo clean; hexo g; hexo s
就可以在tags
和categories
页面找到这篇文章啦。
调整文章间距和阴影效果
进入themes/next/source/css/_common/post/post.styl
路径,找到.use-motion
选择器,在if(hexo-config('motion.transition.post_block'))
后面进行修改,添加上.post-block
:
.use-motion {
if (hexo-config('motion.transition.post_block')) {
.post-block, .pagination, .comments {
opacity: 0;
}
.post-block {
margin-top: 0px;
margin-bottom: 20px;
padding: 25px;
background:rgba(255,255,255,0.9) none repeat scroll !important;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
}
修改文章底部标签样式
进入路径themes/next/_config.yml
,修改主题配置文件的tag_icon
字段:
tag_icon: true
这将用图标,替换标签的#
。
修改文章超链接样式
进入路径themes/next/source/css/_common/components/post/post.styl
,找到.post-body p a
选择器,将其替换为:
.post-body p a {
color: #330099;
border-bottom: none;
border-bottom: 1px solid #330099;
&:hover {
color: #ff8c00;
border-bottom: none;
border-bottom: 1px solid #ff8c00;
}
}
代码块高亮
进入路径themes/next/_config.yml
,修改主题配置文件的codeblock
字段:
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: false
# Available values: default | flat | mac
style: mac
codeblock
字段会更改代码块的主题样式,感兴趣的同学不妨都尝试一下,找到自己喜欢的风格。
代码高亮
进入路径themes/next/_config.yml
,修改主题配置文件的custom_file_path
字段,将style
的注释取消:
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
style: source/_data/styles.styl
在blog/source
下新建一个_data
文件夹,文件夹中新建一个styles.styl
文件(不用VScode
的同学,可以新建一个styles.txt
,再更改它的后缀)。在上面编辑以下代码:
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
.highlight,
pre {
margin: 5px 0;
padding: 5px;
}
.highlight,
code,
pre {
border: 1px solid #d6d6d6;
}
图片居中预览
进入路径themes/next/_config.yml
,修改主题配置文件的mediumzoom
字段:
mediumzoom: true
注意,fancybox
和mediumzoom
是冲突的,所以保存fancybox: false
就好。
启用文章目录
进入路径themes/next/_config.yml
,修改主题配置文件的toc
字段:
toc:
enable: true
# Automatically add list number to toc.
number: false
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: true
# Maximum heading depth of generated toc.
max_depth: 6
添加本文结束标记
进入路径themes/next/layout/_macro
,新建一个名为passage-end-tag.swig
的文件,键入以下代码:
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">
~~~~~~~~~~~~~~ 本文结束 <i class="fa fa-paw"></i> 感谢您的阅读
~~~~~~~~~~~~~~
</div>
{% endif %}
</div>
然后进入路径themes/next/layout/_macro/post.swig
,找到{### END POST BODY} ###
。在它的后面键入以下代码:
{% if not is_index and theme.passage_end_tag.enabled %}
<div>{% include 'passage-end-tag.swig' %}</div>
{% endif %}
如下图所示:
进入路径themes/next/_config.yml
,在主题配置文件的末尾添加passage_end_tag
字段:
# 文章末尾添加结束标记
passage_end_tag:
enabled: true
文章末尾添加版权声明
进入路径themes/next/_config.yml
,修改主题配置文件的creative_commons
字段:
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language: deed.zh
开启文章打赏
进入路径themes/next/_config.yml
,修改主题配置文件的reward_settings、reward
字段:
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
comment: 在线要饭 ~~
reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
然后,进入themes/next/source/images
路径,将你的收款二维码放在里面。
结束语
想要学习更多优质内容的同学,关注收藏一下作者的个人主页:东曜说 ~~