Web偏传统网站模板

Posted lujihang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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:‘[email protected]‘

　　　　　　　　　　}

　　　　　　　　}

　　　　</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: ‘[email protected]‘,
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

以上是关于Web偏传统网站模板的主要内容，如果未能解决你的问题，请参考以下文章

SharePoint - 将 Web 部件从模板网站克隆到新网站 - XML 错误

Web网站模板-响应式个人企业照片墙展示网站模板(HTML+CSS+JavaScript)

Web网站模板-响应式旅游旅行团酒店预订展示网站模板(HTML+CSS+JavaScript前端大作业)

Web网站模板-响应式企业产品介绍模板(HTML+CSS+JavaScript)

powershell 此SharePoint Powershell脚本会检查网站集和Web应用程序中的所有网站，以查找特定的Web模板

触屏uehtml手机版html5手机网站源码后台怎么进