有权限的用户可以看到，在页面的右下角有一个开关按钮，打开按钮页面上会出现编辑的红色按钮，点开按钮即可修改提示文案信息，提交保存后刷新页面即可看到修改后的内容。同时提示信息的容器UI展示也是平台提供。
页面内容文案修改页面内容文案的修改方式和提示信息修改一样，但是不同的是多了一个发布的操作，因为页面内容要比提示的要求更严格一些，修改后会直接影响用户的直接观感。所以这里对线上和线下环境做了区分，未发布前只可以在线下环境看到，详情请戳这里。文案国际化在demo演示中提供了中文和英文两个版本的语言，点击按钮可以看到不同语言内容的切换。
如何查看demo安装node环境，版本v8及已上安装数据库mongodb，版本v4创建 tips 数据库启动项目：shstart.sh在浏览器打开localhost:8090--->点击新增项目--->创建项目，系统名：tips，多语言：中文和英文，提交保存--->点击导航栏的demo，跳到demo页可进行文案修改如何部署使用部署tips-web简单介绍：该模块是一个简单的Web层，提供文案数据的增删改查接口，即所有的UI操作接口都调用这里。在上面有提到有权限的用户才可以直接对文案进行编辑，所以平台涉及到权限控制的地方都需要用户信息，这里由于每个公司机构关于用户信息的管理都有自己的一套机制，所以需要使用者单独实现。实现完成后将服务部署即可。部署第一步：修改tips-web/src/config/index.js中的MongoDB数据地址，和真实服务的端口；第二步：将服务部署；第三步：启动服务，npmrunstart;tips-ui简单介绍：该模块为管理前端模块，在这里对接入平台的文案信息进行管理。同样也需要调用Web层的关于用户信息操作的接口，这部分需要自己单独实现。部署第一步：打包，npmrunbuild；第二步：将打包后的静态文件部署至nginx或其它静态文件服务；tips-sdk简单介绍：该模块是用webpack管理的一个jsSDK，我们在上面图片中看到的关于修改文案的操作都在此模块实现，该模块打包后的文件最终以CDN服务的形式引用在接入平台中。部署第一步：修改tips-sdk/src/config/index.js中的server地址，改为tips-web服务的地址；第二步：我们使用webpack对SDK进行管理，在webpack.config.js文件中写了打包后的路径，你只用去修改里面的路径，即可打包至你自己的目录；第三步：将打包后的sdk进行部署到CDN服务；表单字段解释：系统名：要接入的系统的唯一标识；域名：要接入系统的线上域名；管理员：可以对系统文案进行修改的成员；多语言：创建系统需要支持的语言版本，每个语言可以设置不同的管理员；第二步：引用SDK在接入系统中引入SDK文件，并设置在创建系统时填写的系统名，放在中（存在文档修改，为了避免页面空白，如果系统中不使用文档修改功能，可以不放在中）。代码如下：<scripttype="text/javascript"data-service="xxx"src="/tips.js"></script>参数解释：data-service：此处传入第一步创建时填写的系统唯一标识；src：此处地址为tips-sdk打包后静态文件的部署地址；第三步：调用SDK在接入系统的前端代码中调用初始化函数，传入当前系统登录用户名和语言类型，代码如下：try{if(window.Tips&&Object.prototype.toString.call(window.Tips.init)==='[objectFunction]'){window.Tips.init(username,language);}else{document.addEventListener("TipsSDKReady",function(){window.Tips.init(username,language);},false);}}catch(e){console.log(e);}可选语言的标识：语言key中文(中国)zh_CN英文(澳大利亚和新西兰)en_US日文ja_JP西班牙文(墨西哥)es_MX葡萄牙文(巴西)pt_BR第四步：埋点在接入系统的前端代码中埋点，以前端页面路由为维度，每个路由下埋点的id不能重复。<spandata-tip-id="demo-1"class="btn">按钮</span><spandata-tip-id="demo-2">tips是一个静态文案管理系统。用于修改Web端页面的静态文案，支持文案国际化，并提供提示信息的UI展示。</span>第五步：切换语言调用切换语言代码如下：try{window.Tips.changeLanguage(language);}catch(e){console.log(e);} 已上涉及到代码的都可查看demo中如何使用,其它一些附加功能请看这里
评论