WebPlus Pro 网页后台维护软件指北（一）

WebPlus Pro 个性化门户集群平台（后文简称此为“后台”）是大多数学校网站的后台维护工具，尽管系统相对老旧一些，但是功能仍然非常的全面。笔者在学校融媒体中心工作过一段时间，对此后台系统有一定的理解，故与大家分享一些心得。

前言

在开始之前，你需要对这些技能有一些简单的理解：

一定的 Web 开发知识（HTML / CSS 等）
会使用浏览器的开发人员工具来检查网页元素或者调试页面
大多数学校会将后台管理页面设置为校园内网访问，如果在外网环境需要使用校园 VPN

为了便于理解，我这里先讲三个概念：

栏目：栏目即网站的栏目，例如网站首页、网站关于页面等等，同时每个栏目可以拥有子栏目，例如在专题栏目下可以根据发布年份设置栏目、新闻栏目下可以校园活动新闻和科研成果新闻等
模板：如果你学习过 Django，你可能会更好的理解这个概念，我们在向服务器请求网页的时候，网页会在服务器中渲染出来并返回给我们（服务端渲染技术），模板页就是我们制作出来的网页，不过它是一个“模板”，服务器预渲染网页的时候会使用我们的这个模板
内容（文档）：例如在“新闻”栏目下，我们上传的每篇新闻文章都属于内容

另外对于模板，也有这几个类型：

首页：这个栏目的 index.html 页面
列表页：这个栏目的 list.html 页面，一般用来展示栏目下的内容列表
文章页：承载栏目内容的页面，当用户访问栏目下的内容时会进入这个页面

假如我会使用 WebPlus Pro 来开发一个我的个人博客的话。博客会有首页、博客、新闻这些栏目，或许博客栏目下还会设置图文博客和文字博客这两个子栏目。

栏目设置完了，我们还需要想一下我们要设置哪些模板，博客的首页我们需要设置一个首页。这里留给大家一个问题，博客首页会有一个首页，博客栏目下会有个列表页来展示我们的博文列表，栏目下的博文需要博文页面，因此博客栏目还需要一个文章页，我画了一个示意图来辅助理解：

1924eb8b-3450-436b-971f-dbb369107fee

栏目管理

当你登录后台时，映入眼帘的是这样的一个界面，本文只讲解前两个“网站建设”以及“内容管理”这两个部分：

我们将鼠标指针左上方的那个“网站建设”按钮后，会展开列表，我们点击“栏目管理”就可以管理网站的栏目了。

在栏目管理中，由于我删掉了所有的内容，所以栏目列表中只有一个根栏目，我们先选中左侧的跟妈、栏目，右侧就会出现当前栏目下的子栏目，点击添加按钮来添加我们的第一个子栏目：

49fc9adce8dcc83e75ef119249a6dd8b

由于我们的这个站点提供的服务很多，博客只是其中一部分，所以我们先创建一个博客栏目，而非直接创建首页。随后我们点击左侧的“博客”栏目，在此创建“首页”、“博客”和“新闻”子栏目。

管理内容

我们现在来尝试为我们的博客添加一点儿内容，我们把鼠标放在“内容管理”一栏，点击“文档管理”就可以管理我们各栏目下的内容了。

我们先添加一些博客文章，我们从左侧的树中找到博客栏目并选中，这样我们就能看到博客栏目下的文章了，我们随便写一些内容并提交，如果提交之后页面卡住迟迟未返回提示，可以先回到文章列表并刷新检查，若内容已经出现或者更新，则可关掉文章编辑页面了。新闻栏目大家可以视情况添加内容。

设计模板

根据前言中的结构图，我们需要设计五个模板页面，考虑到博客栏目和新闻栏目差不多，我们可以让这俩栏目用同一个列表页和文章页，这样的话我们现在只需要设计三个就可以了。

设计博客首页

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>首页</li>
                <li>博客</li>
                <li>新闻</li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>博客主页</h1>
        <h2>精选博客文章</h2>
        <div>
            <div frag="面板1">
              <div frag="窗口1">
                <div frag="窗口内容">
                    <div class="item">{标题}（{发布时间}）</div>
                </div>
              </div>
            </div>
        </div>
    </main>
</body>
</html>

精选博客文章下面的那个带有 frag 属性的 <div> 元素就是 WebPlus 后台的模板特性了，后台会识别到 frag 属性的内容并进行替换。我们需要一个窗口内容来展示内容，窗口内容则必须在窗口里面，窗口则必须在面板里面，因此我们会使用图中的结构来承载内容。

至于窗口内容中的元素，则会根据你后期设置的情况智能识别：如果你设置其为列表，则后台会自动根据文章数量来复制窗口内容中全部的元素。

完成博客首页代码后，我们打开模板管理将模板上传，点击新建模板页并按照提示操作即可。

TIPS：后台只支持文件后缀为 htm 的 HTML 文件

设计列表页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>首页</li>
                <li>博客</li>
                <li>新闻</li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>列表</h1>
        <div>
            <div frag="面板1">
              <div frag="窗口1">
                <div frag="窗口内容">
                    <div class="item">{标题}（{发布时间}）</div>
                </div>
              </div>
            </div>
        </div>
    </main>
</body>
</html>

和博客首页差不多，所以这里不详细阐述了。

设计内容页面

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>首页</li>
          <li>博客</li>
          <li>新闻</li>
        </ul>
      </nav>
    </header>
    <main>
      <div frag="面板1">
        <div frag="窗口1">
          <div frag="窗口内容">
            <article>
	            <h1>{标题}</h1>
              <div class="author">{作者}</div>
              <div class="time">时间：{发布时间}</div>
              <div class="read">阅读量：{浏览次数}</div>
              <div class="content">{内容}</div>
            </article>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

至此，我们博客所需要的页面均已制作完成，下一步我们要做的是将模板与栏目绑定。