Skip to content
Permalink
Browse files

SPA首页框架

  • Loading branch information...
mikukonai committed Mar 13, 2019
1 parent 5e0913b commit a004d0c82f2f4c77e0723d7f7ffd444841b4d3f1
Showing with 122 additions and 0 deletions.
  1. +122 −0 index-spa.html
@@ -0,0 +1,122 @@
<!-- Project Aurora - Blog Framework V3.3 (SPA-style)-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/framework.css" charset="utf-8"/>
<title>Project Aurora</title>
</head>
<body>

<!--进度条-->
<div class="progressbar" id="progressbar"></div>
<!--页面框架-->
<div class="main-box">
<!--上部标题-->
<header class="top_title"></header>
<!--栏目切换按钮-->
<div class="top_sticky">
<button class="item_top top_active spa-switch" data-target="index">首 页</button><button class="item_top spa-switch" data-target="inspiration">灵 感</button><button class="item_top spa-switch" data-target="articles">文 章</button><button class="item_top spa-switch" data-target="links">书 签</button><button class="item_top spa-switch" data-target="guestbook">留 言</button><button class="item_top spa-switch" data-target="about">关 于</button>
</div>
<!--SPA页面内容-->
<div class="spa-content"></div>
<!--底部版权栏-->
<footer class="fw-bottom-copyright">
<p class="fw-bottom-copyright-content gradient">☆ Project Aurora V3.3 ☆</p>
<p class="fw-bottom-copyright-content">Copyright © 2016-<span class="copyright_year"></span> Mikukonai</p>
</footer>
</div>
<!--页面框架结束-->

<!--页面内容模板-->
<template id="index"><div style="margin:30px 0;">这是index的内容</div></template>
<template id="inspiration"><div style="margin:30px 0;">这是inspiration的内容</div></template>
<template id="articles"><div style="margin:30px 0;">这是articles的内容</div></template>
<template id="links"><div style="margin:30px 0;">这是links的内容</div></template>
<template id="guestbook"><div style="margin:30px 0;">这是guestbook的内容</div></template>
<template id="about"><div style="margin:30px 0;">这是about的内容</div></template>

<!--题图参数-->
<template id="index-titlebg">url('./image/chitanda.jpg')</template>
<template id="inspiration-titlebg">url(./image/haruhi_hoshizora.jpg)</template>
<template id="articles-titlebg">url('./image/miku-dove.jpg')</template>
<template id="links-titlebg">url('./image/yuki-reading.jpg')</template>
<template id="guestbook-titlebg">url('./image/cover/guestbook.jpg')</template>
<template id="about-titlebg">url('./image/tree.jpg')</template>

<!--上部标题模板-->
<template id="index-title">首页</template>
<template id="inspiration-title">灵感</template>
<template id="articles-title">文章</template>
<template id="links-title">链接</template>
<template id="guestbook-title">留言</template>
<template id="about-title">关于</template>

<!--SPA交互和渲染控制-->
<script src="./js/jquery.min.js"></script>
<script>
function render(pageid) {
// 重置进度条(进度条动作由template里面的内容控制)
$("#progressbar").show();
$("#progressbar").css('width', '0%');
// 页面内容
$('.spa-content').html($(`template#${pageid}`).html());
// 标题
$('.top_title').html($(`template#${pageid}-title`).html());
// 题图
$('.top_title').css('background-image', $(`template#${pageid}-titlebg`).html());
// 按钮光标
$(`[data-target!="${pageid}"]`).removeClass('top_active');
$(`[data-target="${pageid}"]`).addClass('top_active');
}
$('.spa-switch').each(function(i,e) {
$(e).click(()=>{
let targetid = $(e).attr('data-target');
history.pushState({pageid: targetid}, '', `#/${targetid}`);
render(targetid);
});
});
window.onload = function() {
let pageid = null;
var reqArg = (function getRequestArg() {
let reqArgStr = window.document.location.href.match(/\#\/.*$/gi);
return reqArgStr;
})();
if(reqArg !== null) {
pageid = reqArg[0].replace(/^\#\//g, '');
}
else {
pageid = 'index';
}
render(pageid);
if(!history.state) {
history.pushState({pageid: pageid}, '', window.location.href);
}
setCopyrightYear();
};
window.onpopstate = function(e) {
if(!e.state) {
console.log(`目标state为空`);
}
else {
let newTargetId = e.state.pageid;
render(newTargetId);
}
}
function setCopyrightYear() {
let copyrightYearNodes = document.getElementsByClassName('copyright_year');
for(let i = 0; i < copyrightYearNodes.length; i++) {
copyrightYearNodes[i].innerHTML = new Date().getFullYear();
}
}
</script>
</body>
</html>

0 comments on commit a004d0c

Please sign in to comment.
You can’t perform that action at this time.