Starter主题
category
tags
type
status
slug
summary
date
Last edited time
Nov 8, 2024 08:16 AM
icon
password
状态
天气
星期
日期
新主题 Starter
V4.3版本中加入的免费主题:为公司、创业者、独立开发者、开源技术社区、品牌推广者设计。
一站式解决您的 品牌展示,博客新闻、产品服务宣传、团队展示、资讯订阅、用户评价、FAQ、价格展示及收费、留言反馈、会员注册登录、隐私政策、服务协议、法律声明。
您可以在这个网站上介绍您的产品、并直接挂上付款链接;产品可以是线上课程、一款APP、一个游戏等等。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F2cad4f7b-74c4-4bab-b139-120d245fec1c%2FUntitled.png?table=block&id=a5c7ec4f-08ff-432f-9659-92c97e63833a&t=a5c7ec4f-08ff-432f-9659-92c97e63833a&width=672&cache=v2)
本文将介绍Starter主题的使用方式
如何切换至Starter主题?
请先升级NotionNext至最新版,
> V4.3
然后参考《主题功能说明-如何修改默认主题进行配置》修改您的默认主题即可。
配置说明
页面上的文字\按钮 配置基本都可以在
/themes/starter/config.js
中找到配置; 您可以在NotionConfig中添加对应的配置,来一步步调整出您的页面。站点支持配置的范围,按照首页的板块大致分为以下11个模块:
LOGO , HERO,NAV、FEATURE、ABOUT、PRICING、TESTIMONIALS、TEAM、BLOG、CONTACT、FOOTERBRANDS
Starter主题需要自定配置的内容比较多,修改代码和配置环境变量会比较麻烦,您可以 借助《批量配置 INLINE_CONFIG 》来批量导入配置。
支持Notion_Config
在目前的版本中,所有的主题配置都支持在Notion_Config中配置了。例如要修改作者成员,可以直接在Notion_config中添加如下配置
配置名 | 配置值 |
STARTER_TEAM_ITEMS | [
{
"STARTER_TEAM_ITEM_AVATAR": "/images/starter/team/team-01.png",
"STARTER_TEAM_ITEM_NICKNAME": "Tangly",
"STARTER_TEAM_ITEM_DESCRIPTION": "Developer"
},
{
"STARTER_TEAM_ITEM_AVATAR": "/images/starter/team/team-01.png",
"STARTER_TEAM_ITEM_NICKNAME": "Melissa Tatcher",
"STARTER_TEAM_ITEM_DESCRIPTION": "Marketing Expert"
},
{
"STARTER_TEAM_ITEM_AVATAR": "/images/starter/team/team-02.png",
"STARTER_TEAM_ITEM_NICKNAME": "Stuard Ferrel",
"STARTER_TEAM_ITEM_DESCRIPTION": "Digital Marketer"
},
{
"STARTER_TEAM_ITEM_AVATAR": "/images/starter/team/team-03.png",
"STARTER_TEAM_ITEM_NICKNAME": "Eva Hudson",
"STARTER_TEAM_ITEM_DESCRIPTION": "Creative Designer"
}
] |
Starter主题配色
主题默认是蓝色,您可以通过修改GLOBAL_CSS的方式来调整主题的颜色:修改方式如下图:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fd4a9ac16-dbb4-4e38-af66-899740b31701%2Fimage.png?table=block&id=131f93b9-208b-80e1-9f9e-e06242eaf5dc&t=131f93b9-208b-80e1-9f9e-e06242eaf5dc&width=707.8819580078125&cache=v2)
调色示例
以下是调成紫色的示例,在GLOBAL_CSS中添加以下两行:
其中:第一行是主背景色调;第二行是提示文字的色调;第三行是右上角Sign Up按钮的背景色。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F6c60f0ba-4359-431d-9e05-d8d10cc462e6%2Fimage.png?table=block&id=131f93b9-208b-80ae-8e4d-e0f2a078c5d1&t=131f93b9-208b-80ae-8e4d-e0f2a078c5d1&width=679.982666015625&cache=v2)
这里的purple就是我的颜色,您可以参考以下文章获取更多颜色的名称
调色示例2
例如我还可以输入16进制的色号
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F1af1f34a-1b9c-462e-b77b-4d0783e5614d%2Fimage.png?table=block&id=131f93b9-208b-8073-bcac-df9e1f5c1713&t=131f93b9-208b-8073-bcac-df9e1f5c1713&width=707.93408203125&cache=v2)
Logo
/themes/starter/config.js
对应配置 ,我目前是没有设置图片,直接用站点标题作为logo ; 支持设置成图片: 建议是设置两个logo图,一个深色一个浅色。![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fcf2ffe6e-5cb9-42a1-8e78-87284bd77397%2FUntitled.png?table=block&id=28c980d7-6aa0-439e-96f4-45a3eb50c195&t=28c980d7-6aa0-439e-96f4-45a3eb50c195&width=336&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F20c211f9-a718-4f90-afbc-52445086e43f%2FUntitled.png?table=block&id=c143bade-37e8-4f2f-8c38-3b9cb2237745&t=c143bade-37e8-4f2f-8c38-3b9cb2237745&width=288&cache=v2)
Hero
核心宣传区块
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F2d01b579-355e-4e2a-a198-d49c3e77bc07%2FUntitled.png?table=block&id=7c4f79c1-ecd9-4a1d-9c3d-4070c04045ad&t=7c4f79c1-ecd9-4a1d-9c3d-4070c04045ad&width=708&cache=v2)
相关配置和对应配置
NAV 导航栏
导航栏顶部中央菜单 在Notion中通过配置Menu菜单实现。右侧按钮在此配置
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fa50ea920-323b-4cf0-9c56-ea9d1644dca5%2FUntitled.png?table=block&id=dfa3a6a5-f9b8-40e1-80de-7a79e836160c&t=dfa3a6a5-f9b8-40e1-80de-7a79e836160c&width=291.9965515136719&cache=v2)
Feature 特性介绍
支持固定4个特性
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F7642a251-7396-4dbb-98cd-fefd3bba64a9%2FUntitled.png?table=block&id=9e49eee9-613d-4145-8bdd-aea4163c09ef&t=9e49eee9-613d-4145-8bdd-aea4163c09ef&width=708&cache=v2)
About 首页介绍
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F2d2a8b61-e04c-47dc-8376-c44478ece532%2FUntitled.png?table=block&id=528f1b55-3671-4dcb-8524-855c21c1728c&t=528f1b55-3671-4dcb-8524-855c21c1728c&width=708&cache=v2)
Pricing 价格
定价方案
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F50c2e2a1-163d-4a00-b97c-f8ed90115825%2FUntitled.png?table=block&id=b2737548-cf3c-4a4f-bdf4-1533b1a2bd91&t=b2737548-cf3c-4a4f-bdf4-1533b1a2bd91&width=708&cache=v2)
TESTIMONIALS 用户评价
支持添加无数个,此处部分不支持NotionConfig支持,请在配置文件中修改
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fdce40d5f-2030-4560-b5a5-09e2d43f9c24%2FUntitled.png?table=block&id=364b1365-764a-4fa1-8ec2-f572dcd83990&t=364b1365-764a-4fa1-8ec2-f572dcd83990&width=708&cache=v2)
FAQ 常见问题
支持4个
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F9ddb75d7-8b4f-47cf-b3b3-5a35b3ded9a7%2FUntitled.png?table=block&id=e4f5889e-f601-4543-a226-378f8b51fb21&t=e4f5889e-f601-4543-a226-378f8b51fb21&width=708&cache=v2)
TEAM 团队成员
支持无数个,超出4个会自动换行并居中
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F0b381b73-5c2d-4078-9bfe-00e484b1d144%2Fimage.png?table=block&id=138f93b9-208b-8040-90ef-cb9661316082&t=138f93b9-208b-8040-90ef-cb9661316082&width=707.984375&cache=v2)
BLOG 文章
此处会显示最新的3篇文章,同时也支持设置数量
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fbc7cb0fc-df2a-4713-b8d4-dc08beecbc96%2FUntitled.png?table=block&id=205334ef-8c77-499c-8588-4218ac1a3cbb&t=205334ef-8c77-499c-8588-4218ac1a3cbb&width=708&cache=v2)
Contact 联系我们
留言板使用NoteForm (https://noteforms.com/),外部链接
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Ff55eaa77-1bbf-474b-b1e5-9667b4b52df5%2FUntitled.png?table=block&id=600c3e7c-a27d-4844-b68a-f5c24eeaa919&t=600c3e7c-a27d-4844-b68a-f5c24eeaa919&width=708&cache=v2)
Brands 合作伙伴
放上记账图片和链接,如果不需要链接可以留空白
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F34ea88bf-77d7-4a1a-bb56-7deb4348e296%2FUntitled.png?table=block&id=8ccfff1a-43df-496a-a76b-2b4c08594add&t=8ccfff1a-43df-496a-a76b-2b4c08594add&width=708&cache=v2)
Footer 页脚
页脚的菜单在这里设置,需要改配置文件,不支持NOTION_CONFIG
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F9da6cefe-7d21-45e4-8699-7e1e1022e580%2FUntitled.png?table=block&id=1c21895d-6935-4483-aa27-04a24a74dd6f&t=1c21895d-6935-4483-aa27-04a24a74dd6f&width=708&cache=v2)
其它配置
404页面个性化
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Ff4eaccbd-fa3f-4e95-9436-47a2629365be%2FUntitled.png?table=block&id=edc232e1-3250-45fa-93c1-100e4ba88a72&t=edc232e1-3250-45fa-93c1-100e4ba88a72&width=708&cache=v2)
页脚会显示2到5篇最新文章,默认最多两篇。
如果需要增加可以添加如下配置:
配置名 | 配置值 |
STARTER_FOOTER_POST_COUNT | 3 |
Prev
HEO主题
Next
Movie主题
Loading...