【20211207】CmsWing代码分析 - src/controller/home/index.js（一）
房时铭
2021SC@SDUSC
view/home/index_index.html
不难看出，这是我们打开CmsWing站点，最先看到的首页界面。
{% extends "./inc_base.html" %}
{% block style %}
<link href="/static/assets/css/layout-question.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block content %}
这一段是页面继承。具体使用方法参见此处：https://zhuanlan.zhihu.com/p/42314336，在此简单介绍一下：对于一个网站的前端页面而言，其中有一部分的样式或者排版是基本相同的，比如页面的页头和页脚基本都是固定的。HTML提供了一个block块功能，可以实现HTML模板的继承，从而可以减少代码的重复量。
那么，继承的block块在哪里可以看到呢？首先在模板页面将该页面不公共的内容使用{% block name1 %}.....{% endblock %}的方法包裹住，当我们要使用该模板页面时，首先需要执行{% extends 'xxxx.html' %}来引入该模板文件，然后只需要在对应的{% block name1 %}.....{% endblock %}中写上不同的内容的代码即可，后者的页面的其他页面将继承前者的公共部分。也就是说，我们要去寻找inc_base.html。下面我们去看inc_base.html，如下所示：
view/home/inc_base.html
<!DOCTYPE html>
<!--[if IE 8]><html class="ie ie8"> <![endif]-->
<!--[if IE 9]><html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->
很平庸的文件头。HTML条件注释判断浏览器版本是很常见的用法，这一篇说得比较详细：https://blog.haitianhome.com/html-ie-if-css.html。
head部分：
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<title>{{controller.meta_title}}| {{config.setup.WEB_SITE_TITLE}}</title>
<meta name="keywords" content="{{controller.keywords}}" />
<meta name="description" content="{{controller.description}}" />
<meta name="Author" content="Arterli [www.cmswing.com]" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<!-- WEB FONTS : use %7C instead of | (pipe) -->
<!--<link href="http://fonts.useso.com/css?family=Open+Sans:300,400%7CRaleway:300,400,500,600,700%7CLato:300,400,400italic,600,700" rel="stylesheet" type="text/css" />-->
<!-- CORE CSS -->
<link href="/static/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- REVOLUTION SLIDER -->
<link href="/static/assets/plugins/slider.revolution/css/extralayers.min.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/plugins/slider.revolution/css/settings.min.css" rel="stylesheet" type="text/css" />
<!-- THEME CSS -->
<link href="/static/assets/css/essentials.min.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/css/layout.min.css" rel="stylesheet" type="text/css" />
<!-- PAGE LEVEL SCRIPTS -->
<link href="/static/assets/css/header-1.min.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/css/color_scheme/blue.min.css" rel="stylesheet" type="text/css" id="color_scheme" />
{% block style %}{% endblock %}
<!--页面头部css钩子加载-->
{% if pagehook%}
{%for field in pagehook.fields%}
{%if pagehook.editor == '1'%}
{{HOOKS@pageHeader@1[field.name]|safe}}
{%elif pagehook.editor == '2_1'%}
{{HOOKS@pageHeader@2_1[field.name]|safe}}
{%elif pagehook.editor == '2_2'%}
{{HOOKS@pageHeader@2_2[field.name]|safe}}
{%elif pagehook.editor == '3'%}
{{HOOKS@pageHeader@3[field.name]|safe}}
{%else%}
{{HOOKS@pageHeader[field.name]|safe}}
{%endif%}
{%endfor%}
{%endif%}
<!--/页面头部css钩子加载结束-->
{% macro content(pagehook) %}
<!--内容钩子加载-->
{% if pagehook%}
{%for field in pagehook.fields%}
{%if pagehook.editor == '1'%}
{{HOOKS@pageContent@1[field.name]|safe}}
{%elif pagehook.editor == '2_1'%}
{{HOOKS@pageContent@2_1[field.name]|safe}}
{%elif pagehook.editor == '2_2'%}
{{HOOKS@pageContent@2_2[field.name]|safe}}
{%elif pagehook.editor == '3'%}
{{HOOKS@pageContent@3[field.name]|safe}}
{%else%}
{{HOOKS@pageContent[field.name]|safe}}
{%endif%}
{%endfor%}
{%endif%}
<!--/内容钩子加载结束-->
{% endmacro %}
{%if config.setup.WEB_TONGJI%}
<!--统计代码-->
{{config.setup.WEB_TONGJI|safe}}
<!--统计-->
{%endif%}
主要做了几项工作：meta部分加载描述，加载css文件和加载钩子。
中间一部分主要是页面排版，暂且略过。最后是引入js文件，以及footer钩子：
<!-- JAVASCRIPT FILES -->
<script type="text/javascript" src="/static/assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var plugin_path = '/static/assets/plugins/';
$(function () {
if($("#topMain.nav-pills>li.active>a")){
var w = $("#topMain.nav-pills>li.active>a").width();
$("#topMain.nav-pills>li.active>.aline").width(w);
}
})
</script>
<script type="text/javascript" src="/static/assets/js/scripts.min.js"></script>
{#
<!-- STYLESWITCHER - REMOVE -->
<script async type="text/javascript" src="/static/assets/plugins/styleswitcher/styleswitcher.js"></script>
#}
<!-- REVOLUTION SLIDER -->
<script type="text/javascript" src="/static/assets/plugins/slider.revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="/static/assets/plugins/slider.revolution/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="/static/assets/js/view/demo.revolution_slider.min.js"></script>
{% block script %}{% endblock %}
<!--页面footer钩子，一般用于加载插件JS文件和JS代码-->
{% if pagehook%}
{%for field in pagehook.fields%}
{%if pagehook.editor == '1'%}
{{HOOKS@pageFooter@1[field.name]|safe}}
{%elif pagehook.editor == '2_1'%}
{{HOOKS@pageFooter@2_1[field.name]|safe}}
{%elif pagehook.editor == '2_2'%}
{{HOOKS@pageFooter@2_2[field.name]|safe}}
{%elif pagehook.editor == '3'%}
{{HOOKS@pageFooter@3[field.name]|safe}}
{%else%}
{{HOOKS@pageFooter[field.name]|safe}}
{%endif%}
{%endfor%}
{%endif%}
<!--/页面footer钩子，一般用于加载插件JS文件和JS代码-->
<!--[if lte IE 9]>
<script src="/static/assets/plugins/jquery-fly/requestAnimationFrame.min.js"></script>
<![endif]-->
关于JS我们留到下一次分析。
类似资料：