hexo主题美化+常用配置

发表于 更新于 分类于 阅读次数：
hexo常用配置记录
hexo使用next主题后的美化配置

一、前言

重新捡起blog，想好好记录学习和生活。
以前配置的主题因为有太多图片，确实不够轻便，加之已经不再更新，重新选择了一个主题“next”，star数遥遥领先并且持续更新。跟着大神准没错~

1.1 命名

在Hexo中有2份主要的配置文件，其名称都是_config.yml。 其中，一份位于博客根目录下，主要包含 Hexo 本身的配置；另一份位于themes/next/目录下，用于配置主题相关的选项。

  • 站点配置文件：博客根目录下_config.yml
  • 主题配置文件：themes/next/目录下_config.yml 即 _config.next.yml

    二、主题安装

  • 下载next主题
    安装方式可详见Next仓库中的readme.md 文档
    Next仓库地址

git clone https://github.com/theme-next/hexo-theme-next themes/next

三、常用配置指南

常用配置也可参考next官方文档，由于next团队历史原因。此文档并非最新
Next配置文档

3.1 常用配置

_config.next.yml 配置文件
为了避免更新出现冲突，推荐使用 Alternate Theme Config 存储配置：https://theme-next.js.org/docs/getting-started/configuration.html

  • 修改主题配置文件 _config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    # 选择自己喜欢的next主题
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini

    # 是否跟随系统的暗黑模式 
    # Dark Mode
    darkmode: true

    #站点图标设置
    favicon:
      small: /images/favicon-16x16-next.png
      medium: /images/favicon-32x32-next.png
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg
      #android_manifest: /manifest.json

    #侧边栏头像设置
    # Sidebar Avatar
    avatar:
      # Replace the default image and set the url here.
      url: /img/head.png

    #菜单栏功能选择 自行取消注释开启功能
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

    #侧边栏社交显示 自行取消social下的注释
    social:
      #GitHub: https://github.com/yourname || fab fa-github
      #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
      #Weibo: https://weibo.com/yourname || fab fa-weibo
      #Google: https://plus.google.com/yourname || fab fa-google
      #Twitter: https://twitter.com/yourname || fab fa-twitter
      #FB Page: https://www.facebook.com/yourname || fab fa-facebook
      #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
      #YouTube: https://youtube.com/yourname || fab fa-youtube
      #Instagram: https://instagram.com/yourname || fab fa-instagram
      #Skype: skype:yourname?call|chat || fab fa-skype

3.2 基础功能

3.2.1 站内搜索

  • 安装依赖
    npm install --save hexo-generator-search

  • 配置生成搜索文件
    修改站点配置文件 _config.yml

    1
    2
    3
    4
    5
    6
    # search
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

    3.2.2 rss功能

  • 安装依赖
    npm install hexo-generator-feed –save

  • 配置插件
    修改站点配置文件 _config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    # feed
    # Dependencies: https://github.com/hexojs/hexo-generator-feed
    plugins: hexo-generate-feed

    # rss配置
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '
      order_by: -date

    #type RSS的类型。[‘atom’, ‘rss2’]两种类型。（默认值：atom）
    #path 文件路径。（默认值：atom.xml / rss2.xml）
    #limit 供稿中的最大帖子数（使用0或false显示所有帖子）
    #hub PubSubHubbub枢纽的网址（如果不使用，请将其留空）
    #content（可选）设置为“true”，以在Feed中包含整个帖子的内容。
    #content_limit（可选）摘要中使用的帖子内容的默认长度。仅在内容设置为false并且不存在自定义帖子描述时使用。
    #content_limit_delim（可选）如果使用content_limit来缩短帖子内容，则仅在达到字符限制之前在此定界符的最后一次出现时才进行剪切。默认情况下不使用。
    #order_by 订阅顺序。（默认值：date）
    #icon（可选）自定义Feed图标。默认为在主配置中指定的电子邮件摘要。
    #autodiscovery 添加提要自动发现。（默认值：true）
    #template 自定义模板路径。该文件将用于生成提要xml文件，请参阅默认模板：atom.xml和rss2.xml。

  • 设置在侧边栏显示
    修改主题配置文件 _config.yml

    1
    2
    social:
      RSS: /atom.xml || fas fa-rss

    3.2.3 图片显示：

  • hexo编译后会创建一个与该md文件同名的目录

  • 故调用图片可直接在 source/_post/目录下创建于该md文件名相同的文件夹，并将图片放入

  • md文件中调用直接使用相对路径

    3.2.4 hexo 自动部署

  • 安装依赖
    npm install hexo-deployer-git --save

  • 配置部署信息
    修改站点配置文件 _config.yml

    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:peana/peana.github.io.git
      branch: master

