Web偏传统网站模板
传统网站更应该注意的是数据缓存，加载速度，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
https://github.com/White9999
