部分译文摘录

部分译文摘录

本篇目录

  • Comprehensive Theming
  • Using source maps with Sass 3.3
  • edX Pattern Library

Comprehensive Theming

修改theme要用到命名规则——Comprehensive Theming

Comprehensive Theming让你定制你的开放的EDX安装外观。你可以重写SASS和CSS设置，图像，或整个HTML模板。最后，综合主题将淘汰现有主题化的机制，但现在他们和平共处。本文档描述了如何使用Comprehensive Theming，也是改变你需要保持其他主题的工作机制。

创建一个theme

Theme是一个文件目录，在你喜欢的地方创建，不一定要在edx-platform文件夹下。这个结构反应edx-platform repo本身。你在你的theme下创建的文件将在edx-platform里替换掉同名文件。例如：

1
2
3
4
5
6
7
8
9
10
11
12
my-theme
└── lms
    ├── static
    │   ├── images
    │   │   └── logo.png
    │   └── sass
    │       ├── _overrides.scss
    │       ├── lms-main-rtl.scss
    │       └── lms-main.scss
    └── templates
        ├── footer.html
        └── header.html

顶级目录随便命名，例子里用了”my-theme”.这个文件在这里提供了覆盖edx-platform的文件。在这个例子中，”my-theme/lms/static/sass/lms-main.scss”是用来代替
”edx-platform/lms/static/sass/lms-main.scss”

图片

图像可以简单地在主题目录中的正确位置的取代并展现，在上面的例子中，
lms/static/images/logo.png image被重新加载展现

Sass/CSS

大部分在Open edX里的CSS样式用Sass完成再被编译为CSS，你可以通过创建一个新Sass文件，使用现有的文件来覆盖个人设置，并覆盖成为你想要的设置。
例如，为了改变字体用于整个网站，你可以创建一个lms/static/sass/_overrides.scss文件用你想要的变化：

1
$sans-serif: 'Helvetica';

变量可以在lms/static/sass/_overrides.scss文件下被重写
注意：我们目前重新设计Sass变量，如果你有兴趣可以去edX Pattern Library看看
p.s.后面我也翻译了这个
然后创建lms/static/sass/lms-main.scss来使用这些重写，以及其他来自原始文件的定义。

1
2
3
4
5
// Our overrides for settings we want to change.
@import 'overrides';
// Import the original styles from edx-platform.
@import 'lms/static/sass/lms-main';

HTML模板

你可以改变HTML模板复制到你的主题目录中的适当位置，使你需要改变。记住，在未来如果你升级的开放EDX的代码，您可能也需要更新你的主题复制的模板。

模板名称

这里是您在您的综合主题中使用的模板名称列表（到目前为止）：
header.html
footer.html
不可以：
Themable-footer.html
看看main.html文件，你会注意到它包括header.html和themable-footer.html，而不是footer.html。所以你可能会愿意重写themable-footer。千万不要这样做。Themable-footer.html间接避免破坏microsites的附加层，也指一个叫footer.html的文件.我们的目标是最终使comprehensive theming能做microsites现在做的一切，然后从代码库中删除microsites.从这个意义来讲，themable-footer.html会消失，因为间接的额外的层将不再是必要的。

安装主题

为了使用你的主题，你需要添加一个配置值指向主题目录。有两种方式：
1.如果你喜欢编辑server-vars.yml:
i.编译（或创建）/edx/app/edx_ansible/server-vars.yml来添加
edxapp_comprehensive_theme_dir

1
edxapp_comprehensive_theme_dir: '/full/path/to/my-theme'

ii.运行

1
2
$ sudo /edx/bin/update configuration master
$ sudo /edx/bin/update edx-platform HEAD

2.编辑/edx/app/edxapp/lms.env.json以添加
COMPREHENSIVE_THEME_DIR

1
"COMPREHENSIVE_THEME_DIR": "/full/path/to/my-theme",

重启你的网站可以看见变化

“Stanford” theming

如果你想继续使用“斯坦福”主题，你需要做一些变化。
在你的主题里sass目录下创建以下新文件：

  • lms-main.scss
  • lms-main-rtl.scss
  • lms-course.scss
  • lms-course-rtl.scss
  • lms-footer.scss
  • lms-footer-rtl.scss
    这些文件内容相似，这里是lms-main.scss可能会看起来的样子：
    1
    2
    3
    $static-path: '../../../..';
    @import 'lms/static/sass/lms-main';
    @import '_default';

每个文件应该设置$static-path作为相对路径，对edx-platform目录下lms/static很重要。
例如lms/static/sass对应lms-footer.scss 会导入lms/static/sass/lms-footer
最后，这个文件应该导入_default名字，指的是_default.scss.Sass文件应该在Stanford theme已经存在
如果您的主题使用了不同的名称而不是“默认值”，你需要在@import line里使用那个名字。
运行update_assets命令来重编译

1
$ paver update_assets lms --settings=aws

Microsites

如果你想继续使用” Microsites”主题系统，这些是你用做的一些变动。几个模板改名了，或者包括在了其他模板里。

  • header_extra.html现在是head-extra.html。这个文件总是插入到页面的元素中，而不是元素，所以这个变动使得名字更准确。
  • google_analytics.html被移除，这个模板内容被加到head-extra.html模板里了
  • google_tag_manager.html 现在叫 body-initial.html
    除此以外，还有一些其他变动

如何使用map文件——Using source maps with Sass 3.3

Sass3.3发布了令人兴奋的功能source maps.
CSS pre-processors, minifiers, and JavaScript transpilers已经成为主流，然而因为与原代码的差异在浏览器中调试代码越来越难。

通过使用source map审查元素可以看到我们真正，我是说真正关心的内容——the pre-compiled Sass

  1. 生成
    需要为每个源文件生成source map：
    进入项目根目录，命令行下输入：
    1
    $ sass sass/screen.scss:stylesheets/screen.css –sourcemap

如果你运行该命令后看看你的输出文件夹，你会发现一个标记已被添加到生成的CSS文件结尾：
/# sourceMappingURL=screen.css.map /

实现细节请参见http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

到这一步，我们已经成功生成了sourcemap文件，可惜的是，在浏览器下查看，我们可能仍未看到相对应的scss文件。这时需要打开Chrome的sourcemap功能。

重启你的chrome。

  1. 条件
    Chrome, Firefox and Safari

  2. 参考阅读
    http://thesassway.com/intermediate/using-source-maps-with-sass
    推荐阅读

edX Pattern Library

概览

此库包含以下：

  • EDX应用的UI——PLDOC
  • 为general Front End, HTML, Sass/CSS, and Accessibility-minded提供标准和风格指南
  • edX应用里使用的Sass/CSS和模块

然而我觉得最后的Front End Development Standards才是有用的地方，于是我们去wiki

如何在模式库包中工作/开发

如果你想在该仓库(在 /pattern-library/)中添加或编辑任何模式，或者改变任何以包为中心的设置（比如package.json或是bower.json，请这样做：

  1. 测试你做的改变会不会负面影响包管理(npm)或是其他应用程序和代码库的依赖

p.s.未完待续
先去学一阵sass

blog
edx