[{"data":1,"prerenderedAt":1028},["ShallowReactive",2],{"build-logs-mofanx":3,"build-log-mofanx-2026-04-06-homepage-evolution-card-information-hierarchy":928},[4,208,400,504,643,837],{"id":5,"title":6,"body":7,"date":170,"description":171,"draft":172,"extension":173,"faq":174,"meta":187,"navigation":188,"path":189,"project":190,"readingTime":191,"seo":192,"seoKeywords":193,"stem":201,"summary":202,"tags":203,"updated":206,"__hash__":207},"builds\u002Fbuilds\u002Fmofanx\u002F2026-04-06-homepage-evolution-card-information-hierarchy.md","最新建造上首页，让回头客也看得见站点在变",{"type":8,"value":9,"toc":161},"minimark",[10,14,46,57,61,76,83,87,98,117,120,127,137,140,154],[11,12,13],"h2",{"id":13},"先说说最初的别扭",[15,16,17,18,22,23,30,31,34,35,38,39,42,43],"p",{},"建造日志写了不少，内容都",[19,20,21],"strong",{},"有时效","：这周改了什么、为什么改、截了什么图。但这些信息默认待在 ",[19,24,25,29],{},[26,27,28],"code",{},"\u002Fbuilds\u002F..."," 各项目内页","里，按时间排序。对",[19,32,33],{},"第一次来","的人，可以从创造总览摸进去；对",[19,36,37],{},"常来首页","的回头客，如果习惯只扫首页和文章区，",[19,40,41],{},"不主动点进 builds","，就很难感知到：",[19,44,45],{},"这些网站其实一直在迭代，并不是上线就冻住的展示页。",[15,47,48,49,52,53,56],{},"我想补上的，正是这种**「活着」的感觉**：不是多一个模块堆砌，而是让",[19,50,51],{},"最近的建造动态","在首页就有一席之地，和教学、思考并列，让人一眼知道",[19,54,55],{},"最近又在动什么","。",[11,58,60],{"id":59},"首页多了一排最近演化","首页多了一排「最近演化」",[15,62,63,64,67,68,71,72,75],{},"做法很直接：在首页「莫烦创造」里，",[19,65,66],{},"标题下面先铺一排跨项目、按时间排序的最新日志卡片","，再保留下面原有的「创造项目」入口。前者回答「",[19,69,70],{},"最近哪几篇建造","」，后者回答「",[19,73,74],{},"想跟进哪个项目","」。",[15,77,78,79,82],{},"这样，",[19,80,81],{},"有时效的内容不再只藏在深一点的列表里","，回头客路过首页也能撞上最新一篇，站点是不是在动，有了可见的抓手。",[11,84,86],{"id":85},"版式上顺带解决的-confusion","版式上顺带解决的 confusion",[15,88,89,90,93,94,97],{},"把两档信息摆在一起以后，新问题也来了：",[19,91,92],{},"单篇卡片","和",[19,95,96],{},"项目卡片","如果长得太像，读者会愣一下：点进去到底是读一篇文章，还是进整个项目？",[15,99,100,101,104,105,108,109,112,113,116],{},"所以后面一串都是为这个服务的：两类卡片的版式拉开；演化卡里",[19,102,103],{},"先标题、摘要、日期","，",[19,106,107],{},"项目 logo 和名称缩在底部","当辅助入口；头图",[19,110,111],{},"固定比例裁切","，同一行对齐；区块 ",[19,114,115],{},"h2 与 h3"," 用字号和衬线、无衬线区分。教学系列、最新思考的主标题也统一成同一套，首页读起来节奏一致。",[15,118,119],{},"下面是改版后「莫烦创造」一角的截图：能看见主标题装饰线、子标题层级，以及演化卡片的头图与信息顺序。",[15,121,122],{},[123,124],"img",{"alt":125,"src":126},"首页「莫烦创造」中的最新演化卡片与区块标题","\u002Fb\u002Fmofanx\u002Fbuild-recent-cards.png",[15,128,129,130,133,134],{},"技术细节（多链接拆层、避免嵌套 ",[26,131,132],{},"\u003Ca>"," 等）之前也写过，这里不重复展开，核心还是：",[19,135,136],{},"动机先说清楚，交互才好跟。",[11,138,139],{"id":139},"小结",[15,141,142,143,146,147,150,151,56],{},"这次改动的起点，不是「卡片好不好看」，而是：",[19,144,145],{},"建造动态若只躺在内页，回头客很难感到站点在实时演化。"," 把它请到首页，再借版式把「读一篇」和「进项目」分开，读者先感到",[19,148,149],{},"最近在动","，再决定",[19,152,153],{},"跟进哪条线",[15,155,156,157,160],{},"若你也在做个人站或小产品站，不妨问自己：",[19,158,159],{},"有时效的那部分更新，新访客和回头客分别能在哪一层看见？"," 能看见，才谈得上「活的」。",{"title":162,"searchDepth":163,"depth":163,"links":164},"",3,[165,167,168,169],{"id":13,"depth":166,"text":13},2,{"id":59,"depth":166,"text":60},{"id":85,"depth":166,"text":86},{"id":139,"depth":166,"text":139},"2026-04-06","有时效性的建造记录都躺在创造日志内页里，常来的读者若不去点，几乎感觉不到这些网站还在迭代。我把跨项目的最新演化拎到首页，再顺手整理了卡片层级和版式，让「活着的站点」一眼能读到。",false,"md",[175,178,181,184],{"q":176,"a":177},"为什么要把最新演化放到首页？","有时效性的更新如果只躺在各项目的创造日志列表里，回头客逛首页时看不到时间线，很容易觉得站点是静态的。把按时间汇总的最新几篇提到首页，扫一眼就能感到这些站还在长、还在改，和 Build in Public 想传递的「活的建造」一致。",{"q":179,"a":180},"首页上怎么区分「一篇演化」和「整个项目」？","上面一排是跨项目的单篇日志卡片，点进去读某次建造故事；下面一排是项目入口，点进去看该项目的全部演化与时间线。样式和标题层级拉开后，先读动机再进项目，不会和「进项目主页」混成一件事。",{"q":182,"a":183},"演化卡片里为什么把项目名称放在最下面？","读者先关心这次迭代讲了什么，项目名是归属信息。标题、摘要、日期在上，底部分隔线后再放小号的项目 logo 与名称链接，主路径是读文章，想进项目时间线再点辅助行。",{"q":185,"a":186},"头图和标题样式做了哪些配套？","头图用固定比例裁切，避免竖图把同一行卡片撑得高低不一。区块主标题用大字衬线加短装饰线，下面的「最新演化」「创造项目」用无衬线子标题，和教学系列、最新思考的主标题风格对齐，首页各板块读起来是同一套节奏。",{},true,"\u002Fbuilds\u002Fmofanx\u002F2026-04-06-homepage-evolution-card-information-hierarchy","mofanx",7,{"title":6,"description":171},[194,195,196,197,198,199,200],"首页展示建造动态","创造日志首页曝光","Build in Public 回头客","独立站点产品迭代感知","内容站信息架构","演化卡片设计","Nuxt 个人站","builds\u002Fmofanx\u002F2026-04-06-homepage-evolution-card-information-hierarchy","建造记录若只放在 builds 内页，常来的读者不主动点进去，很难感知站点仍在实时演化。把跨项目最新演化提到首页「莫烦创造」区块，并区分文章卡与项目卡、固定头图与标题层级，让首页先回答「最近改了什么」，再谈进哪个项目。",[204,205],"独立开发","产品思考",null,"eU7D5rP7gaH5iTUBfaiwqYb9oePWdHwMLdt-xtVhLkA",{"id":209,"title":210,"body":211,"date":369,"description":370,"draft":172,"extension":173,"faq":371,"meta":384,"navigation":188,"path":385,"project":190,"readingTime":386,"seo":387,"seoKeywords":388,"stem":396,"summary":397,"tags":398,"updated":206,"__hash__":399},"builds\u002Fbuilds\u002Fmofanx\u002F2026-04-04-project-link-and-evolution-number.md","当陌生人开始读你的创造日志",{"type":8,"value":212,"toc":361},[213,216,219,225,228,231,234,237,243,249,252,255,258,261,264,267,273,276,282,285,288,294,297,300,306,312,315,318,340,343,346,352,355,358],[11,214,215],{"id":215},"搜索引擎带来了陌生人",[15,217,218],{},"创造日志写了快二十篇了。最近翻 Google Search Console，发现有一些搜索流量直接落到了创造日志的文章页上。",[15,220,221,222],{},"这是好事。但紧接着我意识到一个问题：",[19,223,224],{},"这些读者不认识我，也不知道文章里讲的项目在哪。",[15,226,227],{},"对我来说，文章里提到 metool.online，我当然知道它是什么。但换个视角想，一个搜索\"工具站 SEO 优化\"然后点进来的陌生人，读完文章的反应可能是：\"这个工具站听起来不错，我去看看\"，然后环顾四周，发现页面上没有任何跳转入口。",[15,229,230],{},"这不是内容的问题，是页面动线的盲区。",[11,232,233],{"id":233},"给陌生人一个入口",[15,235,236],{},"解决方案很直接：在文章页的两个关键位置加上项目入口。",[15,238,239,242],{},[19,240,241],{},"头部","，在日期、阅读时间这行元信息的末尾加了项目名称链接。读者还没开始读正文，就能看到这篇文章讲的是哪个项目，好奇的人可以直接点过去。",[15,244,245,248],{},[19,246,247],{},"尾部","，在前后日志导航的上方放了一个带项目 logo 的 CTA 条。不是信息量很大的卡片，而是一句简单的引导：\"觉得有意思？前往体验\"。读到这里的人已经了解了背景，只需要一个行动入口。",[15,250,251],{},"两个位置服务两种阅读行为：扫一眼就走的人用头部，认真读完的人用尾部。",[11,253,254],{"id":254},"一个被忽略的数字",[15,256,257],{},"做入口的时候，我重新审视了\"演化次数\"这个数据。",[15,259,260],{},"演化次数记录的是一个项目被打磨了多少次。对于 Build in Public 来说，这可能是最重要的一个数字：它直接传递了\"这个项目是活的，还是做完就扔了\"。",[15,262,263],{},"但之前，这个数字藏得很深。",[15,265,266],{},"首页的项目卡片上，它被包在一句\"查看 5 次演化思考\"的文案里，是辅助信息，不是主角。",[15,268,269],{},[123,270],{"alt":271,"src":272},"改版前的首页卡片","\u002Fb\u002Fmofanx\u002Fbuild-card-before.png",[15,274,275],{},"改版后，我把数字从文案里提了出来，用大号渐变色独占卡片右侧。不需要读文字，扫一眼就知道这个项目迭代了多少次。",[15,277,278],{},[123,279],{"alt":280,"src":281},"改版后的首页卡片","\u002Fb\u002Fmofanx\u002Fbuild-card-after.png",[11,283,284],{"id":284},"从卡片到项目页",[15,286,287],{},"首页卡片改完，效果很好。但点进项目页之后，同样的数据缩回了一个小标签，和状态、链接挤在一行里，视觉权重几乎为零。",[15,289,290],{},[123,291],{"alt":292,"src":293},"改版前的项目页头部","\u002Fb\u002Fmofanx\u002Fproject-header-before.png",[15,295,296],{},"这种断层感很明显：卡片上\"13\"是主角，进了项目页\"13\"就消失了。",[15,298,299],{},"所以项目页也做了同样的处理。演化次数被提到头部右侧，用大号渐变数字 + \"次演化\"标签展示，和左侧的项目信息用一条竖线自然分隔。",[15,301,302],{},[123,303],{"alt":304,"src":305},"改版后的项目页头部","\u002Fb\u002Fmofanx\u002Fproject-header-after.png",[15,307,308,309],{},"从卡片到项目页，同一个数字、同一套视觉语言，不再断层。这就是视觉锤的作用：",[19,310,311],{},"让最重要的信息获得最高的视觉权重，并且在所有页面上保持一致。",[11,313,314],{"id":314},"几个小细节",[15,316,317],{},"顺手优化了时间线卡片的几个细节：",[319,320,321,328,334],"ul",{},[322,323,324,327],"li",{},[19,325,326],{},"封面图贴边","：去掉了图片的最大高度限制，让封面图上下都贴紧卡片边缘，由卡片圆角统一裁切",[322,329,330,333],{},[19,331,332],{},"移动端省空间","：隐藏了\"阅读详情\"文字，卡片更紧凑",[322,335,336,339],{},[19,337,338],{},"卡片限高","：加了整体最大高度，防止长图把卡片撑得过高",[15,341,342],{},"小改动，合在一起让页面更舒服了。",[11,344,345],{"id":345},"视角变了",[15,347,348,349],{},"这次迭代让我想明白一件事：",[19,350,351],{},"Build in Public 的页面，不能只考虑\"写给自己看\"。",[15,353,354],{},"搜索引擎带来了新读者，他们不了解你的项目背景，不知道产品在哪，甚至不确定你是谁。页面上的每一个设计决策，都应该同时服务老读者和第一次来的陌生人。",[15,356,357],{},"项目入口解决的是\"陌生人找不到路\"，演化数字解决的是\"陌生人感受不到生命力\"。",[15,359,360],{},"小改动，但看问题的视角变了。",{"title":162,"searchDepth":163,"depth":163,"links":362},[363,364,365,366,367,368],{"id":215,"depth":166,"text":215},{"id":233,"depth":166,"text":233},{"id":254,"depth":166,"text":254},{"id":284,"depth":166,"text":284},{"id":314,"depth":166,"text":314},{"id":345,"depth":166,"text":345},"2026-04-04","搜索引擎带来了不认识你的读者。他们找不到项目入口，感受不到项目的生命力。我重新设计了文章页的入口动线，然后把演化次数从一个不起眼的小标签，变成了页面上最醒目的数字。",[372,375,378,381],{"q":373,"a":374},"为什么要在创造日志的文章页加项目链接？","从搜索引擎来的读者不了解项目背景，读完文章后想看看项目本身却找不到入口。在文章头部元信息行加了项目名称链接，尾部加了带 logo 的 CTA 引导条，让读者在任何阅读阶段都能一键跳转。",{"q":376,"a":377},"为什么要把演化次数做成大号数字？","演化次数代表一个项目被打磨了多少次，是传递项目生命力的核心指标。之前它只是一个小标签，视觉权重几乎为零。升级为大号渐变数字后，读者第一眼就能感受到'这个项目迭代了十几次'，数字本身变成了视觉锤。",{"q":379,"a":380},"首页卡片和项目页的演化数字是怎么统一设计的？","首页项目卡片先改版，把数字从'查看 N 次演化思考'的文案中提出来，用大号渐变数字独占卡片右侧。然后项目 Timeline 页跟进，用同样的渐变数字 + 竖线分隔的布局，保持视觉一致性。",{"q":382,"a":383},"这次还做了哪些细节优化？","时间线卡片去掉了图片的最大高度限制，让封面图上下贴边自然填满；移动端隐藏了'阅读详情'文字以节省空间；卡片整体加了限高防止长图撑开布局。小改动，但让页面更紧凑舒服。",{},"\u002Fbuilds\u002Fmofanx\u002F2026-04-04-project-link-and-evolution-number",4,{"title":210,"description":370},[389,390,391,392,393,394,395],"Build in Public 页面设计","创造日志用户动线","文章项目外链设计","演化次数视觉设计","独立开发者站点优化","搜索引擎用户体验","时间线页面迭代","builds\u002Fmofanx\u002F2026-04-04-project-link-and-evolution-number","搜索引擎带来了不认识你的读者，他们读完创造日志后找不到项目入口，也感受不到项目被反复打磨的生命力。通过在文章头部和尾部增加项目入口，并将演化次数从 inline 小标签升级为大号渐变数字视觉锤，让页面同时服务老读者和第一次来的陌生人。",[204,205],"v_3bJHpiWXSyofyIM44kKoJZBGMoAk1NSsoAOm8VTG0",{"id":401,"title":402,"body":403,"date":474,"description":475,"draft":172,"extension":173,"faq":476,"meta":489,"navigation":188,"path":490,"project":190,"readingTime":163,"seo":491,"seoKeywords":492,"stem":500,"summary":501,"tags":502,"updated":206,"__hash__":503},"builds\u002Fbuilds\u002Fmofanx\u002F2026-03-31-timeline-card-thumbnail.md","给创造日志的时间线加上封面图",{"type":8,"value":404,"toc":468},[405,408,411,414,420,424,427,433,436,440,443,446,452,455,459,462,465],[11,406,407],{"id":407},"时间线像在看目录",[15,409,410],{},"创造日志的时间线页面上线后，我每次回去翻都觉得少了点什么。",[15,412,413],{},"所有卡片长得几乎一样：一个日期、一行标题、两行描述。从上往下扫，每张卡片的视觉权重完全相同，很难快速区分\"这篇写的是什么\"。像在看一份目录，而不是在浏览一段开发历程。",[15,415,416,417,56],{},"问题很明显：",[19,418,419],{},"缺视觉锚点",[11,421,423],{"id":422},"让文章自己长出封面","让文章自己\"长出\"封面",[15,425,426],{},"我不想手动给每篇文章设置一张封面图。因为大多数创造日志里本来就有截图，讲 metool 的有工具截图，讲 mofanx 的有页面截图。",[15,428,429,430],{},"所以做了一个很简单的事：",[19,431,432],{},"让程序自动从文章正文里提取第一张图片，作为卡片的封面。",[15,434,435],{},"写完文章，封面就自动有了。零额外工作量。",[11,437,439],{"id":438},"贴边不贴邮票","贴边，不贴邮票",[15,441,442],{},"第一版把图片放在卡片右侧，加了圆角和边框，尺寸也不大。看起来像一张邮票贴在卡片上，和内容有距离感。",[15,444,445],{},"调整后，让图片直接贴紧卡片的右侧边缘，上下也顶满，利用卡片自身的圆角自然裁切。左边是文字，右边是图片，形成一个自然的分区。",[15,447,448],{},[123,449],{"alt":450,"src":451},"Timeline 卡片加上封面图后的效果","\u002Fb\u002Fmofanx\u002Ftimeline-thumbnail.png",[15,453,454],{},"没有图片的文章卡片会自然降级为纯文字布局，不会出现空白。",[11,456,458],{"id":457},"小改动大不同","小改动，大不同",[15,460,461],{},"代码量很小，但浏览体验的变化是立竿见影的。",[15,463,464],{},"之前的时间线从头到尾全是文字，想找某篇日志只能逐行读标题。现在扫一眼图片就知道哪篇是哪篇：有工具截图的是 metool 迭代，有页面截图的是 mofanx 改版，有数据图的是 SEO 优化。",[15,466,467],{},"有时候决定体验好不好的，就是这种小细节。",{"title":162,"searchDepth":163,"depth":163,"links":469},[470,471,472,473],{"id":407,"depth":166,"text":407},{"id":422,"depth":166,"text":423},{"id":438,"depth":166,"text":439},{"id":457,"depth":166,"text":458},"2026-03-31","Timeline 卡片只有文字，浏览起来像看目录。从文章正文中自动提取第一张图片作为缩略图，让时间线有了视觉锚点。",[477,480,483,486],{"q":478,"a":479},"为什么要给时间线卡片加封面图？","纯文字的卡片浏览起来像在看目录，所有条目视觉权重相同，缺少区分度。加上封面图后，读者扫一眼就能通过图片快速判断这篇日志写的是什么，缩短了从'看到标题'到'决定是否点进去'的认知路径。",{"q":481,"a":482},"封面图是从哪来的？需要手动设置吗？","不需要手动设置。程序会自动从每篇文章正文中提取第一张图片作为封面图。因为大多数创造日志里本来就有截图，所以不用额外做任何事，写完文章封面图就自动有了。没有图片的文章会自然降级为纯文字布局，不会出现空白。",{"q":484,"a":485},"这个改动效果怎么样？","效果很明显。改之前，时间线从头到尾全是文字，像一份流水账清单。改之后，每张卡片都有了独特的视觉标识，读者扫一眼就知道哪篇讲的是什么。视觉锚点让浏览从'逐行阅读'变成了'快速扫描'。",{"q":487,"a":488},"封面图的布局是怎么设计的？","图片贴紧卡片的右侧和上下边缘，利用卡片自身的圆角自然裁切，和左侧的文字区域形成清晰分区。这样图片像是卡片的一部分而不是'贴上去的装饰'，视觉上更整体。",{},"\u002Fbuilds\u002Fmofanx\u002F2026-03-31-timeline-card-thumbnail",{"title":402,"description":475},[493,494,495,496,497,498,499],"创造日志时间线设计","Build in Public 页面优化","卡片封面图自动提取","时间线视觉体验","Timeline UI 设计","文章缩略图自动生成","内容浏览体验优化","builds\u002Fmofanx\u002F2026-03-31-timeline-card-thumbnail","创造日志的时间线卡片原本只有文字，浏览起来像看目录。让程序自动从每篇文章中提取第一张图片作为封面，时间线瞬间有了生命力。一个很小的改动，但对浏览体验的影响立竿见影。",[204,205],"trkpOPzMUiuMEU1wmJ2VVoXqHUuW68n7K76jB9Hj3NQ",{"id":505,"title":506,"body":507,"date":613,"description":614,"draft":172,"extension":173,"faq":615,"meta":628,"navigation":188,"path":629,"project":190,"readingTime":386,"seo":630,"seoKeywords":631,"stem":639,"summary":640,"tags":641,"updated":206,"__hash__":642},"builds\u002Fbuilds\u002Fmofanx\u002F2026-03-27-three-content-types.md","引入三种内容形态：教学、创造、思考",{"type":8,"value":508,"toc":607},[509,512,521,524,527,530,536,539,542,545,566,569,589,592,595,601,604],[11,510,511],{"id":511},"起因",[15,513,514,515,520],{},"在上一篇日志",[516,517,519],"a",{"href":518},"\u002Fbuilds\u002Fmofanx\u002F2026-03-24-content-first-strategy","《从围绕产品做内容，到围绕内容做产品》","里，我确定了\"围绕内容做产品\"的思路。既然内容是核心，那 mofanx 站点本身就得是一个优秀的内容产品。",[15,522,523],{},"但当时站点只有一种内容形态——按分类组织的独立文章。对于一个想做 Build in Public 的独立开发者来说，这远远不够。",[11,525,526],{"id":526},"旧版长什么样",[15,528,529],{},"这是改版前 mofanx 的首页：",[15,531,532],{},[123,533],{"alt":534,"src":535},"mofanx 旧版首页 — 只有分类文章一种内容形态","\u002Fb\u002Fmofanx\u002Fversion2026-03-20.png",[15,537,538],{},"所有内容都是独立文章，按分类平铺。它能承载\"思考\"，但无法表达\"我在教什么\"和\"我在做什么\"。",[11,540,541],{"id":541},"三种内容形态",[15,543,544],{},"我把 mofanx 重构为三种内容形态：",[546,547,548,554,560],"ol",{},[322,549,550,553],{},[19,551,552],{},"教学"," — 结构化的学习系列，按章节组织，适合系统性输出方法论",[322,555,556,559],{},[19,557,558],{},"创造"," — Build in Public 的实践记录，按时间线展示，让读者看到真实的开发过程",[322,561,562,565],{},[19,563,564],{},"思考"," — 原有的独立文章，按分类组织，承载碎片化的洞察和反思",[15,567,568],{},"一个独立开发者的 IP 站点，需要覆盖三个维度：",[319,570,571,577,583],{},[322,572,573,576],{},[19,574,575],{},"我在教什么"," → 教学系列",[322,578,579,582],{},[19,580,581],{},"我在做什么"," → 创造日志",[322,584,585,588],{},[19,586,587],{},"我在想什么"," → 思考文章",[11,590,591],{"id":591},"新版的样子",[15,593,594],{},"改版后的首页，三种形态各有入口：",[15,596,597],{},[123,598],{"alt":599,"src":600},"mofanx 新版首页 — 教学、创造、思考三种形态并存","\u002Fb\u002Fmofanx\u002Fversion2026-03-27.png",[15,602,603],{},"导航从单一的\"分类\"扩展为\"教学、创造、思考、关于\"四个入口，首页也按优先级依次展示教学系列、创造日志和最新思考。",[15,605,606],{},"这篇日志本身，就是用新的创造日志形态写的第一批内容。",{"title":162,"searchDepth":163,"depth":163,"links":608},[609,610,611,612],{"id":511,"depth":166,"text":511},{"id":526,"depth":166,"text":526},{"id":541,"depth":166,"text":541},{"id":591,"depth":166,"text":591},"2026-03-27","为 mofanx 站点引入 Build in Public 创造日志和教学系列两种新内容形态，让站点从单一文章进化为完整的内容平台。",[616,619,622,625],{"q":617,"a":618},"为什么个人站点需要多种内容形态？","单一文章形态只能表达'我在想什么'，但一个独立开发者的 IP 站点需要覆盖三个维度：教学（我在教什么）、创造（我在做什么）、思考（我在想什么）。三种形态各有不同的组织逻辑——教学按章节、创造按时间线、思考按分类——对读者来说更容易找到想要的内容。",{"q":620,"a":621},"Build in Public 创造日志具体记录什么内容？","创造日志记录每个项目的真实开发过程，包括：策略决策（为什么做这个选择）、技术实现（怎么解决具体问题）、阶段性成果（做到了什么程度）、反思复盘（哪里可以改进）。按时间线倒序排列，读者可以看到一个项目从 0 到 1 的完整演变。",{"q":623,"a":624},"mofanx 站点从旧版到新版改了哪些结构？","旧版只有分类文章一种内容形态，首页按分类平铺所有文章。新版引入三种内容形态后，首页重新组织为四个区域：Hero 个人介绍、教学系列卡片（带封面图）、创造日志时间线、最新思考文章。导航也从单一的'分类'扩展为'教学、创造、思考、关于'四个入口。",{"q":626,"a":627},"用什么技术实现多种内容形态的管理？","基于 Nuxt 4 + @nuxt\u002Fcontent v3 的多 collection 功能。在 content.config.ts 中定义三个独立的 schema（articles、tutorials、builds），每种内容有自己的目录、Front Matter 字段和页面路由。所有元数据配置集中在 app\u002Fdata\u002F 目录下，新增内容只需写 Markdown + 在配置文件中注册。",{},"\u002Fbuilds\u002Fmofanx\u002F2026-03-27-three-content-types",{"title":506,"description":614},[632,633,634,635,636,637,638],"个人IP站点架构","Build in Public 实践","内容形态设计","独立开发者内容平台","Nuxt Content 多集合","教学系列网站","创造日志时间线","builds\u002Fmofanx\u002F2026-03-27-three-content-types","将 mofanx 从单一文章站点重构为教学、创造、思考三种内容形态并存的平台，用 Build in Public 创造日志记录过程，用结构化教学系列沉淀方法论，用分类文章承载独立思考。",[204,205],"_hIAaVfLSaosHG5xV5Hv7Z49r2J9ON6_WwJLGIbYEYo",{"id":644,"title":645,"body":646,"date":807,"description":808,"draft":172,"extension":173,"faq":809,"meta":822,"navigation":188,"path":518,"project":190,"readingTime":823,"seo":824,"seoKeywords":825,"stem":833,"summary":834,"tags":835,"updated":206,"__hash__":836},"builds\u002Fbuilds\u002Fmofanx\u002F2026-03-24-content-first-strategy.md","从围绕产品做内容，到围绕内容做产品",{"type":8,"value":647,"toc":799},[648,651,654,668,671,674,677,683,689,692,696,699,710,715,718,722,725,739,745,748,774,777,780,783,786,793,796],[11,649,650],{"id":650},"一个让我反思的现象",[15,652,653],{},"最近发生了一件事，让我不得不重新审视自己的策略。",[15,655,656,657,663,664,667],{},"我花了大量精力做了一个产品 —— ",[516,658,662],{"href":659,"rel":660},"https:\u002F\u002Fwhoamiagent.com",[661],"nofollow","whoamiagent.com","。它的核心想法是：",[19,665,666],{},"一份身份档案，同步到所有 AI Agent","。我觉得这个需求很真实，自己每天都在用，产品也确实好用。",[15,669,670],{},"但上线之后，市场反馈平平。",[15,672,673],{},"而另一个同性质的产品 mem9，在我之后发布，却迅速获得了大量关注。",[11,675,676],{"id":676},"问题出在哪里",[15,678,679,680,56],{},"不是产品不好，而是",[19,681,682],{},"没人知道你做了这个产品",[15,684,685,686,56],{},"作为独立开发者，我犯了一个经典错误：",[19,687,688],{},"先闷头做产品，做完了再想怎么让人知道",[15,690,691],{},"这就像在沙漠里开了一家米其林餐厅 —— 菜做得再好，没有路过的人。",[11,693,695],{"id":694},"新策略围绕内容做产品","新策略：围绕内容做产品",[15,697,698],{},"反过来想，如果我先有影响力，先有读者和关注者，那么：",[546,700,701,704,707],{},[322,702,703],{},"做产品之前，可以先验证想法",[322,705,706],{},"做产品的过程，本身就是内容",[322,708,709],{},"产品上线时，自带第一批用户",[15,711,712],{},[19,713,714],{},"内容 → 影响力 → 产品 → 反馈 → 更好的内容",[15,716,717],{},"这是一个正向飞轮。",[11,719,721],{"id":720},"build-in-public-是桥梁","Build in Public 是桥梁",[15,723,724],{},"Build in Public 恰好是连接「内容」和「产品」的桥梁：",[319,726,727,730,733,736],{},[322,728,729],{},"分享我在做什么 → 积累关注",[322,731,732],{},"展示思考过程 → 吸引同频的人",[322,734,735],{},"公开遇到的问题 → 获得社区帮助",[322,737,738],{},"记录每一步进展 → 倒逼自己思考",[15,740,741,742,56],{},"重点不是产品本身，而是",[19,743,744],{},"做产品的过程和思考",[11,746,747],{"id":747},"具体怎么做",[546,749,750,756,762,768],{},[322,751,752,755],{},[19,753,754],{},"mofanx.com 作为内容中心"," — 所有思考、教学、创造日志都沉淀在这里",[322,757,758,761],{},[19,759,760],{},"公众号做分发"," — 每篇新内容同步到公众号",[322,763,764,767],{},[19,765,766],{},"创造日志做连接"," — 用 Build in Public 的方式，把产品开发过程公开",[322,769,770,773],{},[19,771,772],{},"教学做深度"," — 用系统化的教学内容建立专业形象",[15,775,776],{},"先有内容，先有影响力，产品自然会找到它的用户。",[11,778,779],{"id":779},"心态转变",[15,781,782],{},"说实话，这个转变对我来说不容易。",[15,784,785],{},"作为工程师，我习惯了「做东西」的满足感。而「写内容」总感觉不如「写代码」来得实在。",[15,787,788,789,792],{},"但我逐渐意识到：",[19,790,791],{},"在 AI 时代，好的想法比好的执行更稀缺","。AI 可以帮你写代码、做设计、跑测试，但它不能替你思考、替你有洞察。",[15,794,795],{},"把想法和洞察分享出去，才是独立开发者最大的竞争力。",[15,797,798],{},"从今天开始，我要认真做内容了。",{"title":162,"searchDepth":163,"depth":163,"links":800},[801,802,803,804,805,806],{"id":650,"depth":166,"text":650},{"id":676,"depth":166,"text":676},{"id":694,"depth":166,"text":695},{"id":720,"depth":166,"text":721},{"id":747,"depth":166,"text":747},{"id":779,"depth":166,"text":779},"2026-03-24","一次策略转向的思考：先积累影响力再做产品，而不是先做产品再找用户。Build in Public 是连接两者的桥梁。",[810,813,816,819],{"q":811,"a":812},"独立开发者应该先做产品还是先做内容？","建议先做内容。没有影响力的产品就像沙漠里的餐厅——做得再好没人知道。先通过内容积累读者和关注者，做产品时可以提前验证想法、过程本身就是内容素材、上线时自带第一批用户，形成内容→影响力→产品→反馈的正向飞轮。",{"q":814,"a":815},"什么是 Build in Public？对独立开发者有什么用？","Build in Public 是公开分享产品开发过程的策略，包括思考、决策、遇到的问题和进展。它是连接'内容'和'产品'的桥梁：分享过程积累关注、展示思考吸引同频的人、公开问题获得社区帮助、记录进展倒逼自己深度思考。重点不是产品本身，而是做产品的过程和洞察。",{"q":817,"a":818},"独立开发者做了好产品但没人用怎么办？","这是典型的'先做产品再找用户'的困境。解决方案是策略转向：1）把产品开发过程公开，用 Build in Public 的方式积累关注；2）围绕产品背后的思考写深度内容，建立专业形象；3）用多渠道分发（个人网站+公众号等）扩大触达面；4）让内容先行，让产品跟着影响力自然增长。",{"q":820,"a":821},"AI 时代独立开发者最大的竞争力是什么？","是独特的想法和洞察，而不是执行能力。AI 可以帮你写代码、做设计、跑测试，但不能替你思考和产生洞见。把想法和洞察通过内容分享出去，才是 AI 时代独立开发者最大的护城河。好的想法比好的执行更稀缺。",{},5,{"title":645,"description":808},[826,827,828,829,830,831,832],"独立开发者内容策略","Build in Public","内容驱动产品","个人IP影响力","独立开发冷启动","内容创业飞轮","先做内容还是先做产品","builds\u002Fmofanx\u002F2026-03-24-content-first-strategy","独立开发者先闷头做产品再找用户是经典陷阱，正确路径是先用内容积累影响力，再让产品自带首批用户——内容→影响力→产品→反馈→更好的内容，形成正向飞轮。",[205,204],"ay735yzPUTwu25MikGEbmLKjJXktmJz_9PVZQ5cfM0I",{"id":838,"title":839,"body":840,"date":899,"description":900,"draft":172,"extension":173,"faq":901,"meta":914,"navigation":188,"path":915,"project":190,"readingTime":163,"seo":916,"seoKeywords":917,"stem":923,"summary":924,"tags":925,"updated":206,"__hash__":927},"builds\u002Fbuilds\u002Fmofanx\u002F2026-03-20-site-launch.md","从莫烦Python到莫烦无限：为什么我需要一个新站点",{"type":8,"value":841,"toc":894},[842,846,855,858,865,869,872,875,879,882,885],[11,843,845],{"id":844},"mofanpy-完成了它的使命","mofanpy 完成了它的使命",[15,847,848,849,854],{},"我有一个叫 ",[516,850,853],{"href":851,"rel":852},"https:\u002F\u002Fmofanpy.com",[661],"莫烦Python"," 的网站。是我读书时候开始做的。那时候 AI 和 Python 刚火起来，我把自己学到的东西整理成教程，分享给有需要的人。这个网站陪了我很多年，也帮到了不少朋友。",[15,856,857],{},"但工作快十年了，我的关注点早已不只是 Python 教学。这些年在工作中积累了大量关于 AI 行业发展、产品设计、学习方法论、教育思考的沉淀，这些内容放在一个叫\"莫烦Python\"的站点下，怎么看都不太对。",[15,859,860,861,864],{},"我需要一个新的域名，一个新的空间。",[26,862,863],{},"mofan + x","——x 是未知，是可能性，是交叉和跨界。这更符合我现在的状态。",[11,866,868],{"id":867},"ai-coding-让重建变得可行","AI Coding 让重建变得可行",[15,870,871],{},"mofanpy 的技术架构已经很古老了，当年的前端方案放到今天看，改造成本比重建还高。",[15,873,874],{},"好在现在有了 AI Coding，建站这件事变得容易太多。我可以完全从零开始，用现代技术栈重新构建整个站点的逻辑和架构，而不是在旧框架上缝缝补补。这次选了 Nuxt 4 + @nuxt\u002Fcontent v3 + TailwindCSS v4 的组合，写作体验和内容管理都比以前好了一个量级。",[11,876,878],{"id":877},"公众号之外多一个触达你的节点","公众号之外，多一个触达你的节点",[15,880,881],{},"其实在建站之前，我从 2025 年底开始是在公众号上尝试分享这些工作以来的感悟和沉淀。但写了一段时间后发现，公众号的分发机制对新账号实在太不友好了。内容写得再好，没有初始流量池，就很难被看到。",[15,883,884],{},"我想要一个更符合自己内容组织逻辑的平台。文章之间可以互相关联，系列教程可以按结构呈现，读者可以按主题自由探索，而不是被算法决定看到什么。",[15,886,887,888,893],{},"所以 ",[516,889,892],{"href":890,"rel":891},"https:\u002F\u002Fmofanx.com",[661],"mofanx.com"," 上线了。它不是要替代公众号，而是在公众号之外，多一个与你们触达的节点。",{"title":162,"searchDepth":163,"depth":163,"links":895},[896,897,898],{"id":844,"depth":166,"text":845},{"id":867,"depth":166,"text":868},{"id":877,"depth":166,"text":878},"2026-03-20","mofanpy 承载了读书时代的分享，但工作近十年后，我需要一个新空间来安放 AI 时代的思考与沉淀。",[902,905,908,911],{"q":903,"a":904},"mofanx.com 和莫烦Python是什么关系？","莫烦Python（mofanpy.com）是作者读书时期创建的 AI 和 Python 教学网站。工作近十年后，关注点已远超 Python 教学，涵盖 AI 行业洞察、产品设计、学习方法论、教育思考等，因此创建了 mofanx.com 作为新的内容承载空间。",{"q":906,"a":907},"为什么不在莫烦Python的基础上改造而是重建？","mofanpy 的技术架构已经很古老，改造成本比重建还高。现在有了 AI Coding，从零建站变得容易很多，可以用 Nuxt 4 + @nuxt\u002Fcontent v3 + TailwindCSS v4 等现代技术栈重新构建，写作体验和内容管理比以前好了一个量级。",{"q":909,"a":910},"mofanx.com 会替代公众号吗？","不会替代，而是补充。公众号的分发机制对新账号不友好，内容难以被看到。mofanx.com 提供了一个自主掌控的平台：文章可以互相关联、系列教程按结构呈现、读者按主题自由探索，而不是被算法决定看到什么。",{"q":912,"a":913},"mofanx 中的 x 代表什么？","x 代表未知、可能性、交叉和跨界。作者的内容已经横跨 AI 洞察、产品创造、教育思考、学习方法论等多个领域，不再局限于某一个技术方向，x 更符合这种跨领域探索的状态。",{},"\u002Fbuilds\u002Fmofanx\u002F2026-03-20-site-launch",{"title":839,"description":900},[853,190,918,919,920,921,922],"个人网站搭建","AI Coding 建站","独立博客","Nuxt 4 内容站","个人IP站点","builds\u002Fmofanx\u002F2026-03-20-site-launch","莫烦Python已无法承载工作十年后的思考沉淀，借助 AI Coding 从零重建新站 mofanx.com，在公众号之外多一个自主掌控内容组织的触达节点。",[204,926],"AI 应用","PTov2bIT4YKSNJbAIivVVJAcOulPQuB5NBcArjxQlLw",{"id":5,"title":6,"body":929,"date":170,"description":171,"draft":172,"extension":173,"faq":1019,"meta":1024,"navigation":188,"path":189,"project":190,"readingTime":191,"seo":1025,"seoKeywords":1026,"stem":201,"summary":202,"tags":1027,"updated":206,"__hash__":207},{"type":8,"value":930,"toc":1013},[931,933,949,955,957,965,969,971,977,987,989,993,999,1001,1009],[11,932,13],{"id":13},[15,934,17,935,22,937,30,941,34,943,38,945,42,947],{},[19,936,21],{},[19,938,939,29],{},[26,940,28],{},[19,942,33],{},[19,944,37],{},[19,946,41],{},[19,948,45],{},[15,950,48,951,52,953,56],{},[19,952,51],{},[19,954,55],{},[11,956,60],{"id":59},[15,958,63,959,67,961,71,963,75],{},[19,960,66],{},[19,962,70],{},[19,964,74],{},[15,966,78,967,82],{},[19,968,81],{},[11,970,86],{"id":85},[15,972,89,973,93,975,97],{},[19,974,92],{},[19,976,96],{},[15,978,100,979,104,981,108,983,112,985,116],{},[19,980,103],{},[19,982,107],{},[19,984,111],{},[19,986,115],{},[15,988,119],{},[15,990,991],{},[123,992],{"alt":125,"src":126},[15,994,129,995,133,997],{},[26,996,132],{},[19,998,136],{},[11,1000,139],{"id":139},[15,1002,142,1003,146,1005,150,1007,56],{},[19,1004,145],{},[19,1006,149],{},[19,1008,153],{},[15,1010,156,1011,160],{},[19,1012,159],{},{"title":162,"searchDepth":163,"depth":163,"links":1014},[1015,1016,1017,1018],{"id":13,"depth":166,"text":13},{"id":59,"depth":166,"text":60},{"id":85,"depth":166,"text":86},{"id":139,"depth":166,"text":139},[1020,1021,1022,1023],{"q":176,"a":177},{"q":179,"a":180},{"q":182,"a":183},{"q":185,"a":186},{},{"title":6,"description":171},[194,195,196,197,198,199,200],[204,205],1775454695309]