6.Hexo博客细节优化

Posted on | Comments: | Views:

请注意 我所用的主题:Next
不同主题, 操作的参数略有不同 ,大同小异

Hexo改字体

打开hexo\themes\hexo-theme-next\_config.yml
找到font字段

  • 全局字体：定义的字体将在全站范围使用
  • 标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）
  • 文章字体：文章所使用的字体
  • Logo字体：Logo 所使用的字体
  • 代码字体： 代码块所使用的字体
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
font:
  enable: true        // 检查是否已经设置为true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

google字体网站

Hexo改透明度

打开\themes\next\source\css\_schemes\Pisces\_layout.styl
找到并开始修改 .content-wrap字段的值,添加opacity属性,此为主题内容板块
image.png
打开\themes\next\source\css\_schemes\Pisces\_layout.styl
找到并开始修改.sidebar字段的内容,添加opacity属性,此为主题侧边栏板块
image.png

Hexo增加动态背景

  • 打开hexo\themes\hexo-theme-next\_config.yml
  • 找到canvas相关的字段,在你想要的动态背景下改为true,如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # Canvas-nest
    # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
    canvas_nest: true

    # JavaScript 3D library.
    #Dependencies: https://github.com/theme-next/theme-next-three
    # three_waves
    three_waves: false
    # canvas_lines
    canvas_lines: false
    # canvas_sphere
    canvas_sphere: false

    # Only fit scheme Pisces
    # Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
    # Canvas-ribbon
    # size: The width of the ribbon.
    # alpha: The transparency of the ribbon.
    # zIndex: The display level of the ribbon.
    canvas_ribbon:
      enable: false
      size: 300
      alpha: 0.6
      zIndex: -1

Hexo更改网页图标Favcion

  • 在网上选好你中意的图片

  • 将图片转成.icon的格式

    Tip: .icon格式转换网址点这里
    Tip: 超多好看可爱的图标在这里

  • 将新图片重命名为favicon.ico

  • 将favicon.ico复制在hexo\source目录下
  • 将favicon.ico复制在hexo\themes\hexo-theme-next\source目录下
  • 打开hexo\themes\hexo-theme-next\_config.yml

  • 找到Favicon的参数,修改如下:

    1
    2
    3
    4
    5
    6
    7
    favicon: 
        small: /favicon.ico
        medium: /favicon.ico
        apple_touch_icon: /favicon.ico
        safari_pinned_tab: /favicon.ico
        android_manifest: /favicon.ico
        ms_browserconfig: /favicon.ico

  • 打开hexo\_config.yml

  • 在文档最后添加字段,如下
    1
    favicon: /favicon.ico