站点信息

Stellar 会读取Hexo根目录下的 _config.yml 和 _config.stellar.yml信息：

标题和logo配置

xxx/_config.yml
1
2
3
4
5
6
7
title: xxx的博客       # 站点标题
avatar: /img/bg.png   # 站点头像
favicon: /img/bg.png  # 站点图标ico
subtitle: ''          # 站点副标题 已移至主题_config.stellar.yml配置中
language:
  - zh-CN
  - en

设置 subtitle 显示

设置鼠标指上subtitle后翻转另一行字

xxx/_config.stellar.yml
1
subtitle: '奔赴山海 | 保持热爱 ' # 设置 subtitle 显示

Search（站内搜索）

无需安装插件，默认开启

xxx/_config.stellar.yml
1
2
3
4
5
6
7
8
search:
  service: local_search # local_search, todo...
  local_search:
    field: all # post, page, all
    path: /search.json # 搜索文件存放位置
    content: true # 是否搜索内容
    skip_search: [] # 指定 path 中的内容不被搜索。
    codeblock: true # 是否搜索代码块（需要content: true)

要过滤某些页面，可以在front-matter 中设置 indexing: false 来避免被搜索索引

Footer（页脚）

页脚社交图标配置，默认关闭，内容可自定义

blog/_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
footer:
  social:
    github:
      icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder/social/08a41b181ce68.svg"/>'
      url: https://
    music:
      icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder/social/3845874.svg"/>'
      url: https://
    unsplash:
      icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder/social/3616429.svg"/>'
      url: https://
    comments:
      icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder/social/942ebbf1a4b91.svg"/>'
      url: https://

设置整体背景

xxx/_config.stellar.yml
1
2
3
4
5
site: # 使用 background-image 后，blur 设置才有效
  background-image: url(https://cdn.jsdelivr.net/gh/zsyks66/cdn-x@main/bg.jpg) 
  blur-px: 90px #100px
  blur-bg: var(--bg-a75)
  blur-sat: 50%
  • background-image：整体背景图片,使用本地图片预览时也需要添加url,如url(/img/bj.png)
  • blur-px：模糊半径，数字越小越清晰
  • blur-bg：模糊颜色，默认值为 var(--bg-a75)可以使用 transparent测试
  • blur-sat： 模糊饱和度，数字越大饱和度越高。

设置左侧栏背景

xxx/_config.stellar.yml
1
2
3
4
5
sidebar:
  background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/[email protected]/image/[email protected])
  blur-px: 100px
  blur-bg: var(--bg-a50)
  background-opacity: 0.8
  • background-image：设置左侧栏背景图片
  • background-opacity：设置左侧栏背景透明度，可以根据需要调整。

设置字体

xxx/_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
style:
  font-size:
    root: 18px          # 根字体，rem 基准
    body: 0.9375rem     # 正文字体 15px
    code: 85%           # 行内代码 12.75px
    codeblock: 0.8125rem # 代码块 13px
  font-family:
    body: 'LXGW WenKai Screen, system-ui, "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
    code: 'Menlo, Monaco, Consolas, system-ui, monospace, sans-serif'
    codeblock: 'Menlo, Monaco, Consolas, system-ui, monospace, sans-serif'

其中：

  • root：设置根字体，默认值为 16px，觉得太小可以调到 18px，其他字体会根据根比例自动调整，也可以根据需要调整。
  • font-family：字体族决定了文字的显示风格。浏览器会从左到右依次尝试加载字体，如果电脑上没有第一个字体，就会尝试第二个，以此类推。
  • LXGW WenKai Screen：使用非默认字体需要引进字体文件，否则会显示为默认字体。

引入字体文件

在style上方引入字体文件，否则会显示为默认字体，引进新字体后建议清除缓存。

xxx/_config.stellar.yml
1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css">  
style:
  xxx
分享文章

快来参与讨论吧~