176 lines
5.1 KiB
HTML
176 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<!-- 网站主语言 -->
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<!-- 网站采用的字符编码 -->
|
|
<meta charset="utf-8">
|
|
<!-- 网站标题 -->
|
|
<title>首页</title>
|
|
|
|
<!-- 引入bootstrap的css文件 -->
|
|
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
|
|
<!-- 引入monikai.css -->
|
|
<link rel="stylesheet" href="../static/md_css/monokai.css">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
|
<!--导入css-->
|
|
<link rel="stylesheet" href="../static/common/common.css">
|
|
<link rel="stylesheet" href="../static/common/zhan.css">
|
|
<link rel="stylesheet" href="../static/common/jquery.pagination.css">
|
|
<!-- 引入vuejs -->
|
|
<script type="text/javascript" src="../static/js/vue-2.5.16.js"></script>
|
|
<script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script>
|
|
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
|
|
</head>
|
|
<style>
|
|
body{
|
|
background-image:url("../../static/img/9.jpg") ;
|
|
background-size: 1920px,1001.19px;
|
|
|
|
}
|
|
.loader {
|
|
animation-name:animate;
|
|
position: absolute;
|
|
left:45%;
|
|
top:30%;
|
|
box-shadow: 0 0 10px blue;
|
|
width: 200px;
|
|
height: 200px;
|
|
color: #fff;
|
|
/* 圆角形成圆形 */
|
|
border-radius: 50%;
|
|
/* 实现顶部圆弧 */
|
|
border-top: 5px solid cornflowerblue;
|
|
|
|
border-bottom: 5px solid transparent;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* 增加动画 */
|
|
animation: animate 1s linear infinite;
|
|
}
|
|
|
|
.loader::after, .loader::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: -5px;
|
|
border-radius: 50%;
|
|
border-bottom: 4px solid transparent;
|
|
/* background-color: wheat; */
|
|
}
|
|
|
|
@keyframes animate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
.navbar navbar-expand-lg navbar-dark bg-dark{
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
</style>
|
|
<body>
|
|
|
|
|
|
|
|
<div id="app">
|
|
<!-- 定义导航栏 -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
|
|
<div class="container">
|
|
<!-- 导航栏商标 -->
|
|
<div>
|
|
<a class="navbar-brand" href="./index.html">个人博客</a>
|
|
<div class="touxiang "></div>
|
|
</div>
|
|
<!-- 分类 -->
|
|
<div class="collapse navbar-collapse">
|
|
<div>
|
|
<ul class="nav navbar-nav">
|
|
{# <li class="nav-item active">#}
|
|
{# <a class="nav-link mr-2" href="#">Python</a>#}
|
|
{# </li>#}
|
|
{# <li class="nav-item">#}
|
|
{# <a class="nav-link mr-2" href="#">Java</a>#}
|
|
{# </li>#}
|
|
{# <li class="nav-item">#}
|
|
{# <a class="nav-link mr-2" href="#">C</a>#}
|
|
{# </li>#}
|
|
{# <li class="nav-item">#}
|
|
{# <a class="nav-link mr-2" href="#">C++</a>#}
|
|
{# </li>#}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--登录/个人中心-->
|
|
<div class="navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
|
|
<!-- 如果用户已经登录，则显示用户名下拉框 -->
|
|
<li class="nav-item dropdown" v-if="is_login">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">[[username]]</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu">
|
|
<a class="dropdown-item" href='login/'>登录</a>
|
|
<a class="dropdown-item" href="{% url 'users:writeblog' %}">写文章</a>
|
|
|
|
<a class="dropdown-item" href='{% url 'users:logout' %}'>退出登录</a>
|
|
</div>
|
|
</li>
|
|
<!-- 如果用户未登录，则显示登录按钮 -->
|
|
<li class="nav-item" v-else>
|
|
<a class="nav-link1" href="login.html">登录</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- content -->
|
|
<div class="loader">
|
|
</div>
|
|
|
|
<div class="main"
|
|
></div>
|
|
<div class="main2"
|
|
></div>
|
|
<div class="tupain"
|
|
></div>
|
|
|
|
<div class="blog_1 ">
|
|
<a class="blog_text" href='wenzhang/'>博客</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- 引入js -->
|
|
<script type="text/javascript" src="../static/js/host.js"></script>
|
|
<script type="text/javascript" src="../static/js/common.js"></script>
|
|
<script type="text/javascript" src="../static/js/index.js"></script>
|
|
<script type="text/javascript" src="../static/js/jquery.pagination.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$('#pagination').pagination({
|
|
currentPage: 15,
|
|
totalPage: 30,
|
|
callback:function (current) {
|
|
|
|
location.href = '/';
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |