您的位置：首页 > 编程语言 > Go语言

django搭建个人博客03，编写首页

2017-04-29 17:55 549 查看

插入一些数据以便编写html-templates

from www.models import *
from django.utils import timezone
tag=tb_tags(name="随笔01abc#$@_adsf",articlecount=3,id=1)
tag.save()
art=tb_articles(title="博客01abc#$@_adf",content_md="博客01abc#$@_adf",
content_html="博客01abc#$@_adf",abstract="博客01abc#$@_adf",
tags=tag,created=timezone.now(),updated=timezone.now())
art.save()
tag.tb_articles_set.all()
comment=tb_comments(articleID=art,content="博客01abc#$@_adf评论1",
IP="123.53.65.101",lefted=timezone.now())

接着可以使用后台管理界面来添加，里面显示的是object之类的标题，是因为没有像官网(django start your first app)一样重写对应类的 __str__ (self) function

html模板设计

www_base.html

index_base.html

articleList_base.html

projList_base.html

articleDetail_base.html

comment_plugin.html

footer_plugin.html

nav_plugin.html

filter_plugin.html

gallery_plugin.html

编写模板文件

<!--www_base.html-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% load static %}
{% block selfstyle %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
</body>
{% block DOMScripts %}{% endblock %}
</html>
<!--end www_base.html-->

<!--footer_plugin.html-->
{% load static %}
<footer>
{% include "www/nav_plugin.html" %}
<div id="copyright">
<p>©2015 GeekCUG Design Contact information:
<a href="hcg10113225@gmail.com"><i>hcg19113225@gmail.com</i></a></p>
</div>
<div id="uyi"><img src="{% static 'www/css/yui.png' %}" onclick="showLaunch()"></div>
</footer>
<!--end footer_plugin.html-->

<!--nav_plugin.html-->
<div id="fullbg" onclick="closeLaunch()"></div>
<div id="launch">
<p><a>首页</a></p>
<p><a>博客列表</a></p>
<p><a>作品一览</a></p>
<p><a>GitHub</a></p>
</div>
<!--end nav_plugin.html-->

<!--index_base.html-->

{% extends "www/www_base.html" %}
{% load static %}
{% block selfstyle %}
<title>GeekCUG</title>
<link rel="stylesheet" href="{% static 'www/css/index_base.css' %}">
<link rel="stylesheet" href="{% static 'www/css/footer_plugin.css' %}">
<link rel="stylesheet" href="{% static 'www/css/nav_plugin.css' %}">
{% endblock %}

{% block content %}
<main>
<div id="center"><h1 id="welcome">Welcome</h1>
</div>
</main>
{% endblock %}

{% block footer %}
{% include "www/footer_plugin.html" %}
{% endblock %}

{% block DOMScripts %}
<script src="{% static 'www/js/footer_plugin.js' %}"></script>
<script src="{% static 'www/js/nav_plugin.js' %}"></script>
{% endblock %}
<!--end index_base.html-->

编写index_base.html所需要的css/js文件

index_base.css

body
{
background:rgb(183,214,230) url(index_base_bg.jpg) no-repeat;
background-attachment:fixed;
background-size:100%;
}
#center
{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
#center>h1
{
font-size:100px;
text-shadow:
1px 1px blanchedalmond,
2px 2px blanchedalmond;
color:azure;
opacity:0.8;
}

footer_plugin.css

footer
{
position:fixed;
width:100%;
bottom:2%;
}

#copyright>p
{
float:left;
position:relative;
left:50%;
transform:translateX(-50%);
color:darkseagreen;
margin: 0px;
padding:0px;
}
#copyright>p>a
{
color:cornflowerblue;
}
#uyi
{
float:right;
position:absolute;
right:2%;
bottom:2%;
}
#uyi>img
{
cursor:pointer;
width:200px;
height:auto;
max-width:100%;
max-height:100%;
transition:width 2s;
}
#uyi>img:hover
{
width:210px;
}

nav_plugin.css

#fullbg
{
display: none;
background-color:darkgray;
left:0px;
right:0px;
top:0px;
bottom:0px;
opacity:0.5;
position:fixed;
z-index:3;
}

#launch
{
display:none;
left:50%;
top:50%;
transform:translate(-50%,-50%);
position:fixed;
z-index:5;
}
#launch>p
{
margin-bottom: 4px;
width:220px;
}
#launch>p>a
{
color:#333;
cursor:pointer;
font-size:20px;
display:block;
width:190px;
padding:12px;
background-color:ghostwhite;
opacity:0.9;
text-align: center;
text-decoration: none;
}
#launch>p>a:hover
{
color:white;
padding:11px;
border: white 1px solid;
background-color:darkorange;
opacity:1;
}

footer_plugin.js

function showLaunch()
{
var bh=window.innerHeight;
var bw=window.innerWidth;
$("#fullbg").css({height:bh,width:bw,display:"block"});
$("#launch").slideDown(800);
}

nav_plugin.js

function closeLaunch()
{
$("#launch").slideUp(800);
$("#fullbg").hide();
}

添加url解析

vim mysite/urls.py

url(r'^blogs/',include('www.urls')),

vim www/urls.py

from django.conf.urls import url
from . import views
app_name='www'
urlpatterns=[
url(r'^$',view.indexView,name='indexView'),
]

vim www/views.py

from django.shortcuts import render
from .models import *
def indexView(request):
return render(request,'www/index_base.html',{})

python3 manage.py migrate

python3 manage.py runserver 0:8000

先看看效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： django 博客

相关文章推荐

新的分享

章节导航