Logo 左上角的 logo 和标题取自站点根目录的配置文件:
blog/_config.yml 设置鼠标指上 subtitle
后翻转另一行字(您可以将鼠标移至左上角的Stellar查看效果)
blog/_config.stellar.yml 如果您想用一个图片作为 logo,可以直接在主题配置文件 logo 中设置:
blog/_config.stellar.yml logo: avatar: '[{config.avatar}](/about/)' title: '[{config.title}](/)'
Background(背景) 此功能在 1.26.0 中支持,可以设置:纯色/渐变色/图片作为背景。
blog/_config.stellar.yml style: ... leftbar: background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg) blur-px: 100px blur-bg: var(--alpha60)
关于linear-gradient的用法示例 linear-gradient(45deg , blue, red); linear-gradient(to left top , blue, red); linear-gradient(0deg , blue, green 40% , red); linear-gradient(.25turn , red, 10% , blue); linear-gradient(45deg , red 0 50% , blue 50% 100% );
Navbar(主导航栏) 自己可以增加任意的键值对,键:就是 menu_id,后面需要用到,值:就是显示的 md 链接,方括号内支持文字和图片标签
blog/_config.stellar.yml menubar: columns: 4 items:
侧边栏宽度有限,如何在不影响观感的情况下设置更多的主导航栏按钮呢?建议设置一个「更多」按钮,然后在「更多」页面的侧边栏放上列表组件。
Search(搜索) 在 1.17.1 版本后开始支持,无需安装插件,默认开启。
blog/_config.stellar.yml search: service: local_search local_search: field: all path: /search.json content: true codeblock: true
首先你的需要是技术类博客或者项目文档,然后你才能申请 DocSearch ,会有人工审核。
几个小时之后就会回复你一封邮件,附有有你的 appId
apiKey
indexName
填入其中即可。
blog/_config.stellar.yml search: service: algolia_search algolia_search: appId: 'xxxxx' apiKey: 'xxxxxxxxxxxx' indexName: 'xxxxxxxx'
在 _config.stellar.yml
中设置搜索选项,现在 search
组件的位置固定,暂不支持更改。
但你仍可以在某些页面中通过覆盖 search 组件的 filter 参数来定制化搜索范围,例如 wiki
或 笔记
页面的配置中:
blog/source/_data/wiki/xxx.yml search: filter: /wiki/stellar/ placeholder: 在 Stellar 中搜索...
blog/_config.stellar.yml footer: social: github: icon: '<img src="/assets/placeholder/social/08a41b181ce68.svg"/>' url: https:// music: icon: '<img src="/assets/placeholder/social/3845874.svg"/>' url: https:// unsplash: icon: '<img src="/assets/placeholder/social/3616429.svg"/>' url: https:// comments: icon: '<img src="/assets/placeholder/social/942ebbf1a4b91.svg"/>' url: https://
自定义组件 Stellar 支持丰富的自定义小组件,详见这篇文档: