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

 

index.css  纯css文件，不做太多描述。

 

这里启动的命令行当时是  http-server -d false -c-1

 

 更多内容可直接查看我的github地址   https://github.com/White9999