hexo博客kaze主题配置详细解析

kaze主题官方文档:https://demo.theme-kaze.top/document/

  • 本解析建议结合主题官方文档进行配置。

主题配置文件解析

#------------------------
# Header config
title: skillfans-博客 # 网站标题
author: skillfans # 作者名称
logo_img: /img/200x200.png # 网站logo,图片放文件路径:kaze/source/img put the logo on the ${blog_path}/source/img/${picname}.png or use urls
author_img: /img/200x200.png #作者头像
author_description: 数码科技/技术迷,科技让生活更有趣 #个性签名
#------------------------
# Navbar config
# 博客导航栏
#------------------------
menus:
home: /
tags: /tags
categories: /categories
friends: /links
archive: /archives
# artitalk: /shuoshuo # You can uncomment to add this route


# 社交链接
# icon:需遵循主题文档中的名称,link:图标链接
about:
description: description
social_links:
- { icon: icon-sina, link: https://weibo.com/u/7548933742}
- { icon: icon-github, link: https://github.com/skillfans}
- { icon: icon-bilibili, link: https://space.bilibili.com/435408933?spm_id_from=333.1007.0.0}
# - { icon: icon, link: your link }

icon

#------------------------
# Links
# 友链
#------------------------
links:
GitHub: #链接名称
url: https://github.com #友链链接
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10948773368%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650988107&t=c260fe871ab0b51cd9c4a3825f4d7a04 #友链图标链接
Gitee:
url: https://gitee.com
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgit.oschina.net%2Fuploads%2F85%2F1850385_gitee_gitee.png%3F1522479308&refer=http%3A%2F%2Fgit.oschina.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650988240&t=ceb6e9d605bfd0110a1cdf0d4cff0c68
菜鸟教程:
url: https://www.runoob.com/
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181210%2F7b8cba5638284671ac04e985859ed40c.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650987186&t=7beeba1461277306772c2d1d95f6fe54
W3School在线教程:
url: https://www.w3school.com.cn/
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.b114.net%2Fzb_users%2Fupload%2F2020%2F04%2F202004121586620870546658.jpg&refer=http%3A%2F%2Fwww.b114.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651761350&t=bf3a5aa7ab66db3d9861d14d3e77f64a
Linux命令大全(手册):
url: https://www.linuxcool.com/
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200221%2Fc453ad318720401c94b5ff3ff402490a.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651982121&t=378fea255e8311548efc6d53219b7ab5

# name:
# url: https://example.com
# avatar:
# description:
#------------------------
# tip: if you want to use QQ avatar without giving away your QQ number,
# you can use this api to get an encrypted url:
# https://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=${yourQQNumber}
# and use the encrypted url in the json
#------------------------

#------------------------
# Post
# 目录
#------------------------
toc:
showListNumber: true #是否生成编号
maxDepth: 6 #目录最大深度
minDepth: 1 #目录最小深度

# 版权说明
copyright:
enable: false
writer: skillfans # 作者 :if writer is empty we will use config.author as writer
declare: 本博客所有文章除特别声明外,均采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 协议</a>。转载请注明出处!
style: warning # 声明样式:the style uses note warning | danger | primary | info | success

# 搜索功能
search:
enable: true
path: search.json
field: all #搜索范围:posts,pages,all
searchContent: true 搜索文件包含正文内容

# og meta元素: open graph 可以帮助各类支持该技术的社交媒体上显示网页卡片
og:
enable: true
title: true
url: true
image: true
description: true
article: true
#------------------------
# Footer
#------------------------
footer:
copyYear: 2022
# 如果showPoweredBy为真,则页脚上将显示“Powered by Hexo”
showPoweredBy: true
# 如果showThemeName是真的,那么页脚上会出现“Theme-Kaze”
showThemeName: true
#------------------------
# Record config
# please put the gov image in ${yoursite}/img/beian.png
# 网页备案
RecordInfo: "" # your Record info such as '某ICP备xxx号'
govRecordInfo: "" # your gov record info such as '某公网安备xxx号'
govRecordUrl: "" # your gov record url 公网备案信息地址
#------------------------
# pv / uv statistics config
# 网站统计
#------------------------
statistics:
enable: false
type: busuanzi # now version only supports busuanzi
pv:
enable: true
style: 本站总访问量{}次 # the style will be shown as $1{pv}$2
uv:
enable: true
style: 本站总访客数{}次 # the style will be shown as $1{uv}$2

# 文章头图
# ------------------------------------------
# title: Hello World
# banner_img: https://www.tomyres.com/static/images/logo/res_logo_1.png #文章头图链接
# category: #文章分类
# tag: #文章标签
# excerpt: 文章简介
# ------------------------------------------
widgets:
showWidgetsMobiles: "flex" # none关闭,flex开启


#------------------------
# animation config
# 主题动画效果
#------------------------
# if scrollUpAnimation is true, there will be scroll-up animation.
scrollUpAnimation: true

#------------------------
# comment config
# 评论系统
#------------------------
comment:
enable: true
type: valine # valine | gitalk | livere | disqus | we recommend valine | waline
# gitalk config details can see in https://github.com/gitalk/gitalk/blob/master/readme-cn.md
# waline config details can see in https://waline.js.org
valine:
appId: YsODMf59rvpOny9MQGPIc2xi-gzGzoHsz
appKey: MU5o9UhV1YCJlrdN5HRP2agv
placeholder: Just go go
path: window.location.pathname
avatar: mp
meta: ["nick", "mail"]
pageSize: 10
visitor: false
highlight: true
recordIP: false
serverURLs: # leancloud国内自定义域名
emojiCDN:
emojiMaps: null
enableQQ: false
requiredFields: []
gitalk:
clientID:
clientSecret:
repo:
owner:
admin:
id: location.href
distractionFreeMode: false
# en | zh-CN | zh-TW
language: navigator.language || navigator.userLanguage
labels: ['Gitalk']
perPage: 10
livere:
uid:
waline:
serverURL:
placeholder: Just go go
path: window.location.pathname
avatar: mp
meta: ["nick", "mail", "link"]
pageSize: 10
visitor: false
highlight: true
emojiCDN:
emojiMaps: null
enableQQ: false
requiredFields: []
anonymous: true

#------------------------
# latex config 渲染效果
#------------------------
# choose true to use latex by mathjax or katex
# warning: latex rendering will put lots of loading burden on page loading
latex:
enable: false
engine: mathjax # mathjax | katex
# for better rendering effect, when you choose mathjax, you can use it directly but you will lose some effect
# so you can use hexo-renderer-kramed
# when you choose katex, you must use hexo-renderer-markdown-it-plus or other render engine
global: false
# when you choose false, you can use latex by `latex: true` in post front-matter

#------------------------
# lazyload config
# 懒加载
#------------------------
lazyload:
enable: true
loadingImg: ##设置加载图 可以在post中设置banner_img_set 进行覆盖实现缩略图效果

#------------------------
# plugins config 代码高亮配置
#------------------------
lightbox:
enable: true
# If your hexo version is below 5.0.0, please upgrade first to use this config
# we support eight highlight themes, you can go to prism website (https://prismjs.com) for more information
# theme: default | coy | dark | funky | okaidia | solarizedlight | tomorrow | twilight #代码高亮主题8大样式
prism:
theme: tomorrow
darkTheme: tomorrow #暗夜模式代码高亮主题


# show the number of words in posts
# 字数统计
wordcount:
enable: true


# Analytics config
# 数据分析
analytics:
enable: false
type: google # google
google:
id: # you can see more information in https://analytics.google.com/
# Doc:https://artitalk.js.org/
artitalk:
enable: false
appId:
appKey:


#------------------------
# minify config
# css minify uses autoprefixer and clean-css
# javascript minify uses uglify-es
# html minify uses html-minifier
# 文件压缩 /开启后会影响 hexo g的性能
#------------------------
minify:
enable: false
css: true
js: true
html: true


#------------------------
# theme design config
# 主题颜色
#------------------------
# the config of theme colors and styles
# you can modify these presets to design different styles
color:
text-color: "#3c4858"
text-strong-color: "#2f3d4e"
text-light-color: "#60656a"
divider-color: "#e6e8ee"
title-color: "#475b6d"
link-color: "#3273dc"
link-hover-color: "#6596e5"
info-text-color: "#60656a"
widget-background-color: "#fff"
body-background-color: "#f2f5f8"
border-color: "#e1e4e9"
pre-color: "#2d2d2d"
code-color: "#50687c"
code-background-color: "#e9eaf0"


# 字号与字体
font:
font-size: 16px # global font-size
font-family: '-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif' # global font-family



#------------------------
# cdn config
# 第三方资源索引
#------------------------
cdn:
mathjax: //cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-svg.js
katex: //cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css
gitalk:
css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
valine: //unpkg.com/valine/dist/Valine.min.js
livere: //cdn-city.livere.com/js/embed.dist.js
waline: //cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
baguetteBox: /js/lib/lightbox
lozad: /js/lib/lozad.min.js
prism: /js/lib/prism/
busuanzi: /js/lib/busuanzi.min.js
artitalk: https://cdn.jsdelivr.net/npm/artitalk
md5: /js/lib/md5.min.js

自定义社交链接

主题自带的icon图标

# 社交链接
about:
description: description
social_links:
- { icon: icon-sina, link: https://weibo.com/u/7548933742}
- { icon: icon-github, link: https://github.com/skillfans}
- { icon: icon-bilibili, link: https://space.bilibili.com/435408933?spm_id_from=333.1007.0.0}
- { icon: icon-QQ-circle-fill, link: https://qun.qq.com/index.html#click}
# - { icon: icon, link: your link }
# icon-github是主题给定的名称不能修改
# link:后面紧跟链接

主题icon图标

进入阿里iconfont创建图标项目

  • 阿里iconfont官网:https://www.iconfont.cn/
  • 搜索想要的图标
  • 选中图标,加入购物车
  • 20220412112808
  • 点击购物车,将图标加入项目,如果没有项目就随便建一个项目
  • 20220412112933
  • 在图标上方有:Unicode、font class、symbol,点击【Font class】
  • 在点击【查看在线链接】,如果提示需要更新代码,点击更新就可以看见代码
  • 点击复制代码
    20220412113444

修改kaze主题head.ejs

  • 文件位置:blog\themes\kaze\layout_partial\head.ejs
  • 添加代码:
    <%# social icon %>  #在此代码下面添加下面代码
    <%- ex_css('阿里iconfont复制的代码') %>

现在在回到kaze主题配置文件_config.yml添加自定义图标

# 社交链接
about:
description: description
social_links:
- { icon: icon-sina, link: https://weibo.com/u/7548933742}
- { icon: icon-github, link: https://github.com/skillfans}
- { icon: icon-bilibili, link: https://space.bilibili.com/435408933?spm_id_from=333.1007.0.0}
- { icon: icon-QQ-circle-fill, link: https://qun.qq.com/index.html#click}
# - { icon: icon, link: your link }
# icon-github是主题给定的名称不能修改
# link:后面紧跟链接

ejs文件路径

themes/kaze/layout/_partial/nav.ejs

修改ejs代码

  • 源代码:
<div class="navbar-logo">
<span class="navbar-logo-main">
<% if(theme.logo_img || theme.author_img ) { %>
<img
class="navbar-logo-img"
width="32"
height="32"
src="<%- url_for(theme.logo_img) %>"
alt="blog logo">
<% } %>
<span class="navbar-logo-dsc"><%- theme.title || config.title %></span>
</span>
  • 修改后代码:
<div class="navbar-logo">
<span class="navbar-logo-main">
<% if(theme.logo_img || theme.author_img ) { %>
<img
class="navbar-logo-img"
width="32"
height="32"
src="<%- url_for(theme.logo_img) %>"
alt="blog logo">
<% } %>
<span class="navbar-logo-dsc"><% config.title %></span>
</span>
</div>