Chap.2 个性化修改Redefine主题

两个配置文件

TorynBlog/themes/xxx/_config.yml 主题配置

• 博客的title、author关键字，主题配置覆盖全局配置

TorynBlog/_config.yml 全局配置

• language的设置只能在全局配置中设置

Redefine主题相关

• 这个主题挺好看，可能会用比较久
• 点进博客网站后看到的内容
  均在themes/xxx/_config.yml下修改：
  1. 最上面
     info块的title:Toryn’s Blog
  2. 欢迎界面
     大字：home_banner块中的title:hi,I’m Toryn
     字幕：home_banner块中的subtitle:text[“xxx”,”xxx”]
     社交软件链接:home_banner块中
     • social_links:
       • enable:改为true
       • github:后加上github主页的链接
       • 也可以添加其他社交软件
         themes/hexo-theme-redefine/source/fontawesome目录下
         fontawesome.min.css文件 //fontawesome是图标的意思
         在文件中搜”bilibili”，能搜到就说明这个社交软件可以用
       • 添加微信QRCode
         把微信二维码作为jpeg放到theme/source/images下
         然后在social_links-qrs-weixin后面加上图片路径
  3. 网站图标
  • 最上面的图标
    在theme/source/images下加入toryn-favicon.png文件
    然后在themes/xxx/_config.yml的favicon关键字中加上
    /images/toryn-favicon.png
    //favicon就是网页图片的意思
  • logo
    同理在theme/xxx/source/images下添加图片
    在themes/xxx/_config.yml的logo关键字后加上图片路径
  • 头像
    同理在theme/xxx/source/images下添加图片
    在themes/xxx/_config.yml的avatar关键字后加上图片路径
  4. 导航栏
  • 一开始只有home
    把archive的注释符解除就出现archive
  • 标签

    Tags:
        path:/tags
        icon:fa-regular fa-tags

    然后hexo g之后点击tags不能成功跳转到标签页面
    发现是hexo g之后的tags目录下缺少了index.html文件
    解决方法：
    • 在博客的source目录mkdir tags
      在/tags下hexo new page “tags”
      然后会生成一个index.md文件
      这个文件的内容修改为:

      ---
      title: tags
      type: tags
      layout: tags  //要和theme/xxx/layout/tags.ejs文件对应
      ---

      然后修改全局配置中：
    • tag_dir:后为tags
      重新hexo g
      就可以进标签页了
  5. 文章添加头图/封面
     在文章.md前面加上
     thumbnail: 图片路径
     就可以

修改home背景图片

• 修改图片：
  把图片拖到/source/images目录下
  在theme/_comfig.yml文件中修改

  home_banner:
      image:
          light:图片链接
          dark:图片链接

  并且把artilces-placeholder改成light的图片链接

• 修改字体颜色：
  由于更换图片之后，原来导航栏的黑色字体会和背景融合
  所以要改成白色字体

  • 在theme/source/css/common/variavles.styl中找到了
    light模式下的字体颜色#373D3F
    dark模式下的字体颜色是#bebec6
  • 再在theme/source/css/layout/_partials/navbar.styl文件中
    修改h1属性
    color var(–first-text-color)为color #bebec6
    修改narbar-item属性
    color var(–first-text-color)为color #bebec6
    是在太难改了，算了