前言
先说一下,分享出来不是为了推广或者什么(还没做完),是单纯的遇到瓶颈了,想看看万能的 v 友有什么看法~
不好意思,项目也没有开源,本来是打算当一个产品去做的。不过后面如果干不下去了就开源了吧(还有一个原因是写得很屎,不好意思开源)。
链接在最下面 ~
项目截图
编辑页面
Dashboard
为啥做这个东西?
前不久瞎逛,看到有个接外包的网站写个静态页面收费五十一百的。就在想如果做个静态页面生成的网站应该还是有点市场的,并且也可以做成简历生成的。最主要的是自己想搞点东西出来当副业。
后来也看了市场上众多竞品,基本上都不提供下载功能(都得在他们网站发布访问),要么就是像 Ant Design Landing Page 那种面向开发者的下载下来是源码。
然后就想做一个能直接下载 html 的网站,也就做出来这么个东西了。
实现
底层的实现逻辑很简单,说白了就是配置一个 css 的对象,然后生成页面的时候再拿这组配置去渲染。
一开始实现的时候是直接用 vue ssr 的 api 直接生成 html 文件的,后面迭代多了一些事件和脚本要处理,还是直接依赖 vue 了(用的 vue 官方贴的 cdn )
页面结构上其实就是由多个 Section (固定宽度 100%)堆叠组成,然后再 Section 里面配置组件。
目前基础组件有容器组件(最主要的组件,使用 Flex 布局),文本,图片,媒体等等。
功能和吐槽
先说几个比较值得说的功能特点吧(自认为的)
- 免登录直接下载 html 文件 -- 改完直接点击右上角的 Download 就能下载可以直接打开的 index.html 文件,如果没有项目保存需求的话,不需要登录也可以的。(也有 github.io 、vercel 的配置指引)
- 组件配置联动 -- 复制组件的时候,默认两个组件是关联在一起的,也就是配置是公用一套的,也支持单组配置取消关联然后独立设置。
- 项目 /模板 /素材复用 -- Template/Section/Component 都能直接保存,然后复用。
- 多页 -- 多个页面其实就是多个 html ,Download 会直接下载全部页面的 zip ,跳转可以用 ./xxxx.html 跳转
- 支持双端配置 -- 一组配置支持双端共用和分开配置两种,一般都是先写好 pc 的,然后切移动端再做兼容处理,如果不是复杂的结果处理起来还是挺方便的(其实还支持 rem 和媒体查询,但是感觉不好用)。
接下来是吐槽
- 难用 -- 很难配,即使上手了会使用快捷键,配起来也很繁琐。而且因为层级遮挡等问题,有时候要选容器组件,得通过 Layers 树或者切换父子组件的方式去选中。
- 功能有限 -- 因为没法有灵活的 js 去控制,样式配置也只有一套。如果要给组件加个 Active 之类的状态和对应样式,就会很难做。(有想过要不要加 plugin 的方式去支持)
- 上手困难 -- 因为项目做完还没好好做引导,上手基本上是闷逼的。如果是开发者摸索摸索可能还能懂个一二三,如果是非开发者那基本用不了。
- 生成的页面不可维护 -- 生成的页面元素都是用内联样式,生成的 index.html 基本上不可读。如果要再加点东西会很困难。
想法
说到底,还是对自己项目的定位不清晰。一开始想做面对非开发者的,但是后面做着做着,发现非开发者根本用不了这套东西。但是开发者又不需要这种难用得要死的东西。
有点迷茫要做成什么样,因为确实不好用,我自己配模板都懒得配。
我个人想法是干脆这套配置就不直接开放出去了(当做一个额外功能),配置的工作留给自己用😭。然后再单独做一套工作流,例如可以直接配置「文本+图片」之类的形式,然后输出页面或者简历。
最后再贴体验链接
因为项目还没有做指引,直接上手可能会闷逼。估计还有些 bug ,目前还在开发中。
对了,无视那些付费计划,目前并没有计划。只是模板需要,和不想直接把自定义子域名的功能开放出去(维护服务器也要钱钱的( Ĭ ^ Ĭ )),所以先做了一套会员系统。
用户系统是直接用的 Logto ,登录注册流程都挺简单的。也可以直接使用测试账号 test ,密码 123456 体验。
