Django开发博客- static文件夹

使用Bootstrap

目前最流行的css框架非bootstrap莫属了,官网地址:http://getbootstrap.com/

只需要在你的html模板页面的开始部分添加下面几句就行了

或者把他下载好的放到static里面

1
2
3
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap-theme.min.css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/4.2.0/js/bootstrap.min.js”></script>

你的工程里面不需要引入任何的文件,因为这里直接引用了bootstrap公共的css和js文件。

再次打开模板文件,效果如下:

《Django开发博客- static文件夹》

是不是感觉变美观了。^_^

django静态文件

这里我还将讲解下django中的静态文件。静态文件就是css、js、图片、视频等等那些内容不会改变的文件,不管任何时候,对于任何用户都是一样的。

css就是一种静态文件,为了自定义css,我们必须先再django中配置,你只需要配置一次就可以了。那让我们马上开始吧!

django中配置静态文件

首先我们需要创建一个目录来存储静态文件,在manage.py的同级目录中创建一个static文件夹

lncms
├─cms
| └ ── static
└─── manage.py

打开配置文件,lncms/settings.py,在最后面添加如下配置:

1 STATIC_URL = ‘/static/’
《Django开发博客- static文件夹》

使用Django静态设置时,遇到很多问题,经过艰苦的Baidu, stack overflow, Django原档阅读,终于把静态图片给搞出来了。特记录下来。

关键的概念:Django中,静态资源的存放通过设置 STATIC_URL, STATICFILES_DIRS 来设置,一般STATIC_URL设置为:/static/

STATIC_URL=’/static/’, 这个static 是在Django 具体APP下建立的static目录,用来存放静态资源。而STATICFILES_DIRS一般用来设置通用的静态资源,对应的目录不放在APP下,而是放在Project下,例如:

STATICFILES_DIRS=(os.path.join(BASE_DIR, “common_static”),)

具体在模板文件中访问的时候,都是统一用:/static/资源名的方式,就可以访问到资源,不论具体的目录是APP下的static,还是project下的common_static, 都可以用/static/资源名的方式访问到。

为增强可移植性,在模板中可以用:STATIC_URL来代替具体的/static/来设置资源路径,但是需要在settings.py中2个地方进行设置,否则会发生取不到资源的错误:

1. INSTALLED_APPS 中,加入 ‘django.contrib.staticfiles’

2. TEMPLATES 中,context_processors中,加入django.template.context_processors.static

模板中调用时:

<img src=”{{STATIC_URL}}pic.jpg%20″ />

它告知django应该在哪个位置去查找静态文件。

第一个CSS文件

现在我们开始创建自己的css文件了,首先在static目录中新建一个css目录,然后在里面创建一个blog.css文件。目录结构如下

static
└─── css
└───ln.css

打开文件static/css/blog.css后,添加如下内容

1
2
3
h1 a {
color: #FCA205;
}

h1 a是CSS选择器,上面的意思是在h1标签下的链接a的文字颜色会是#FCA205,其实就是橘黄色,颜色都是用十六进制表示的。

接下来我们要让模板加载静态css文件,打开blog/templates/cms/list.html,在最开始部分加入:

{% load static %}

然后在bootstrap引用的后面添加下面这句

<link rel=”stylesheet” href=”{%%20static%20’ln.css’%20%}”>

最后,整个模板文件类似这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{% load staticfiles %}
<html>
<head>
<title>Django Girls blog</title>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>
<link rel=”stylesheet” href=”{%%20static%20’ln.css’%20%}”>
</head>
<body>
<div>
<h1><a href=”/”>Django Girls Blog</a></h1>
</div>

{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h1><a href=””>{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</body>
</html>

OK,保存并刷新后看看效果

《Django开发博客- static文件夹》

我想要文字左边的边距大一点,这样会好看些。那么在blog.css中添加如下内容:

1
2
3
body {
padding-left: 15px;
}
《Django开发博客- static文件夹》

CSS中的class

在CSS中有一个class的概念,它可以让你只改变HTML中某一部分的样式而不会影响到其他部分。

这里我们将区别标题头和文章本身的样式。

在post_list.html中添加如下的标题段:

1
2
3
<div class=”page-header”>
<h1><a href=”/”>Django Girls Blog</a></h1>
</div>

文章列表段修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class=”content”>
<div class=”row”>
<div class=”col-md-8″>
{% for post in posts %}
<div class=”post”>
<h1><a href=””>{{ post.title }}</a></h1>
<p>published: {{ post.published_date }}</p>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</div>
</div>

blog.css样式修改如下:

1
2
3
4
5
6
7
8
9
10
1
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
335
36
37
38
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: ‘Lobster’, cursive;
}
.date {
float: right;
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h1 a, .post h1 a:visited {
color: #000000;
}

保存这些文件后,刷新页面,看看,是不是很酷了:

《Django开发博客- static文件夹》

已经比较美观了。上面的css应该看起来不会那么难,可以自己试着去修改它,没关系的,反正出错了可以撤销。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注