传统网站更应该注意的是数据缓存，加载速度，SEO优化等关键点。
SEO：纯前端开发来应用的话 要注意几点 h1 h2 标签的使用，图片保证alt属性 网站TDK的内容，要简洁关键词突出。内链外链的数量，可以舍身处境的想象一下，如何让爬虫有更多机会爬到自己的网站，又如何让爬虫更多的爬到并且尽量不爬出去，一直在你的网站打转，SEO的确有很多讲究。
网站模板的作用在于，前端搭好这个框架，后台数据来控制和更改整个网站的内容、如果整个后台数据都被改变，列如主页banner图，logo ，网站title 等等相关的 ，那么这个将改变整个网站的主题，成为一个新站。
那么建立一个这样的模板架 第一步要如何开始呢？
1、
每个页面都分为以下几个文件：
index.html 放置json数据，这个网页当前需要的数据，或者整体的公共数据。 将以下所有文件都引入进来
body.html 网站的样式
js/index.js 当前页面的js文件
css/index.css 当前页面的css
2、
↑ 如果一些css文件在每个页面中都要使用，那么设立一个global.css 在文件中引入所有css ， 方便每个页面调用global.css即可。
↑ JS文件： 截图中的99_global.js 中可以写入公共的js脚本，其他js可以选择性的写进页面中。
注： 所有的引入都要在index.html中进行 。
例：
这个站点中没有使用UI库，所有操作都是现手写，所以采用了网址形式引入的Jquery。
index.html中的格式为：
<html>
<head></head>
<body>
<div id=”content”></div> //将body.html内容放置在此div中
<script>
var data = { // 放置json数据
current_user:{
id:1,
email:‘tomLu@gmail.com.cn‘
}
}
</script>
<script type=”text/javascript” src=”js/index.js”></script> // 请在这里引入此页面的index.js 必须严格按照所有的引入顺序与位置
<script>
$(function() { //引入body.html的内容 放置在id=”content”中的元素内 $(‘#content‘).load(“body.html”, function() { render(); }); });
</script>
</body>
</html>
body.html内直接写入元素即可。
index.js :
js中写入对json数据的插入 ↑
列：
var text = $(“#text”).html();
$.each(data.textData , function(){
$(“#text_cycle”).append(Mustache.render( textData , this ))
})
在body.html中用
<div id=”text_cycle”>
<script id=”text” type=”txt/template”>
{{current_user}}
</script>
</div>
形成循环index.html中的textData这个json数据。
下面是其中一个单页面的整体步骤：
Home主页格式：
index.html 存放json数据
<!
DOCTYPE
html
>
<
html
lang=
“en”
>
<
head
>
<
meta
http-equiv=
“X-UA-Compatible”
content=
“IE=9; IE=8; IE=7; IE=EDGE”
>
<
meta
charset=
“utf-8”
>
<
meta
http-equiv=
“X-UA-Compatible”
content=
“IE=edge,chrome=1”
/>
<!– <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> –>
<
title
>De Anza Oaks
</
title
>
<
link
rel=
“stylesheet”
href=
“/global.css”
>
<
link
rel=
“stylesheet”
href=
“css/index.css”
>
<
link
rel=
“shortcut icon”
href=
“#”
/>
<!– <link rel=”stylesheet” href=”css/jalendar.css”> –>
<
script
src=
“https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js”
>
<
/
script
>
<
script
src=
“https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js”
>
<
/
script
>
<!– Links as currently hosted by http-server –>
<
script
src=
“/js/10_masterslider.min.js”
>
<
/
script
>
<
script
src=
“/js/11_calendar_plugin.js”
>
<
/
script
>
<
script
src=
“/js/99_global.js”
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
“content”
></
div
>
<
script
>
// This script block stays in this wrapper html file
var
data = {
_current_user: {
id:
‘1234‘,
email:
‘test@example.com‘,
display_name:
‘Laurie01‘,
first_name:
‘Laurie‘,
last_name:
‘Williams‘,
is_admin:
true },
// _current_user: null,
banner_img: [{
id:
1,
img_url:
‘/community/img/doorway.jpg‘ }],
provenance: [{
id:
1,
provenance_url:
‘/community/img/tellus.png‘,
alt:
‘Powered-by-Tellus‘ }],
_metadata: {
root_url:
‘http://127.0.0.1:8080‘,
page_path:
‘/home‘,
assets_path:
‘‘,
site_name:
‘De Anza Oaks‘,
environment:
‘dev‘, },
community_news: [{
id:
1,
title:
“WHAT‘S NEW AT DE ANZA OAKS” }], }
<
/
script
>
<
script
type=
“text/javascript”
src=
“js/index.js”
>
<
/
script
>
<
script
>
// This script block stays in this wrapper html file
$(
function() {
$(
‘#content‘).
load(
“body.html”,
function() {
render(); }); });
<
/
script
>
</
body
>
</
html
>
body.html 存放主页样式
<!– header –>
<
div
class=
“header”
>
</
div
>
<!– swiper –>
<
div
class=
“master-slider ms-skin-default”
id=
“masterslider”
>
<
div
class=
“ms-slide”
id=
“banner_img_cycle”
>
<
script
id=
“banner_img”
type=
“txt/template”
> <img src=”{{img_url}}”/>
</
script
>
</
div
>
<
div
class=
“mas-ab”
>
<
div
class=
“w1200 pr”
>
<
div
id=
“provenance_cycle”
>
<
script
id=
“provenance”
type=
“txt/template”
> <img src=”{{provenance_url}}” alt=”{{alt}}”>
</
script
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class=
“main”
>
<!– body-1 –>
<
div
class=
“main-top body-one”
>
<
div
class=
“w1200 pr”
>
<
div
class=
“main-left body-left”
style=
“
margin-top: 10px;”
>
<
div
class=
“main-left-contents”
>
<
p
id=
“CommunityNews_cycle”
>
<
script
id=
“CommunityNews”
type=
“txt/template”
> {{title}}
</
script
>
</
p
>
<
ul
id=
“events_photo”
>
<
script
id=
“event_template”
type=
“txt/template”
> <li class=”main-left-content-list” > <a class=”body1-a jump” data={{link}} href=”javascript:;”> <p> {{title}} ({{num}})</p></a> </li>
</
script
>
</
ul
>
</
div
>
<
div
class=
“main-right-content main_right”
>
<
div
class=
“main-list”
>
<
ul
id=
“featureList”
>
<
script
id=
“featureList_template”
type=
“txt/template”
> <li class=”main-list” animated zoomIn”> <a data={{link}} href=”javascript:;” class=”main-list-a jump”> <p style=”background:url(‘{{img}}‘) no-repeat center 50px”>{{category}}</p> </a> </li>
</
script
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<!– body-2 –>
<
div
class=
“main-top body_two”
>
<
div
class=
“w1200 pr”
>
<
div
class=
“main-left body-left”
>
<
div
class=
“main-left-content swiper-container jump”
data=
“./amenities”
>
<
div
id=
“Amenities_title_cycle”
>
<
script
id=
“Amenities_title”
type=
“txt/template”
> {{title}}
</
script
>
</
div
>
<
ul
id=
“Amenities_cycle”
class=
“Carousel swiper-wrapper”
>
<
script
id=
“Amenities”
type=
“txt/template”
> <li class=”swiper-slide” style=”background: url(‘{{img_url}}‘) no-repeat; background-size: cover;”> <div> <h6>{{name}}</h6> </div> </li>
</
script
>
</
ul
>
</
div
>
<
div
class=
“announcement-tips swiper-pagination”
></
div
>
<
div
class=
“main-right-content main_display”
>
<
div
id=
“myId”
class=
“jalendar”
>
<
div
id=
“calendar_cycle”
>
<
script
id=
“calendar_left”
type=
“txt/template”
> <div class=”added-event” data-name=”{{creator}}” data-date=”{{date}}” data-time=”{{time}}” data-title=”{{title}}” data-content=”{{abbreviated_body}}” data-place=”{{location}}”> </div>
</
script
>
</
div
>
</
div
>
<
div
class=
“calendar-right-FF”
>
<
div
class=
“calendar-right”
id=
“date”
>
<
script
id=
“date_template”
type=
“txt/template”
> <div class=”jump” data=”activities/calendar”> <p>{{friendly_date}}</p> <p> <span>{{title}}</span> <a href=”javascript:;”>more</a> </p> </div>
</
script
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<!– body-3 –>
<
div
class=
“main-top body-one”
id=
“Reservables_cycle”
>
<
script
id=
“Reservables”
type=
“txt/template”
> <div class=”w1200 pr”> <img src=”{{img_url}}” alt=”Rectangle” class=”w1200_img”> <div class=”reservable”> <a data=”{{reservation_link}}” class=”jump” href=”javascript:;”> <p> Click Here To Book The {{name}} </p> </a> </div> </img> </div>
</
script
>
</
div
>
<
div
class=
“map_img”
id=
“birds_eye_view_cycle”
>
<
script
id=
“birds_eye_view”
type=
“txt/template”
> <!– <div class=”w1200_FF”> –> <div class=”w1200 pr w1200-view” id=””> <img src=”{{img_url}}” alt=”Aerial view of the residential area”> <div class=”view-p”> <p> {{title}} </p> </div> <!– </div> –> </div>
</
script
>
</
div
>
</
div
>
<!– <div class=”login-2″>
<h3 class=”login-H3-2″>Lost Password Help</h3>
<p class=”return”><img src=”/community/img/Bounced.png” alt=”Bounced”></p>
<p class=”login2-p”>
Fill out the below information and your username and password will be sent to your originally specified email
address
</p>
<input class=”login-int2″ type=”text” placeholder=”Name”><br />
<p class=”login-Or”>Or</p>
<input class=”login-int-a2″ type=”text” placeholder=”Password”>
<input class=”login-int-a3″ type=”text” placeholder=”Password”>
<button class=”login-button2″>Submit</button>
</div> –>
<!– footer –>
<
div
class=
“footer”
>
<
p
> Copyright © 2019 Tellus, Inc. All Rights Reserved.
</
p
>
</
div
>
index.js 用了jquery便于查看 简单易懂
var
render =
function() {
_pre_render();
// Render page
var
event_template =
$(
‘#event_template‘).
html();
var
featureList_template =
$(
‘#featureList_template‘).
html()
var
date_template =
$(
‘#date_template‘).
html()
Mustache.
parse(
event_template);
Mustache.
parse(
featureList_template);
Mustache.
parse(
date_template);
$.
each(
data.
shortcuts,
function() {
$(
‘#events_photo‘).
append(
Mustache.
render(
event_template,
this)); });
$.
each(
data.
feature_list,
function() {
$(
‘#featureList‘).
append(
Mustache.
render(
featureList_template,
this)); });
$.
each(
data.
feature_list,
function(
index,
item) {
$(
‘#featureList li‘).
eq(
index).
find(
‘p‘).
hover(
function() {
$(
this).
css(
‘background‘,
`url(
${
item.
active_img
}
) no-repeat center 50px`) },
function() {
$(
this).
css(
‘background‘,
`url(
${
item.
img
}
) no-repeat center 50px`) }) })
$.
each(
data.
events,
function() {
$(
‘#date‘).
append(
Mustache.
render(
date_template,
this)); });
var
Reservables =
$(
‘#Reservables‘).
html()
$.
each(
data.
amenities.
filter(
a
=>
a.
reservable),
function() {
$(
‘#Reservables_cycle‘).
append(
Mustache.
render(
Reservables,
this)); });
var
birds_eye_view =
$(
‘#birds_eye_view‘).
html()
$.
each(
data.
birds_eye_view,
function() {
$(
‘#birds_eye_view_cycle‘).
append(
Mustache.
render(
birds_eye_view,
this)); });
var
Amenities =
$(
‘#Amenities‘).
html()
$.
each(
data.
amenities,
function() {
$(
‘#Amenities_cycle‘).
append(
Mustache.
render(
Amenities,
this)); });
var
CommunityNews =
$(
‘#CommunityNews‘).
html()
$.
each(
data.
community_news,
function() {
$(
‘#CommunityNews_cycle‘).
append(
Mustache.
render(
CommunityNews,
this)); });
var
Amenities_title =
$(
‘#Amenities_title‘).
html()
$.
each(
data.
amenities_title,
function() {
$(
‘#Amenities_title_cycle‘).
append(
Mustache.
render(
Amenities_title,
this)); });
var
banner_img =
$(
‘#banner_img‘).
html()
$.
each(
data.
banner_img,
function() {
$(
‘#banner_img_cycle‘).
append(
Mustache.
render(
banner_img,
this)); });
var
provenance =
$(
‘#provenance‘).
html()
$.
each(
data.
provenance,
function() {
$(
‘#provenance_cycle‘).
append(
Mustache.
render(
provenance,
this)); });
//calendar
var
calendar =
$(
‘#calendar_left‘).
html();
Mustache.
parse(
calendar);
$.
each(
data.
events,
function() {
$(
‘#calendar_cycle‘).
append(
Mustache.
render(
calendar,
this)); });
// Global post render
_post_render();
// Local post render
$.
getScript(
`
${
data.
_metadata.
assets_path
}${
data.
_metadata.
page_path
}
/js/swiper.min.js`,
function() { //这里作用于引入这个js脚本 和使用脚本中的功能
//Carousel
var
swiper =
new
Swiper(
‘.swiper-container‘, {
width:
412,
spaceBetween:
23,
centeredSlides:
true,
autoplay: {
delay:
2500,
disableOnInteraction:
false, },
pagination: {
el:
‘.swiper-pagination‘,
clickable:
true, } }); });
$.
jqLoadFix =
function() {
if (
this.
complete) {
var
that =
this; } }
$.
getScript(
`
${
data.
_metadata.
assets_path
}${
data.
_metadata.
page_path
}
/js/jalendar.js`,
function() {
$(
function() {
$(
‘#myId‘).
jalendar({
// customDay: ‘2017/12/01‘, // Format: Year/Month/Day
color:
‘#6AA666‘,
// Unlimited Colors
// lang: ‘EN‘ // Format: English — ‘EN‘, Türkçe — ‘TR‘ }); }); });
$(
‘#calendar‘).
calendar({
ifSwitch:
true,
// Whether to switch the month
hoverDate:
true,
// hover Whether to display the day information
backToday:
true
// Whether to return to the day });
var
slider =
new
MasterSlider();
slider.
setup(
‘masterslider‘, {
width:
1920,
// slider standard width
height:
500,
// slider standard height
mouse:
false,
autoplay:
false,
loop:
true,
overPause:
false,
speed:
13 });
//banner
MSScrollParallax.
setup(
slider,
60,
100,
true);
slider.
control(
‘arrows‘);
var
i =
1,
ileng =
$(
‘.ms-slide‘).
length;
$(
‘.main-switch-top a‘).
click(
function() {
$(
this).
addClass(
‘curr‘).
siblings().
removeClass(
‘curr‘);
var
manin =
$(
this).
index();
$(
‘.main-switch-item‘).
hide();
$(
‘.main-switch-item‘).
eq(
manin).
fadeIn(); })
// time
function
timebar() {
$(
‘.mas-tib‘).
stop().
animate({
‘width‘
:
350 +
‘px‘ },
6000).
animate({
‘width‘
:
0 },
0);
$(
‘.ms-nav-next‘).
click(); };
function
clickAdd() {
$(
‘#masterslider‘).
delegate(
‘.ms-nav-next‘,
‘click‘,
function() {
i++;
if (
i >
ileng) {
i =
1; };
$(
‘.ban-len i‘).
html(
i); }) };
function
clickReduce() {
$(
‘#masterslider‘).
delegate(
‘.ms-nav-prev‘,
‘click‘,
function() {
i–;
if (
i <
1) {
i =
ileng; };
$(
‘.ban-len i‘).
html(
i); }) };
setInterval(
timebar,
6000);
$(
‘.ban-len span‘).
html(
ileng);
clickReduce();
clickAdd();
var
str =
`<div class=”db”>
<div class=”login”>
<h3 class=”login-H3″>De Anza Oaks HOA</h3>
<p class=”return”><img src=”/community/img/Bounced.png” alt=”Bounced”></p>
<input class=”login-int” type=”text” placeholder=”Name”><br />
<p class=”username”>Please enter your user name</p>
<input class=”login-int-a” type=”password” placeholder=”Password”>
<p class=”userp”>Please enter your password</p>
<button class=”login-button”>Login</button>
<div class=”login-div”>
<p class=”login-a”>Forgot your Password?</p>
</div>
</div>
</div>`;
var
handleRemoteLogin =
function() {
var
email =
$(
‘.login-int‘).
val();
var
password =
$(
‘.login-int-a‘).
val();
submitDynamicForm(
data.
_metadata.
root_url +
‘/session‘,
‘POST‘, [{
name:
‘session_form[email]‘,
value:
email }, {
name:
‘session_form[password]‘,
value:
password }, ] ); }
var
handleLogin =
function() {
if (!
$(
‘.login-int‘).
val() && !
$(
‘.login-int-a‘).
val()) {
$(
‘.userp‘).
css(
‘display‘,
‘block‘);
$(
‘.username‘).
css(
‘display‘,
‘block‘)
$(
‘.login‘).
css(
‘height‘,
‘360‘) }
else
if (
$(
‘.login-int‘).
val() ===
‘Test‘ &&
$(
‘.login-int-a‘).
val() !==
‘1215‘ ||
$(
‘.login-int‘).
val() ===
‘admin‘ &&
$(
‘.login-int-a‘).
val() !==
‘1215‘) {
$(
‘.username‘).
css(
‘display‘,
‘none‘)
$(
‘.userp‘).
css(
‘display‘,
‘block‘)
$(
‘.login‘).
css(
‘height‘,
‘330‘) }
else
if (
$(
‘.login-int-a‘).
val() ===
‘1215‘ &&
$(
‘.login-int‘).
val() !==
‘Test‘ ||
$(
‘.login-int-a‘).
val() ===
‘1215‘ &&
$(
‘.login-int‘).
val() !==
‘admin‘) {
$(
‘.username‘).
css(
‘display‘,
‘block‘);
$(
‘.userp‘).
css(
‘display‘,
‘none‘);
$(
‘.login‘).
css(
‘height‘,
‘330‘) }
else
if (
$(
‘.login-int‘).
val() !==
“Test” &&
$(
‘.login-int-a‘).
val() ===
” “ ||
$(
‘.login-int‘).
val() !==
“admin” &&
$(
‘.login-int-a‘).
val() ===
” “) {
$(
‘.login‘).
css(
‘height‘,
‘360‘) }
else
if (
$(
‘.login-int‘).
val() !==
“Test” &&
$(
‘.login-int-a‘).
val() !==
“1215” ||
$(
‘.login-int‘).
val() !==
“admin” &&
$(
‘.login-int-a‘).
val() !==
“1215”) {
$(
‘.username‘).
css(
‘display‘,
‘block‘);
$(
‘.userp‘).
css(
‘display‘,
‘block‘);
$(
‘.login‘).
css(
‘height‘,
‘360‘) }
else
if (
$(
‘.login-int‘).
val() ===
” “ &&
$(
‘.login-int-a‘).
val() !==
“1215”) {
$(
‘.login‘).
css(
‘height‘,
‘360‘) }
else {
if (
$(
‘.login-int‘).
val() !==
‘Test‘ ||
$(
‘.login-int‘).
val() !==
‘admin‘) {
$(
‘.username‘).
css(
‘display‘,
‘block‘)
$(
‘.login‘).
css(
‘height‘,
‘330‘) }
else
if (
$(
‘.login-int-a‘).
val() !==
‘1215‘) {
$(
‘.userp‘).
css(
‘display‘,
‘block‘)
$(
‘.login‘).
css(
‘height‘,
‘330‘) } } }
var
handleFormEnter =
function() {
if (!!
$(
‘.login-int‘).
val() && !!
$(
‘.login-int-a‘).
val()) {
if (
data.
_metadata.
environment ===
‘dev‘) {
if (!!
$(
‘.login-int‘).
val() && !!
$(
‘.login-int-a‘).
val()) {
// TODO: log in user
var
email =
$(
‘.login-int‘).
val();
var
password =
$(
‘.login-int-a‘).
val();
logInUser(
email,
password); }
else {
handleLogin() } }
else {
handleRemoteLogin() } } }
var
username =
data.
_current_user &&
data.
_current_user.
display_name
$(
‘.jump‘).
click(
function() {
var
arr =
$(
this).
attr(
‘data‘)
if (
username || [
‘./city-resources‘,
‘./amenities‘].
includes(
arr)) {
if (
arr) {
window.
location.
href =
`
${
data.
_metadata.
root_url
}
/
${
arr
}
`; }
else {
window.
location.
href =
`
${
data.
_metadata.
root_url
}
/aboutus`; } }
else{
var
_this =
$(
this)
$(
‘body‘).
append(
str);
$(
‘.login-int‘).
on(
‘keypress‘,
function(
e) {
if (
e.
which ==
13) {
handleFormEnter(); } });
$(
‘.login-int-a‘).
on(
‘keypress‘,
function(
e) {
if (
e.
which ==
13) {
handleFormEnter(); } });
$(
‘.login-button‘).
click(
function() {
if (!!
$(
‘.login-int‘).
val() && !!
$(
‘.login-int-a‘).
val()) {
//TODO log in user
var
email =
$(
‘.login-int‘).
val();
var
password =
$(
‘.login-int-a‘).
val();
logInUser(
email,
password) }
else {
handleLogin() }
})
$(
‘.return‘).
click(
function() {
$(
‘.db‘).
remove(); }) } })
if (
username) {
$(
“.btns-language”).
click(
function(
event) {
event.
preventDefault(); })
$(
“.langOv”).
css(
“display”,
“block”) }
else {
$(
“.btns-language”).
click(
function() {
$(
‘body‘).
append(
str);
$(
‘.login-int‘).
on(
‘keypress‘,
function(
e) {
if (
e.
which ==
13) {
handleFormEnter(); } });
$(
‘.login-int-a‘).
on(
‘keypress‘,
function(
e) {
if (
e.
which ==
13) {
handleFormEnter(); } });
var
_this =
$(
this);
$(
‘.login-button‘).
click(
function() {
if (
data.
_metadata.
environment ===
‘dev‘) {
if (!!
$(
‘.login-int‘).
val() && !!
$(
‘.login-int-a‘).
val()) {
// TODO: log in user
var
email =
$(
‘.login-int‘).
val();
var
password =
$(
‘.login-int-a‘).
val();
logInUser(
email,
password); }
else {
handleLogin() } }
else {
handleRemoteLogin() } })
$(
‘.return‘).
click(
function() {
$(
‘.db‘).
remove(); }) }) } };
index.css 纯css文件，不做太多描述。
这里启动的命令行当时是 http-server -d false -c-1
更多内容可直接查看我的github地址 https://github.com/White9999