[TOC]
# 页面模板
PC：
~~~
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="applicable-device" content="pc">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="theme-color" content="16进制的主题颜色"/>
<meta name="author" content="设计：XXX，前端：YYY，文案：ZZZ"/>
<link rel='canonical' href='当前PC页的URL' />
<link rel="alternate" media="only screen and(max-width:640px)" href="h对应移动页面的URL">
<link rel="stylesheet" href="/path/to/stylesheetfile.css"><style>
<link rel="manifest" href="/manifest.json">
<script src="/path/to/javascriptfile.js"></script>
<title>here is the title</title>
<meta name="keywords" content="页面关键词">
<meta name="description" content="页面描述">
...
~~~
手机：
~~~
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta name="applicable-device" content="mobile">
<meta name="location" content="province=海南;city=海口;coord=坐标值">
<meta name="renderer" content="webkit">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true"/>
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="16进制主题颜色值"/>
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="author" content="设计：XXX，前端：YYY，文案：ZZZ"/>
<!-- 移动端设置 唯一URL-->
<link rel="canonical" href="here is the pc page for the mobile" >
<link rel="stylesheet" href="/path/to/stylesheetfile.css"><style>
<link rel="manifest" href="/manifest.json">
<!-- 请尽早引入 mobile-uti.js文件 -->
<script src="/path/to/mobile-uti.js"></script>
<title>here is the title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
...
~~~
因为维护的网站使用的是DEDECMS系统开发，所以，在制作页面模板的时候有一些技巧性的地方：
1.拆分页面结构的元素
因为，一个页面包含的元素区域包括`meta`、`link`、`script`和内容部分，所以建议将`meta`、`link`、`script`等区域分离出页面模板。然后因为DEDECMS系统模板标签的特性，可以进一步将`meta`、`link`、`script`再次按照首页，列表页，内容页三种模式再次分离：
| 模板类型 | meta | link | script |
| --- | --- | --- | --- |
| 公共 |`_meta.htm` | `_link.htm` | `_script.htm` |
| 首页 |`_meta_tdk_index.htm` | `_link_index.htm` | `_script_index.htm` |
| 列表 |`_meta_tdk_list.htm` | `_link_list.htm` | `_script_list.htm` |
| 详情 |`_meta_tdk_article.htm` | `_link_index.htm` | `_script_article.htm` |
公共部分的模板`_meta.htm`、`_link.htm`和`_script.htm` 放置的是全部页面公共部分的内容，初此之外其他模板放置的都是各自特有内容：
`_meta_tdk_index.htm` 专门放置首页TDK的内容，如果有其他首页独有的meta也可以放置
`_meta_tdk_list.htm` 专门放置列表页TDK的内容，如果有其他列表页独有的meta也可以放置
`_meta_tdk_article.htm` 专门放置详情页TDK的内容，如果有其他详情页独有的meta也可以放置
`_link_index.htm` 专门放置首页独有的link内容
`_link_list.htm` 专门放置列表页独有的link内容
`_link_article.htm` 专门放置详情页独有的link内容
`_script_index.htm` 专门放置首页独有的script内容
`_script_list.htm` 专门放置列表页独有的script内容
`_script_article.htm` 专门放置详情页独有的script内容
2.拆分各个页面类型JS文件的配置文件
| 模板类型 | JS文件 |
| --- | --- | --- | --- |
| 公共 |`common.js` |
| 首页 |`index.js` |
| 列表 |`list.js` |
| 详情 |`article.js` |
`common.js`是全站公用配置，后面三个分别是首页、列表页和详情页的配置
