1 前言
该篇旨在 Hexo 的高级设置，博客搭建请查看Hexo + GitHub 搭建个人博客
2 基本使用
2.1 跳转
2.1.1 文章内跳转
锚点 [文章内跳转](#目标位置)
目标位置 <span id="目标位置"></span>
2.1.2 不同文章跳转
{% post_link 要跳转文章md文件名 %}
例：
{% post_link hexo %}
2.2 新增文章模板
2.2.1 在 scaffolds 文件夹下新增 post.md
---
title: {{ title }}
categories: 技术
date: {{ date }}
tags:
---
[1. 前言](#前言)
<span id="前言"></span>
## 1 前言
2.2.2 快速生成模板MD文件
执行hexo new 文件名生成一个md文件
3 网站图标设置
3.1 判断主题是否已提供入口
查看主题对应文件夹下的 head.ejs 文件是否有 <link rel="icon" href="" /> 标签，有该标签则已提供入口
2022071301.png
3.2 主题已提供入口
3.2.1 查看入口标识
2022071302.png
3.2.2 修改主题站点配置文件
注意，是修改
主题站点配置文件，而不是根目录下的站点配置文件
支持本地路径，也支持远程路径
2022071303.png
3.3 主题未提供入口
3.3.1 制作图标
使用比特虫来制作图标 ，也可以直接使用图片
2022071304.png
3.3.2 保存图标
将 ico 文件或图片放置到主题对应的的 sources/images 文件夹下
2022071305.png
3.3.3 修改 head.ejs 文件
<link rel="icon" href="<%= url_for(theme.favicon) %>" />
3.3.4 修改主题站点配置文件
favicon: '/images/favicon.ico'
2022071306.png
4 文章末尾打赏功能
4.1 主题自带打赏功能
4.1.1 准备收款码
将微信、支付宝收款码图片放到主题文件夹下的 images 文件夹里，可以使用草料二维码进行美化
2022071307.png
4.1.2 修改主题站点配置文件
#查看主题文档，确定主题是否支持打赏功能，以及打赏对应配置
#以 NexT 主题为例
reward:
enable: true
comment: 您的鼓励，是我最大的动力！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
4.2 自定义打赏功能
4.2.1 准备收款码
操作同上
4.2.2 新增 reward.ejs 文件
2022071308.png
在主题文件夹下新增 reward.ejs 文件，并将以下内容复制到新增文件中
<div class="reward-container">
<% if(theme.reward.pay_links) { %>
<span class="reward-button"><%=theme.reward.title%></span>
<div><%=theme.reward.message%></div>
<div class="reward-pay">
<% for(const item of theme.reward.pay_links) { %>
<div style="margin: 10px">
<img src="<%= url_for(item.link) %>" alt="<%= item.type %>" />
</div>
<% } %>
</div>
<% } %>
</div>
<script>
const rewardButtonDom = document.getElementsByClassName('reward-button')[0]
const rewardPayDom = document.getElementsByClassName('reward-pay')[0]
rewardButtonDom.addEventListener('click', function () {
rewardPayDom.style.display =
rewardPayDom.style.display === 'flex' ? 'none' : 'flex'
})
</script>
4.2.3 新增样式文件
在主题文件夹下新增 _partial 文件夹，并在新增文件夹里新建 index.styl 、 reward.styl 文件
2022071309.png
将以下内容复制到 reward.styl
.reward-container {
margin: 30px 0 20px;
text-align: center;
.reward-button {
display: inline-block;
color: #fff;
background-color: #ec7259;
font-size: 16px;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
user-select: none;
}
.reward-pay {
display: none;
flex-wrap: wrap;
justify-content: center;
position: relative;
img {
max-width: 150px;
}
}
}
将以下内容复制到 index.styl
@import "reward"
4.2.4 注册样式文件
在主题文件夹下的 css 文件夹里，找到全局注册样式文件，可能是 main.styl ，也可能是 index.styl ，需要自行判断
注册 _partial 样式文件 @import "_partial/index"
2022071310.png
4.2.5 在文章底部插入打赏组件
2022071311.png
找到项目显示博客文章所对应的 ejs 文件，例如本博客所用主题对应的 ejs 文件是 post.ejs
小窍门：先确定打赏组件在文章中的显示位置，然后复制位置附近的文字全局搜索，快速确定项目显示博客文章所对应的 ejs 文件
将以下内容插入到文件的合适位置
<% if(theme.reward.enable) { %>
<%- partial('_partial/reward') %>
<% } %>
4.2.6 修改主题站点配置文件
将以下内容复制到主题站点配置文件
reward:
enable: true
title: 赞赏支持
message: 您的鼓励，是我最大的动力！
pay_links:
- { type: 微信, link: /images/wechatpay.png }
- { type: 支付宝, link: /images/alipay.png }
网友评论