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>

　　 <body>

　　　　<div id="content"></div> 　　　　//将body.html内容放置在此div中

　　　　　　var data = {　　　　　　　　// 放置json数据

　　　　　　　　current_user:{

　　　　　　　　　　　　　id:1,

　　　　　　　　　　　　　email:'tomLu@gmail.com.cn'

　　　　　　　　　　}

　　　　</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中用

　　　　</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}}&nbsp;({{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();
})
})
}
};