Homepage Greeting 信息小组件配置指南用一行 YAML 定制首页问候语【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepageGreeting 是 Homepage 项目内置的信息小组件Info Widget之一用于在首页顶部展示一段自定义纯文本例如问候语、标语或提示信息。本指南将以 docs/widgets/info/greeting.md 文档为主线结合 greeting.jsx 源码与 greeting.test.jsx 测试用例完整讲解 Greeting 的配置参数、渲染逻辑、样式行为与进阶用法读完后你将能熟练地在widgets.yaml中部署个性化问候小组件。功能定位信息小组件中的纯文本展示在 Homepage 中信息小组件是一类展示系统或环境信息的顶部组件统一在widgets.yaml文件中声明所有可用类型见 Info Widgets 索引其整体配置规范见 Information Widgets。Greeting 在其中的角色非常纯粹渲染一段静态文本。它不依赖任何外部服务 API不发起网络请求也没有服务端代理是最轻量的信息小组件之一。由于组件本身不携带任何图标与背景它常被用来充当页面的欢迎语、个性化签名或固定提示条。快速上手最小配置示例在配置文件widgets.yaml仓库内置的参考骨架见 src/skeleton/widgets.yaml中按以下方式声明即可- greeting: text_size: xl text: Greeting Text保存后刷新首页你设置的text内容便会以指定字号显示在页面顶部。信息小组件会按照widgets.yaml中的定义顺序依次渲染因此你可以通过调整- greeting:条目在文件中的位置来控制它的左右/前后排布。text_size字号取值与默认行为text_size用于控制问候文本的字号文档明确列出的合法取值为4xl、3xl、2xl、xl、md、sm、xs。结合源码 greeting.jsx 中的映射表可以得出字号参数到实际 Tailwind 样式类的完整对应关系text_size实际应用样式类视觉效果4xltext-4xl最大字号3xltext-3xl次大字号2xltext-2xl较大字号xltext-xl大字号默认值lgtext-lg较大中号源码支持文档未列mdtext-md中号smtext-sm小号xstext-xs最小字号两点关键行为需要注意默认值当省略text_size时组件会回退到xl。这一逻辑体现在源码中的options.text_size || xlgreeting.jsx因此最小可用配置只需提供text字段。额外的lg取值源码的textSizes映射中额外包含lg档位虽然官方文档未将其列入合法值清单但从实现上看传入lg同样会被正确解析为text-lg不会触发告警或回退。源码解析Greeting 的渲染链路组件注册Greeting 通过 Next.js 的dynamic按需加载机制注册在信息小组件分发表中映射键为greeting见 widget.jsx。也就是说widgets.yaml中每个- greeting:条目都会被解析为type: greeting随后由 Widget 统一包装渲染时通过ErrorBoundary包裹单个小组件异常不会拖垮整个页面传入组件的options是配置项与全局样式style的合并结果后续的链接、字号、容器样式都从这里读取。组件本体greeting.jsx 的实现非常精简核心逻辑如下空文本即不渲染若options.text为空组件直接返回undefined页面上不会出现任何占位元素。这一点同时被测试用例验证——见 greeting.test.jsx 中的 renders nothing when text is not configured。文本渲染存在text时组件使用 Container 作为外层容器并通过Raw组件输出一个span。span 的样式类由三部分组成text-theme-800 dark:text-theme-200文本颜色跟随主题变量浅色模式为深色文字深色模式为浅色文字mr-3右侧留出 12px 外边距避免与相邻小组件紧贴${textSizes[options.text_size || xl]}前文所述的字号类。容器标识外层容器额外附加information-widget-greeting类名greeting.jsx便于后续通过自定义 CSS 单独定位和调整该组件。进阶玩法链接、样式与布局为问候语添加超链接Container组件支持href选项一旦配置了href整个 Greeting 容器会被渲染为a链接元素见 container.jsx。因此你可以让问候语指向任意目标- greeting: text_size: 2xl text: 欢迎访问我的导航站 href: https://example.com target: _blank # 可选未指定时继承 settings 中的全局 targettarget可省略此时会回退到全局设置settings.target若均未配置则使用_blank。适配 boxedWidgets 头部样式在settings.yaml中将标题栏样式设置为boxedWidgets时Container会给小组件容器加上圆角、阴影与半透明背景container.jsx若同时设置了cardBlur还会追加对应的毛玻璃模糊类。Greeting 同样会自动套用这套盒式外观无需额外配置。布局注意点根据 Information Widgets 的说明部分小组件weather、search、datetime固定右对齐会显著影响整体排布。Greeting 本身不参与右对齐按widgets.yaml中的声明顺序从左到右排列建议将它放在所有右对齐小组件之前以获得稳定的视觉顺序。行为边界与排查要点不配置text时页面无任何输出这是预期行为而非故障。若你发现 Greeting 没有显示请优先检查widgets.yaml中该条目是否缺少text字段。YAML 结构要求greeting必须作为列表项出现即- greeting:前缀不能省略与resources、search等其他信息小组件保持一致。字号回退规则传入未被映射表收录的text_size如xxl时会回退到默认的xl不会报错但也不会产生异常大/小的字号配置时请对照前文的取值表。凭借约十行代码、零外部依赖的实现Greeting 为首页提供了最灵活的纯文本展示能力是信息小组件体系中快速上手、即配即用的理想起点。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
