充分利用

之前就想要好好写一篇关于Framer.ai的体验分享。

但这个事情，要从我受了Framer的“欺骗”开始说起。

开始了。

由于总是想做点什么网站展示我的各种AI作品也好，写点博客也好，我一直保留着几个自己喜欢的域名，甚至长期租用亚马逊AWS的服务器。但是因为各种杂事和拖延症，其实一直没怎么正经做。加上自己建站虽然不是不会，但对设计师来说搞后端甚至前端框架，都有点太难了，做了几个版本不满意或维护太累就继续拖延症，所以AWS的服务器相当于放在那里白花钱。

我是后知后觉者，由于离开设计圈有个几年了，之前其实不知道这个站。我是被它的AI功能吸引到Framer.ai的，那时他们率先推出AI建站，说句话就能做出网页来，就跑去试了试。

其实效果一般吧。

后来他们不知为啥也把这个功能越藏越深现在搞不好都下架了。

但当时知道了这个工具还不错，可以自己搭框架，和wordpress 6之后的编辑器差不多。

所以这并不算受骗，受骗是我终于不想烧AWS的空间了的时候。

上当了。

当时烦透了各种后端，其实我对后端兴趣又不大，就想着赶紧退了，找个现成的网站平台用用。

就重新回到了Framer。

用了一段后我觉得这东西挺好用，比wordpress体验要好，UI既精简又完善的转换了Web的Box结构，还有内置可多库关联的CMS和图片云存储，自带SSL证书，简直是我这种外行后端+半吊子前端+设计师的最佳搭档。

嚯？也能绑域名？虽然是收钱的，虽然乞丐版每月5欧也感觉不便宜，但比起亚马逊的空间来还是便宜多了。干脆买上一年……

然后就发现上当了。

原来他们的套餐策略很奇葩，很奇葩，乞丐版相当于别人的免费版，免费版约等于别人的至尊版……田忌赛马么？

简单来说，每月5欧年付含税75欧的套餐，虽然可以绑域名去水印，但是居然，只能做一个页面（外加404页面）！CMS也只限一个库！没有本地化！说白了你想拿来做博客都不能有阅读页！官方的说法是适合做landing page，也就是只能做个产品落地页。那CMS是干啥用呢？估计就是设计来当落地页上的新闻列表之类。

当时觉得这个冤啊，明明试用免费版的时候那么好，可以建好多个CMS库，页面创建也似乎是无限的，甚至项目都可以建无数个。咋交钱了反而降级这么多呢？（i注意这里说是无限无数，其实也有上限，但足够足够使用了）

当然也不能怪人家，所以“骗”是打引号的，自己当时没了解清楚就冲动消费了有啥办法？

只能自己扛了，尽可能研究怎样在一个页面上实现所需的功能，怎样在一个库里搞多层分类……

戴着枷锁跳舞当然很难，于是在更多的不理想和不满意之后——我终于……

想通了。

不就是水印嘛，Framer的水印只是在页面右下方很小一个LOGO，免费域名虽然是*.framer.website有点长，但因为用的人少，其实有很多的短子域名都还可以抢到。

所以如果你抛弃对域名和水印的执念，这就是一个免费建站的最好平台啊！

至少Framer的页面搭建体验是相当的好。

如果你熟悉Web页面的Box概念，以及层级嵌套之类的的逻辑，再熟悉模态窗口和样式及动态的话……（这要求不高吧？）……你会发现它们把W3C规范优化到了极简的地步，很多可以不用到的属性甚至连margin都被砍掉了。

同时他们又把复杂些的样式比如grid,shadow和backdrop blur之类的功能做到可视化，把样式和组件做成了资产，图片更是只要粘贴就可以了（虽然我也怀念Wordpress有而他没有的图片资产库）……你会发现开发者对web页面的架构真的想得很透。

而如果你不熟悉web基础，其实用用模板和官方模块，或像用word那样折腾摸索一下，也能很快达到相当不错的效果。

同时Framer对多终端的支持很好，桌面端稍做修改就直接可以变为平板和手机端界面。

更重要的，除了水印和域名之外，免费版似乎在功能和容量上都达到了最大值。（当然CMS总记录限1000条，本地化只限两种语言5000字，但这5000字不包含文章内容。）

图片上传数量似乎也是无限的，只要每张不超过5M，和Wordpress一样，可以可视化设置图片的填充模式、对齐和Ficial Point。

而且图片自带CDN，还没有CORS限制……所以我有时也会用Framer做图床，下面这个用Refly制作的网页就是使用了放在Framer中的图片。

[翻卡浏览]微信表情包作品汇总页

玩嗨了。

我终于放弃了Wordpress。

公平来说，Wordpress在6.0版以后也增加了响应式块状编辑器，改变了以前死模板加变量的老派做法。而且包含商店在内的插件多，生态更成熟一些。但是至少在我放弃它之前（大约去年中旬）编辑器的体验还是相当混乱的，估计一来可能是想做全，不舍得像Framer这样精简，另一方面也是为了适应已有的庞大生态产品。