3.2.5 添加README.md 文件

  • 需求
    想在github代码仓库中添加README.md
  • 操作
    • 注： 因直接写readme.md 会被hexo编译为html文件
    • 直接在站点的source目录下直接创建README.mdown文件
      .mdown后缀的文件不会被hexo编译，且能被github识别成md文件

3.2.6 使用自己的域名

  • 需求：
    当前博客的URL地址为peana.github.io，因自己已经申请了一个域名，想换成自己的域名。
  • 操作
    1. 同上“添加README.md 文件”中操作，在站点的source目录下直接创建CNAME文件
    2. 编写CNAME文件
      按照CNAME 文件规则编写，若只做简单转换，可直接填入需要转换成为的域名

      blog.peana.ga

    3. git 修改配置上传文件区分大小写
      CNAME 文件区分大小写，且小写无效
      1
      2
      3
      #进入博客家目录下的 .deploy_git
      cd $BLOG_HOME/.deploy_git/
      git config --local core.ignorecase false

3.3 页面美化

3.3.1 背景图片

  • 启用个性化配置文件
    修改主题配置文件 _config.yml

    1
    2
    custom_file_path:
      style: source/_data/styles.styl

  • 在博客目录下创建source/_data/styles.styl文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    //网站背景图
    body {
        background:url(/img/background.jpg); // 为图片路径，也可以直接使用链接。
        background-repeat: no-repeat; // 若果背景图片不能全屏，那么是否平铺显示，充满屏幕
        background-attachment:fixed; //背景是否随着网页上下滚动而滚动，fixed 为固定
        background-position:50% 50%; // 图片位置：居中
        background-size: 100% 100%; //图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。
        color: #3c3c3c;
    }

    // 头部样式属性 我这边设置了全透明的图
    .header {
      background:url(/img/transparent.png);
    }
    // title样式属性 即next中Pisces主题的 左上黑框部分
    .site-brand-container {
      background:url(/img/white.png);
      background-repeat: no-repeat;
    }
    // 页面头样式属性 首页功能栏背景图
    .header-inner {
      background:url(/img/frosted-glass.png);
    }
    // 侧边样式属性 侧边栏背景图
    .sidebar-inner {
      background:url(/img/frosted-glass.png);
    }
    // 主体样式属性 博客右侧主图背景图
    .main-inner {
      background:url(/img/transparent.png);
    }
    // 文章版块样式
    .post-block {
      background:url(/img/frosted-glass.png);
    }

  • 磨砂质感透明图制作
    ps中操作

    1. 新建白色背景图
    2. CTRL+J 复制背景图层，得到图层1图层
    3. CTRL+B 色彩平衡 色阶 0 0 -25 保存
    4. 继续增加颗粒感，滤镜-杂色-添加杂色
      数量6% 勾选单色
    5. 右键图层-图层样式（混合选项）
      1.填充不透明度20%
      2.挖空：浅
      3.其他数据默认。
    6. ctrl+s 保存为png格式（png格式可保存透明图片）

      3.3.2 动态模型

      live2dw

  • 安装依赖
    npm install --save hexo-helper-live2d

  • 安装模型

    模型仓库 https://github.com/xiazeyu/live2d-widget-models
    模型效果可在此处预览 https://huaji8.top/post/live2d-plugin-2.0/
    可用 npm install {packagename} 安装模型
    例：npm install live2d-widget-model-tororo

  • 配置live2d
    修改站点配置文件 _config.yml 添加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true # 是否开启live2d
      scriptFrom: local ## 脚本从本地引入
      pluginRootPath: live2dw/ # 模型根目录(指hexo g后生成public\live2dw文件名)
      pluginJsPath: lib/ # 依赖js的文件夹名(public\live2dw\lib)
      pluginModelPath: assets/ # 模型存放目录(public\live2dw\assets)
      tagMode: false # 标记模式(未知) 
      log: false # 日志
      model: # 模型
        use: live2d-widget-model-tororo # 使用的模型名称
      display: # 显示
        position: right # 显示在右边(left显示在左边)
        width: 150 # 宽度
        height: 300 # 高度
      mobile:
        show: true # 手机端是否显示
      react:
        opacity: 0.7 # 透明度

3.3.3 进度条&进度百分比

  • 修改主题配置文件 _config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #博客顶部阅读进度条
    # Reading progress bar
    reading_progress:
      enable: true
      # Available values: left | right
      startAt: left
      # Available values: top | bottom
      position: top
      reversed: false
      color: "#37c6c0"
      height: 3px
    #进度百分比
    back2top:
      enable: true
      # Back to top in sidebar.
      sidebar: false
      # Scroll percent label in b2t button.
      scrollpercent: true