更多 招聘专区 布局（2）
查看全部
https://neobrutalism.com/zh/blocks/career-sections/job-description-with-apply-sidebar
带侧栏的职位详情
招聘专区 · Pro 源码
招聘列表所链接到的详情页。阅读栏承载职位摘要、你将做什么以及团队在寻找什么样的人，而一个从 large 断点起吸附的侧栏，无论描述有多长，都会让薪资、截止日期和 Apply 按钮始终可见。这是本类别中唯一完全没有状态的招聘板块，因此它保持为服务端组件。
招聘专区
带侧栏的职位详情打开实时预览
- Hero、定价与登录
- 预览每个断点
- 复制源代码
- MCP 已准备好安装
- Radix · Base UI · React Aria
- 158 现成砌块
- 已发布的页面部分
- 仪表盘与营销
- Pro 解锁密码
- 即用型布局
喜爱。 开发者、设计师，
创作者都
偶然刷到你的 UI 套件就立马入手。这么新还在活跃维护、不断改进，干得漂亮 🤘
Ziv Reich, 软件开发者 只想说 neobrutalism.com 做得太棒了，真的很喜欢。我不擅长设计，所以它帮了大忙，我拿它做了自己的个人网站。
Paul Bratslavsky, Coding With Paul 主理人 终于用 Neobrutalism.com 重做了个人网站——好玩的库，上手也简单！
Cameron Blackwood, 内容创作者 Neobrutalism.com 是我最爱的复古风 UI 组件库之一——组件真能拿去上线。
Zhengyang Hou, 独立开发者 Web 上我最喜欢的 UI 库之一。做得很棒，希望它越走越远。
Taseen Tanvir, 创始人 & 设计师 刚试了 Neobrutalism.com Pro，不跟风的 UI 套件真是耳目一新。新粗野主义区块 🔥 让怪又好玩的原型快多了。
Nitesh Padghan, 捉刀写手 落地页设计出色，节奏与平衡都恰到好处。配色与动效结合，带来非常出色的用户体验。
Alan Obeng-Peprah, 高级设计师 @ NativeXAI 他们对设计的交付让我非常满意。最终成品与我设想的完全一致。
Desmond, 联合创始人 @ VectorlabsVentures 作为代理公司负责人，我通常要花几周打磨客户的落地页布局。用 Neobrutalism.com 后，套上模板、改好文案就能上线。
Duke Opoku Amankwah, 创始人 @ Midas 这些模板不仅视觉出色，结构也极其清晰。为我们节省了数周开发时间。
Abiola Braimah, 开发者 @ Studio IX 品质出众，细节到位。响应式设计在所有设备上都运行得很稳。
Acromond X., 联合创始人 @ VectorlabsVentures 把这些模板接入工作流后，我们的开发周期明显缩短。做得很好。
Raquib S., 后端开发者 这些模板已成为我们的首选资源。代码干净、文档齐全，也很容易定制。
Hallic M., 开发者 @ AtlasLabs Neobrutalism.com 模板在美学与功能之间取得了完美平衡，对我们的项目是真正的改变。
Ibrahim S., 前端负责人 @ ScaleUp 支持出色，模板质量也是 premium 级别。这些模板的投资回报非常惊人。
Kevin K., CEO @ WebCraft Neobrutalism.com 模板彻底改变了我们接手新客户项目的方式。代码质量极高，设计也真正达到一流水准。
Danny G., DevStack 创始人 我用过很多模板库，但 Neobrutalism.com 在性能优化与干净代码架构上的投入格外突出。
Ian D., Wavelength CTO 这些模板里的动画与微交互非常惊艳。对我们设计团队来说是最好的投资。
Ben S., PixelPerfect 首席设计师 作为非技术创始人，Neobrutalism.com 模板帮我们在不牺牲设计质量的情况下以创纪录速度上线 MVP。投资人非常惊喜。
Matthew I., 创业公司创始人 我很欣赏这些组件的模块化与文档质量。我们能无缝混用不同模板的片段。
Garrett P., TechFusion 前端负责人 Neobrutalism.com 模板的投资回报惊人。我们大幅缩短开发时间，同时交付更高质量的站点给客户。
Xavier C., 代理公司负责人
常见
问题
带侧栏的职位详情 区块如何组成、可以更改的内容，以及何时使用它而不是此处的其他布局。
处在两者的下游。Filterable Job Openings Grid 和 Department Openings and Perks 都是列表，其职位标题会链接到某处——这里就是它们链接到的页面，完整呈现一个职位。三者搭配使用时，列表板块承载摘要字段，这一个承载正文。它也是唯一没有 useState 的招聘板块，因此保持为服务端组件，不发出任何筛选相关的 JavaScript。
从 jobFacts 数组里删掉那一行，说明列表就会自动收拢——侧栏里的每条信息都是从这个数组渲染出的一对术语和定义，而不是手写标记，所以不会留下空标签。下方的公司信息也是同理。不过列表里至少要保留两条信息：只剩一行会让 Apply 按钮孤零零地浮在一张几乎空空如也的卡片上。
侧栏列设置了 lg:sticky lg:top-8，一旦描述滚过它，它就会固定在视口顶部往下 8 个单位的位置。它刻意在 lg 以下不吸附：在那个宽度下布局是单栏的，一张固定卡片会盖在职责内容上方，而不是并排显示。如果你的站点有固定头部，把 top-8 调大，避免被遮挡。
它是一个 Pro Avatar，把默认的圆形覆盖成 64px 的圆角方形，因此任何方形徽标都能直接放进去。也要给 Avatar.Fallback 填上公司首字母：图片加载期间会显示它，如果链接失效也会一直显示它——在这么重要的页面上，这不是一个假设情形。alt 文本描述的是标志本身，而不是重复公司名称，公司名称已经出现在旁边的标题里。
因为一个用颜色编码的标签，必须先被“解码”才能看懂它的含义，而它本会用到的图表 token 在浅色和深色模式下颜色并不相同——某个标签在一个主题下代表远程办公，在另一个主题下就什么都代表不了。这里的每个标签都用文字配匹配图标把值直接写出来，所以部门、地点和合同类型在两种主题下、乃至黑白打印时都能保留信息。
示例数据是六条职责、五条要求，这大致也是候选人愿意读到的极限。每个条目都是一个 flex 行，对勾图标设为 mt-0.5 和 shrink-0，因此三行的条目也能让图标对齐第一行，而不是相对整块内容居中。如果一份列表超过八项，通常说明这是两个职位共用了一个标题。