Django開發博客- 頁面美化

本文轉載自查看原文 2016-07-10 00:52 4280 Django

css是一種用來描述某種標記語言寫的web站點的樣式語言。這里我們並不想展開討論，關於CSS我在這里推薦一個很不錯的資源： Codeacademy HTML & CSS course

不想從頭開始寫，因為我們有現成的css框架，沒必要重復造輪子。

使用Bootstrap

目前最流行的css框架非bootstrap莫屬了，官網地址：http://getbootstrap.com/

只需要在你的html模板頁面的開始部分添加下面幾句就行了

1
2
3

<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>

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

再次打開模板文件，效果如下：

是不是感覺變美觀了。^_^

django靜態文件

這里我還將講解下django中的靜態文件。靜態文件就是css、js、圖片、視頻等等那些內容不會改變的文件，不管任何時候，對於任何用戶都是一樣的。

css就是一種靜態文件，為了自定義css，我們必須先再django中配置，你只需要配置一次就可以了。那讓我們馬上開始吧！

django中配置靜態文件

首先我們需要創建一個目錄來存儲靜態文件，在manage.py的同級目錄中創建一個static文件夾

mysite
├─── static
└─── manage.py

打開配置文件mysite/settings.py，在最后面添加如下配置：

1
2
3

STATICFILES_DIRS = (
 os.path.join(BASE_DIR, "static"),
)

它告知django應該在哪個位置去查找靜態文件。

第一個CSS文件

現在我們開始創建自己的css文件了，首先在static目錄中新建一個css目錄，然后在里面創建一個blog.css文件。目錄結構如下

static
└─── css
 └───blog.css

打開文件static/css/blog.css后，添加如下內容

1
2
3

h1 a {
 color: #FCA205;
}

h1 a是CSS選擇器，上面的意思是在h1標簽下的鏈接a的文字顏色會是#FCA205，其實就是橘黃色，顏色都是用十六進制表示的。

接下來我們要讓模板加載靜態css文件，打開blog/templates/blog/post_list.html，在最開始部分加入：

{% load staticfiles %}

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

<link rel="stylesheet" href="{% static 'css/blog.css' %}">

最后，整個模板文件類似這樣：

{% 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="{% static 'css/blog.css' %}">
 </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，保存並刷新后看看效果

我想要文字左邊的邊距大一點，這樣會好看些。那么在blog.css中添加如下內容：

1
2
3

body {
 padding-left: 15px;
}

刷新頁面后效果：

我還想自定義文字標題的字體，在post_list.html模板的中添加如下一句

1	<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">

這句會引入Google的一個字體Lobster，然后修改blog.css中的h1 a的樣式如下：

h1 a {
 color: #FCA205;
 font-family: 'Lobster';
}

刷新后的效果：

CSS中的class

在CSS中有一個class的概念，它可以讓你只改變HTML中某一部分的樣式而不會影響到其他部分。

這里我們將區別標題頭和文章本身的樣式。

在post_list.html中添加如下的標題段：

1
2
3

<div class="page-header">
 <h1><a href="/">Django Girls Blog</a></h1>
</div>

文章列表段修改如下：

<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樣式修改如下：

.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;
}

保存這些文件后，刷新頁面，看看，是不是很酷了：

已經比較美觀了。上面的css應該看起來不會那么難，可以自己試着去修改它，沒關系的，反正出錯了可以撤銷。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 博客園頁面美化博客園頁面美化源代碼八、Django學習：使用css美化頁面 Django個人博客開發 | 前言博客園SimpleMemory皮膚的頁面美化--感謝BNDong大佬博客園自動生成目錄及頁面美化記一次博客頁面美化過程,分享代碼. 用html頁面模板使用django完成個人博客 Django博客開發教程,Django快速開發個人blog Django1.9開發博客（7）- 實現功能