【20211207】CmsWing代码分析 - src/controller/home/index.js（一）-CSDN博客

本文链接：https://blog.csdn.net/mu_qingyu/article/details/121762858

本文分析了CmsWing站点首页`view/home/index_index.html`，探讨了HTML模板的继承机制，用于减少代码重复。通过`inc_base.html`中的block块实现页面公共部分的复用，例如页头和页脚。`inc_base.html`的head部分涉及描述、CSS加载和钩子，而JS部分将在后续分析中讨论。

摘要由CSDN通过智能技术生成

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