[{"data":1,"prerenderedAt":180},["ShallowReactive",2],{"content:\u002Fposts\u002F2026\u002Fintroduction-to-the-neat-annotations-library":3,"surround:\u002Fposts\u002F2026\u002Fintroduction-to-the-neat-annotations-library":168},{"id":4,"title":5,"body":6,"canonical":147,"categories":148,"date":150,"description":151,"draft":152,"extension":153,"image":130,"meta":154,"navigation":155,"path":156,"permalink":147,"readingTime":157,"recommend":147,"references":147,"seo":162,"sitemap":163,"stem":164,"tags":165,"type":147,"updated":150,"__hash__":167},"content\u002Fposts\u002F2026\u002Fintroduction-to-the-neat-annotations-library.md","neat-annotations 介绍",{"type":7,"value":8,"toc":142},"minimark",[9,12,29,38,49,79,81,84,134,138],[10,11],"br",{},[13,14,15,16,23,24,28],"p",{},"如果你需要在网页中有一些需要标注的地方， ",[17,18,22],"ann",{"color":19,"note":20,"position":21},"rainbow","就像这样","s","可以用用它","，可以试试这个叫 ",[25,26,27],"code",{"code":27},"neat-annotations"," 的手写风格的箭头标注库。使用方式也很简单，我们一起来看看吧。",[13,30,31,32,37],{},"我们要做的就只是引入对应的 css 文件即可。 具体文件可以在 ",[33,34,36],"badge",{"link":35},"https:\u002F\u002Fgithub.com\u002Fsyabro\u002Fneat-annotations\u002Fblob\u002Fmain\u002Fneat-annotations.css","neat-annotations.css"," 找到。",[13,39,40,41,44,45,48],{},"在引入后，就可以通过标签的 ",[25,42,43],{"code":43},"class"," 和 ",[25,46,47],{"code":47},"data-note"," attribute 来控制显示的样子。",[50,51,53,68],"tab",{":tabs":52},"[\"示例\", \"代码\"]",[54,55,57],"template",{"v-slot:tab1":56},"",[13,58,59,60],{},"The dashboard updates ",[61,62,67],"span",{"className":63,"dataNote":66},[17,64,65],"ann-n","ann-amber","no refresh needed","in real time",[54,69,70],{"v-slot:tab2":56},[71,72,77],"pre",{"className":73,"code":75,"language":76,"meta":56},[74],"language-html","The dashboard updates \u003Cspan class=\"ann ann-n ann-amber\" data-note=\"no refresh needed\">in real time\u003C\u002Fspan>\n","html",[25,78,75],{"__ignoreMap":56},[10,80],{},[13,82,83],{},"这里我们可以做一点简单的解释",[85,86,87],"ul",{},[88,89,90,91,97],"li",{},"外层标签\n",[92,93,94],"blockquote",{},[13,95,96],{},"这里的内容就是箭头指向的内容",[85,98,99,131],{},[88,100,101,102,111],{},"class：\n",[103,104,105,108],"ol",{},[88,106,107],{},"ann 这个是必须的",[88,109,110],{},"ann-xx 这里分两种情况",[85,112,113,121],{},[88,114,115,116],{},"ann-n · ann-ne · ann-e · ann-se · ann-s · ann-sw · ann-w · ann-nw 时表示方位",[117,118],"pic",{"caption":119,"src":120},"图片来自 neat-annotations README.md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fneat-annotations-directions.png",[88,122,123,124,127,128],{},"ann-amber · ann-blue · ann-green · ann-red · ann-purple · ann-rainbow 时表示颜色，当然你也可以使用 ",[25,125,126],{"code":126},"--ann-color"," css 变量自定义颜色",[117,129],{"caption":119,"src":130},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fneat-annotations-colors.png",[88,132,133],{},"data-note：这里就是箭头处展示的内容",[135,136,137],"h2",{"id":137},"仓库地址",[139,140],"link-card",{"link":141,"title":27},"https:\u002F\u002Fgithub.com\u002Fsyabro\u002Fneat-annotations",{"title":56,"searchDepth":143,"depth":143,"links":144},4,[145],{"id":137,"depth":146,"text":137},2,null,[149],"代码","2026-09-11 16:22:37","为你的网站提供手绘箭头和手写标签。纯 CSS，无需 JavaScript，无需构建步骤——一个独立文件。",false,"md",{},true,"\u002Fposts\u002F2026\u002Fintroduction-to-the-neat-annotations-library",{"text":158,"minutes":159,"time":160,"words":161},"2 min read",1.205,72300,241,{"title":5,"description":151},{"loc":156},"posts\u002F2026\u002Fintroduction-to-the-neat-annotations-library",[166],"CSS","JiihEcd1yQbAWiTtae1z50J29HGZyqV8Xe3LIF222ck",[169,174],{"title":170,"path":171,"stem":172,"date":173,"type":147,"children":-1},"自用 skill 推荐","\u002Fposts\u002F2026\u002Frecommended-skills-for-personal-use","posts\u002F2026\u002Frecommended-skills-for-personal-use","2026-08-21 15:30:01",{"title":175,"path":176,"stem":177,"date":178,"type":179,"children":-1},"AI 做的 Logo 总像插画？试试这个 Skill","\u002Fposts\u002F2026\u002Fip-as-logo-skill","posts\u002F2026\u002Fip-as-logo-skill","2026-09-12 23:53:13","story",1789642584074]