Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iuap design官网中的页面修改及测试 #122

Open
syygithub opened this issue Aug 27, 2016 · 0 comments
Open

iuap design官网中的页面修改及测试 #122

syygithub opened this issue Aug 27, 2016 · 0 comments

Comments

@syygithub
Copy link

iuap design官网中的页面修改及测试

neoui模块

html修改

官网的html文件是由gitbook从md文件自动生成的html文件,生成后的html文件放在iuap-design.github.io这个仓库的dist下的对应的目录,但是源文件放在neoui的snippet文件夹下面。所以html文档的修改流程为:

  • 1、在neoui仓库中snippet的examples下找到相应的md文档进行修改,完成后在neoui下执行node app,生成docs目录下相应的md文档。
  • 2、在neoui仓库中将docs下的相应md文档或整个docs文档copy到iuap-design.github.io这个仓库下的docs文档,在iuap-design.github.io仓库中执行gitbook build,在dist/pages下生成最终的静态页面。

    css样式修改

    官网的css样式由3个css文件来控制,style.css、iuap-design.css和u.css。
  • style.css原则上不允许人为修改。
  • 需要修改统一的一类样式时修改u.css,修改u.css时需找到并修改sass源文件,修改后生成u.css可用于测试
  • 某一个具体样式需要修改时,可修改iuap-design.css,将具体样式的优先级高于u.css中某一类样式的优先级即可,iuap-design.css在gitbook-plugin-iuap-design仓库。

    js修改

    js修改时只需修改u.js即可,但u.js是由sparrow、neoui、kero、kero-adapter多个js合并而成,修改时需找到对应仓库的js源码,用utip工具,也可以在各仓库完成源码修改后,在kero-adapter仓库中node_modules下找到同名文件包,用修改后的js目录替换对应同名文件下的对应目录,kero-adapter 仓库执行npm run product即可在dist产出最终的u.js。

样式版的修改与测试

添加一个样式版可在iuap-design.github.io/conf/snippets.conf.json配置文件中配置,即可在左侧栏中显示。
修改其中某个具体的样式时,在dist\pages\webIDE\demos\ui目录下找到相应html、辅助的css以及辅助的js,如需修改css和js还需修改u.css和u.js(修改u.css和u.js时可参照neoui模块中js和css的修改)。
样式版修改后的测试较为简单:

  • 1、将修改后的u.css和u.js放在dist\vendor\uui目录下。
  • 2、在server下的router.js中配置你的测试路径。
  • 3、启动app.js,访问localhost:8000测试。

以上是在最近一段工作中总结的修改官网问题的一个简单流程,如有错误或需要优化的地方,欢迎指正,共同进步。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant