Tips——将你从频繁的文案修改中解救出来

1 前言

转眼毕业工作一年零四个月了,又是很久不更新博客了,每次学到个新的东西或者在工作中做了个自己很满意的尝试,就想着写篇博客总结分享下吧,可是打开博客的那一刻却如同提笔忘字一样不知从何开始,纠结过后就放弃了。那这次又为何要写一篇呢?那就要提到今天的主题了——Tips(Documents Management),对就是文案管理,一个帮助你如何解决静态文案管理的方案,最近已经对外开源,感兴趣的小伙伴可以去github
一探究竟。那么接下来就要给大家来个深度剖析了,看看我们到底是怎么做的。

2 背景

作为FE,我想大家都有一个共同的体验“在代码功能上线后,因为一两句文案或提示信息描述不准确需要修改,修改后就要重新上线”,此时心里的感觉可以说是五味杂陈...,我们都知道线上无小事,上线并不是说打个包点击发布就可以了,必须要经过:本地测试、测试环境测试、预发环境测试、线上环境测试,每次上线操作这些流程都是必须要走的,就因为一句文案的修改无形中浪费了半个小时的时间,如果有个平台提供修改静态文案的功能,就可以帮助前端开发者来解决这一痛点。那么今天将向大家介绍,为了解决这一痛点,我们的Tips向大家所提供的功能,以及功能的设计实现。

3 Tips是什么

Tips是一个静态文案管理平台。用于修改Web页面的静态文案,支持文案国际化,并提供提示信息的UI展示。它的目的是解决前端开发者频繁的静态文案修改问题,避免因为简单的文案修改而发起复杂的上线流程。

4 Tips可以干什么

下面是一个简单的描述和演示,展现了接入文案管理平台后你的系统可以通过如下的方式去修改页面上的文案信息。

4.1 提示文案修改

有权限的用户可以看到,在页面的右下角有一个开关按钮,打开按钮页面上会出现编辑的红色按钮,点开按钮即可修改提示文案信息,提交保存后刷新页面即可看到修改后的内容。同时提示信息的容器UI展示也是平台提供。


提示修改
4.2 页面文案修改

页面内容文案的修改方式和提示信息修改一样,但是不同的是多了一个发布的操作,因为页面内容要比提示的要求更严格一些,修改后会直接影响用户的直接观感。所以这里我们对线上和线下环境做了区分,未发布前只可以在线下环境看到,去后台管理系统发布后线上即可同步。


页面内容文案修改
4.3 文案国际化

在演示中提供了中文和英文两个版本的语言,点击按钮可以看到不同语言内容的切换。


文案国际化

5 Tips是怎么做的

看到上面的简单介绍,或许你脑子里已经对这个功能有了自己的实现方案,那下面就看下我们是否想的一样呢~

5.1 设计架构图
设计架构图
5.2 详细设计
5.2.1 模块划分

由架构图可以平台划分为四个模块:

  • SDK:SDK作为平台和第三方平台连接的一个纽带,将管理平台和第三方平台连接在一起,以js文件的形式嵌入第三方平台,从Web-Server获取文案数据展示在第三方平台页面中,并提供可视化界面供产品和开发可直接在自己平台页面中修改文案内容;
  • Web-Server:Web接口层,提供文案数据的增删改查接口;
  • Web-UI:文案管理平台的管理界面,要接入的第三方平台的管理人员在此可将自己平台的文案管理接入我们的平台中,之后文案修改的操作可在此进行;
  • MongoDB:对各个接入平台的文案信息进行存储;
5.2.2 各模块的详细介绍

SDK

  • 产出形态:该模块最终打包为js文件,嵌入在第三方接入平台系统中;
  • 主要功能:将文案管理平台和获取文案内容,将内容显示在系统页面中,并提供UI界面供产品和开发可直接在自己系统中对文案进行修改,刷新页面后即可生效;
  • 具体实现:
    • 获取第三方平台传入接入时创建的系统的名称和当前登录的用户名,获取文案和数据以及对应的用户的权限;
    • 扫描页面中的HTML标签,带有特殊属性的则根据当前系统的语言和数据的类型显示不同形态的文案:鼠标悬浮提示、气泡提示、页面文案显示;
    • 根据用户创建的权限,判断用户是否有编辑修改权限;
    • 对于有权限的用户显示开关,打开打开可对文案内容进行修改,保存后如果是提示信息即刻就生效,页面直接显示的文案则发布后即可生效;

Web-Server

  • 主要功能:提供文案数据的增删改查接口;
  • 模块划分:
    • 服务管理:第三方接入平台的信息管理;
    • 文案信息管理:第三方接入平台的页面文案管理;

Web-UI

  • 主要功能:提供管理端的各种可视化操作;
    • 第三方平台信息的管理:包括新增、修改和权限管理;
    • 文案信息的管理:包括文案信息的新增、修改,以及屏蔽功能;

6 Tips的优点

上面讲了这么多关于如何实现的内容,相信大家对于我们做的是什么已经有了一个整体的印象,那么我们为什么要这么做呢?

如文章开头时讲的那个场景“简单的文案修改,直到上线发布check无误需要半个小时”,如果每天多做几次这样的事,其他的事情应该就不用做了,心里也是一万句。。。 如果这件事是谁提出来就让谁直接去修改岂不更好。

所以我们最大的优点就是:

  • 节约时间成本:省略审批发布流程,秒级修复线上错误内容;
  • 赋能:让非技术同学(运营或者产品、法务等,以下简称非技术同学)可以通过可视界面快捷的修改页面内容,而非之前的非技术同学提供文案,然后同步技术同学之后再去修改,这样沟通成本大大增加。所以我们在降低沟通成本的同学和释放了技术同学的时间。

7 结语

目前平台已经在公司多个内部平台使用,用于解决日常的文案修改,后续我们也会持续更新维护。如果看到这篇文章的你,将github上的demo跑起来了,欢迎评论留言,一起沟通交流。
Github:https://github.com/didi/tips
欢迎 fork & star

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,630评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,405评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,382评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,548评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,853评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,276评论 1 209
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,638评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,350评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,015评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,309评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,836评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,206评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,767评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,972评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,715评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,319评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,222评论 2 258

推荐阅读更多精彩内容