[{"data":1,"prerenderedAt":170},["ShallowReactive",2],{"content:\u002F2026\u002Fcategories":3,"surround:\u002F2026\u002Fcategories":160},{"id":4,"title":5,"body":6,"categories":133,"date":135,"description":136,"draft":137,"extension":138,"image":139,"meta":140,"navigation":142,"path":143,"permalink":144,"published":144,"readingTime":145,"recommend":144,"references":144,"seo":150,"series":151,"sitemap":152,"stem":153,"tags":154,"type":158,"updated":135,"__hash__":159},"content\u002Fposts\u002F2026\u002Fcategories.md","文章分类",{"type":7,"value":8,"toc":125},"minimark",[9,13,22,32,43,51,54,64,70,89,92,106,109,122],[10,11,12],"h2",{"id":12},"分类是什么",[14,15,16,17,21],"p",{},"分类（",[18,19,20],"code",{"code":20},"categories","）写在文章的 Front matter 里，用于表达文章「属于哪一类」。首页、归档页和预览页的列表顶部都有一个分类下拉框，切换后即可只看某一分类的文章。",[23,24,30],"pre",{"className":25,"code":27,"language":28,"meta":29},[26],"language-yaml","---\ntitle: 文章分类\ncategories: [功能演示]\n---\n","yaml","",[18,31,27],{"__ignoreMap":29},[14,33,34,35,38,39,42],{},"本站使用的分类都定义在 ",[18,36,37],{"code":37},"blog.config.ts"," 的 ",[18,40,41],{"code":41},"article.categories"," 中，并为每个分类配置了图标与颜色：",[23,44,49],{"className":45,"code":47,"language":48,"meta":29},[46],"language-ts","article: {\n\tcategories: {\n\t\t未分类: { icon: 'tabler:circle-dashed' },\n\t\t功能演示: { icon: 'tabler:components', color: '#ff77aa' },\n\t\t写作指南: { icon: 'tabler:pencil', color: '#33bbaa' },\n\t\t站点配置: { icon: 'tabler:settings', color: '#7777ff' },\n\t\t关于: { icon: 'tabler:info-circle', color: '#33aaff' },\n\t},\n},\n","ts",[18,50,47],{"__ignoreMap":29},[10,52,53],{"id":53},"多级分类",[14,55,56,58,59,63],{},[18,57,20],{"code":20}," 是",[60,61,62],"strong",{},"数组","，因此可以表达层级。分类统计接口会把数组按顺序构建成一棵树；列表筛选则以第一项（父级）为准：",[23,65,68],{"className":66,"code":67,"language":28,"meta":29},[26],"---\n# 表示「技术 → 前端」下的文章\ncategories: [技术, 前端]\n---\n",[18,69,67],{"__ignoreMap":29},[71,72,75],"alert",{"title":73,"type":74},"约定","info",[14,76,77,78,83,84,88],{},"列表筛选只使用数组的第一项，因此建议把最粗的粒度放在最前面。更细的层级交给",[79,80,82],"a",{"href":81},"\u002F2026\u002Ftags","标签","或",[79,85,87],{"href":86},"\u002F2026\u002Fcollections","合集","表达。",[10,90,91],{"id":91},"默认分类",[14,93,94,95,97,98,101,102,105],{},"未填写 ",[18,96,20],{"code":20}," 的文章会落到 ",[18,99,100],{"code":100},"blogConfig.defaultCategory","（本站为「未分类」）。分类的排序字段在 ",[18,103,104],{"code":104},"article.order"," 中配置，本站支持按「创建日期」与「更新日期」排序。",[10,107,108],{"id":108},"在哪里看到分类",[110,111,112,116,119],"ul",{},[113,114,115],"li",{},"首页 \u002F 归档页：列表顶部的分类下拉框",[113,117,118],{},"文章卡片与归档条目：显示图标 + 分类名",[113,120,121],{},"文章页头部：显示当前分类",[14,123,124],{},"想看实际效果，点开列表顶部的分类筛选，切到「功能演示」即可。",{"title":29,"searchDepth":126,"depth":126,"links":127},4,[128,130,131,132],{"id":12,"depth":129,"text":12},2,{"id":53,"depth":129,"text":53},{"id":91,"depth":129,"text":91},{"id":108,"depth":129,"text":108},[134],"功能演示","2026-10-03 09:30:00","分类用于给文章归类并在列表页筛选。本文介绍分类的配置、多级分类与筛选入口。",false,"md","\u002Fcovers\u002Fcategories.jpg",{"slots":141},{},true,"\u002F2026\u002Fcategories",null,{"text":146,"minutes":147,"time":148,"words":149},"2 min read",1.865,111900,373,{"title":5,"description":136},"Clarity 功能地图",{"loc":143},"posts\u002F2026\u002Fcategories",[155,156,157],"分类","导航","Front matter","tech","jdwpn1akINc66grdkFxhCjHyJhKGEd6IQ8qsj0SshGM",[161,166],{"title":162,"path":163,"stem":164,"date":165,"type":158,"children":-1},"内容组件图鉴","\u002F2026\u002Fcontent-components","posts\u002F2026\u002Fcontent-components","2026-10-03 09:20:00",{"title":167,"path":81,"stem":168,"date":169,"type":158,"children":-1},"标签系统","posts\u002F2026\u002Ftags","2026-10-03 09:40:00",1791033610003]