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>