之前在edx code(edX google group)上问过如何为course扩充字段(如为课程添加category字段)。
得到的回复说直接往CoueseFields里添加你要的字段就行。位置在common/lib/xmodule/course_module.py
.之后该字段会自动显示在Advanced Settings里。我按照这种方法发现字段的确成为course的属性了(在shell里实验)。不过并没有自动显示在Advanced Settings里,不晓得是不是版本问题。
此外还有回复说他是采用org字段来存储课程分类。因为他们是内部使用edx,不需要org。不过这种方式总归不大好。
前两天收到一封邮件,说他也想扩充课程,和我之前需求类似,希望给与帮助。
看来这还是个挺常见的需求。
我就分享下自己的方法好了。也讲下具体流程,而不仅是给出方案,这样小伙伴们下回遇到类似的问题,可以按照类似思路自己解决啦。
###需求描述
常见的需求类似这样:给课程添加category字段,用于分类课程,在首页使用。
###最初的方案
- 自己写了个django app加入到lms/djangoapps里。app.models中有course_id字段
- 自己写个首页
- 在admin里管理首页的内容
其实就像自己写了个小型内容管理系统,管理的核心对象是course。而我们知道课程的关键标志是course_id。我跟踪注册课程相关的代码,在代码执行路径上加上自定义的create_home_course函数。
在create_home_course函数中将新建的课程注册到我们自己的app.models里,关键是从中获得course_id,这样就能定位到课程。
这种方式的好处是不需侵入CoueseFields
我们今天重点说下面的方案
###现在的方案
其实思路也简单。就是跟踪日程&细节
里的字段是如何存储并与前端交互的。模仿它就行。
好的,满上咖啡,我们开始。
我选择跟踪这个字段:每周投入课程学习的小时数
。
使用chrome开发者工具,看到该表单字段的id是 course-effort
在edx-platform搜索effort。我们就可以看到所有与effort相关的代码及其所在文件。其实挺推荐使用github来研究代码的,可以参考我的这篇博客
接下来就是依葫芦画瓢的工作了。据此添加我们需要的字段了。我们按照以下文件顺序修改:python>js>html>Sass
###0
以下工作均在/edx/app/edxapp/edx-platform/目录里进行
###python
vim cms/djangoapps/models/settings/course_details.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
:::text
self.effort = None # int hours/week
+ self.category = None
self.course_image_name = ""
...
+ temploc = course_key.make_usage_key('about', 'category')
+ try:
+ course_details.category = modulestore().get_item(temploc).data
+ except ItemNotFoundError:
+ pass
+
+
temploc = course_key.make_usage_key('about', 'video')
try:
raw_video = modulestore().get_item(temploc).data
...
- for about_type in ['syllabus', 'overview', 'effort', 'short_description']:
+ for about_type in ['syllabus', 'overview', 'effort','category', 'short_description']:
cls.update_about_item(course_key, about_type, jsondict[about_type], descriptor, user)
|
vim cms/templates/settings.html
1
2
3
4
5
6
|
:::text
'requirements', 'syllabus', 'textbook', 'faq', 'more_info',
'number', 'instructors', 'overview',
- 'effort', 'end_date', 'prerequisites', 'ocw_links']:
+ 'effort','category', 'end_date', 'prerequisites', 'ocw_links']:
|
###js
vim cms/static/js/views/settings/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
:::text
this.$el.find('#' + this.fieldToSelectorMap['effort']).val(this.model.get('effort'));
+
+ //added by wwj
+ this.$el.find('#' + this.fieldToSelectorMap['category']).val(this.model.get('category'));
...
'effort' : "course-effort",
+ 'category' : "course-category",
'course_image_asset_path': 'course-image-url'
...
case 'course-effort':
this.setField(event);
break;
+ //added by wwj
+ case 'course-category':
+ this.setField(event);
+ break;
|
vim cms/static/js/models/settings/course_details.js
1
2
3
|
:::text
effort: null, // an int or null,
+ category: null,
|
###html
vim cms/templates/settings.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
:::text
+ ##added by wwj
+ % if about_page_editable:
+ <hr class="divide" />
+
+ <section class="group-settings requirements">
+ <header>
+ <h2 class="title-2">课程分类</h2>
+ <span class="tip">${_("Expectations of the students taking this course")}</span>
+ </header>
+
+ <ol class="list-input">
+ <li class="field text" id="field-course-category">
+ <label for="course-category">${_("course category")}</label>
+ <input type="text" class="short time" id="course-category" placeholder="Math" />
+ <span class="tip tip-inline">${_("course category")}</span>
+ </li>
+ </ol>
+ </section>
+ % endif
+
</form>
</article>
<aside class="content-supplementary" role="complimentary">
|
vim lms/templates/courseware/course_about.html
1
2
3
4
5
6
7
8
|
:::text
<li><div class="icon effort"></div><p>${_("Estimated Effort")}</p><span class="start-date">${get_course_about_section(course, "effort")}</span></li>
% endif
+ % if get_course_about_section(course, "category"):
+ <li><div class="icon category"></div><p>课程分类</p><span class="start-date">${get_course_about_section(course, "category")}</span></li>
+ % endif
|
###Sass
vim cms/static/sass/views/_settings.scss
1
2
3
4
5
6
7
8
|
:::text
#field-course-effort {
width: flex-grid(3, 9);
}
+ #field-course-category {
+ width: flex-grid(3, 9);
+ }
|
###扫尾
- 将以上修改一次性commit到你自己的分支上,尽量不要合并到官方分支里
- update_assets
1
2
3
4
5
6
|
:::text
sudo -H -u edxapp bash
source /edx/app/edxapp/edxapp_env
cd /edx/app/edxapp/edx-platform
paver update_assets cms --settings=aws
|
- 重启edxapp:
sudo /edx/bin/supervisorctl -c /edx/etc/supervisord.conf restart edxapp:
###测试
搞定~