如果不考虑收费服务（其实现在第三方收费平台接入应该也很方便，只是我还没具体研究），Framer是让我感觉搭建起来顺手更多的工具。以至于它最初吸引我的AI功能，现在看来本来就挺鸡肋的，没用也完全没有影响。

于是我入迷到了，每想到一个新主题，可能就会动手建一个网站（你可以在每个站的页底找到部分链接）。

是的，我知道要维护和推广好哪怕单个个人站其实也是很花成本的，这些站点就算做了以现在的流量时代也可能很少有人看，我又不是一个运营高手/兴趣者。但就当成是练手或网站本身就当成作品吧，体验那种成就感自爽一下，也不是不可以的吧？

不是不行的吧？没什么的吧？你管不着吧？你管得着吗？！

在Framer的生态里目前还有出售模板和组件的方式，只是我还没有完全准备好去做。

由于我的习惯是边玩边学，并不会从头看教程，在研究中我逐渐发现了很多“我希望有-但我本来以为没有-实际上却已经有了”的功能。比如跨站同步组件，比如内置变量，比如跨组件事件，比如自建代码组件……

我现在的计划已经较最初改变了很多，我打算用自己的模板搭建一系列网站矩阵，比如AI绘画的、AI音乐的、设计资源的、项目展示的，这些站点可以互相联通……对了，framer的免费站二级域名同样可以接入Google Adsense插广告，也开放了SEO必要的字段和header代码块之类。

现在唯一剩下的问题，就是之前“受骗”花了75大欧买的那个单页站了。

搞通了。

借着这个周末生病不想干别的的理由（但无代码的设计通常是我休养的方式之一），我决定想办法充分利用一下这个单页面站点。

不妨就直接把它变成纯导航站/作品展示站，只放各个免费站的链接就行了，虽然这种简单的页面自己写写也可以，但谁让钱已经花出去了呢？而且至少CDN还是香的，自己去搞多少也是个成本。

主站地址：CATxPAPA.com

首先设计为豆腐块式的Gird，然后应该有不同的权重，有的大块有的小块，都可以在CMS中设置数值再做为组件的变量输入。

每个块可以有不同的展示方式，比如图片、文字、视频，在Framer中都可以以Variant的变体形式放在同一个组件中，再用参数控制。

由于是导航站，CMS中的记录就不再放文章了，而是直接关链一个链接，链接到任何我想链的内容。

这些都没有什么难度，大概一晚上就搞定了。

最麻烦的是本地化多语言的情况。

乞丐版不支持多语言（甚至免费版还支持两种语言！奇葩！），而我却想要中英法三语该怎么办？

长话短说吧，在GPT的帮助下（其实帮助不大）参考官方文档（其实文档很草），我研究通了跨组件事件和变量控制，先用自嵌的代码获取用户的浏览语言，然后控制组件的自建变量。再从导航条的三个按钮导航到列表的三帧不同变体，每个变体显示不同的字段，就终于搞定了。

唯一不足的，是没法像免费站那样享用AI自动翻译的5000字，而是三个字段都要自己填。于是我再祭出飞书多维表格，从Framer中导出标题和简述CSV，先美化文字再翻译成三种语言，手动粘贴回去，有点麻烦。

以后有空再研究整体导入或同步的方法吧，感觉换用Notion或Google Sheets其实能搞定，因为Framer也支持用Notion或Google Sheets做为CMS来源，而Google的传统翻译在Sheets里的函数是免费的。

加速了。

音乐站 E.T Music 也好，图片站 CATxART 也好，包括这个博客也好，都是我在“早期"研究学习时建的，比较简单，结构也比较乱。

在这个周末我也做了统一化模板，从其中某一个站点创建的组件，可以直接嵌入到别的站点，而且可以同步更改，所以我把这些站的页头页尾形式先统一了，以后可能连展示模块也会统一起来。

在跑通了所有流程和有了简单模板之后，我用了两个小时就搭建了一个新的站点 超级喵 ，它将用来分享AI绘画中的零散技巧，比如收集来的或我独家的提示词，比如审美风格和关键词，比如MJ风格代码，都会以小片断内容和标签组织的形式列在这里。

不骗人，真的只用了两个小时，6月2日(大概)晚上8点到10点。

我又用了半个晚上的时间简单填了一点内容，就提交到Adsense审核了，然后一次通过，不管有没有人看，可以先放广告了。SEO什么的晚点再做也没啥。

你瞧，这样一来，是不是我相当于花了乞丐版的钱，得到了一个至尊版服务器的效果？

写完了。

喵爸文风的结尾特点就是没废话，不做总结，想总结请丢给AI或再读一遍。

如果你觉得本文对你有哪怕是一丁丁丁点启发帮助，或者单纯愿意发善心可怜可怜我，谢谢大佬请我一杯咖啡。

当然如果你不想的话，随手用微信打赏个红包砸死我也可以。

同时欢迎关注X @Tresmort “喵爸有毒”。

是的，我有毒。