hexo主题kaze配置详细解析
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 }
#------------------------
# 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://github.com/walinejs/waline
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：后面紧跟链接
进入阿里iconfont创建图标项目
- 阿里iconfont官网：https://www.iconfont.cn/
- 搜索想要的图标
- 选中图标，加入购物车
- 点击购物车，将图标加入项目，如果没有项目就随便建一个项目
- 在图标上方有：Unicode、font class、symbol，点击【Font class】
- 在点击【查看在线链接】，如果提示需要更新代码，点击更新就可以看见代码
- 点击复制代码
修改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：后面紧跟链接
修改主题左上角title名字和logo
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>
浙公网安备 33010602011771号