openstack主题模版开发.pdfVIP

目 录 1.概述 2.CSS样式引入 2.1 My Themes 2.2 Horizon 2.3 Angular 2.4 HORIZON_CONFIG.scss_files 2.5 Custom Styles 3. JS文件引入 31. iframe_embed_settings 标签 3.2 horizon/_conf.html 3.3 _script_loader.html 3.4 _custom_head_js.html 3.5 horizon/_scripts.html 4. 主题替换 4.1 ACE主题 4.2 引入ACE主题的CSS样式 4.3 引入ACE主题的JS文件 4.4 收集和压缩 4.5 总结 4.6 错误与冲突收集 5.错误修正 6.openstack里所有功能浏览 7.前端hightchart.js分析 8.命令使用 本文档使用 看云 构建 - 2 - 1.概述 1.概述 1. 概述 该文档主要介绍如何openstack中添加新的主题 ，其中包含内容有 ：ACE模版引入 ；css、js收集和压缩 ； 静态页面替换 本文档使用 看云 构建 - 3 - 2.CSS样式引入 2.CSS样式引入 2 CSS样式引入 知识点 ： /{{ THEME_DIR }}/{{ THEME }}/ ：当前主题的目录 引入流程 1. horizon\openstack_dashboard\themes\maintenance\templates\base.html。 　　base.html为入口文件 ，css、js等文件在这里引入。CSS文件引入代码为 ： {% block css %} {% include _stylesheets.html %} {% endblock %} 2. horizon\openstack_dashboard\themes\maintenance\templates_stylesheets.html。 　　_stylesheets.html ，所有的CSS文件都是通过这个文件来引入的。其引入方法为 ： {% load compress %} {% load themes %} {% compress css %} CSS文件引入路径 {% endcompress %} 引入主题文件代码 ： {% with THEME current_theme THEME_DIR theme_dir %} {% compress css %} style type text/scss {% include themes/themes.scss %} /style {% endcompress %} {% endwith %} 3. horizon\openstack_dashboard\themes\maintenance\templates\themes\themes.scss 　　themes.scss里有 ： My Themes、Horizon、Angular、HORIZON_CONFIG.scss_files、 Custom Styles。下面分别对它们进行追踪分析。 　　该文件里的代码如下 ： // My Themes 本文档使用 看云 构建 - 4 - 2.CSS样式引入 @import /{{ THEME_DIR }}/{{ THEME }}/variables; // Horizon @impo