頁面模板 · 前端開發規范

[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"/>  <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">  <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`是全站公用配置，后面三個分別是首頁、列表頁和詳情頁的配置