Bootstrap+django Quickly build a blog

I. Development environment

Operating system: Windows 7

Python version: 2.7.5

Django Version: 1.7.4

Bootstrap version: v3.3.2

Second, create the project

Note: The command to create a project is as follows because there are no changes to the system's environment variables

Let's take a look at what's in this project.

You can see that the Startproject command creates a manage.py file and a MySite folder that contains settings.py, urls.py, wsgi.py, __init__.py four files.

A tool that interacts with a Django project when manage.py files.

The purpose of the __init__.py file is to turn a directory into a python package.

The settings.py file contains the default settings for the project, including database information, debug flags, and so on.

The urls.py file, called urlconf in Django, is a configuration file that maps URL patterns to your application.

wsgi.py is an entry file for WSGI Web applications (about its specific effects we'll talk about later).

Third, modify the configuration file

Edit settings.py File

Because the profile defaults to use the Sqlite3 database, where I used the MySQL database, so the settings.py file to the right of the image above, the database name, user name, password, host, port number you can use according to their own configuration, Among them Language_code, Time_zone, use_i18n, use_l10n, Use_tz and so on the meaning can refer to the official document, here will not repeat.

Four, run the development server

Since django1.7 has changed a lot from previous versions, you need to execute the Python manage.py migrate to create the database before executing the Python manage.py runserver, as shown in the following illustration.

At this point, we can access http://127.0.0.1:8000/in the browser to see the following page

V. Create blog Application

After executing the python manage.py Startapp blog application, you can see that a blog folder is automatically generated, as shown in the previous image.

Next, edit the settings.py configuration file and add our new blog app to the profile.

As shown in the picture, do not forget the comma at the end, otherwise it will be an error ....

VI. Design database table structure

Next we are going to design our database table structure to define our model.

Edit the models.py file under the Blog folder and add the code shown in the following illustration

Then edit the admin.py file under the Blog folder and add the code shown in the following figure

Next, apply the changes above and create a user who accesses the admin backend.

Using the browser to open the Http://127.0.0.1:8000/admin, you can see the following interface

Enter the user name and password we just created to login to see the following interface

Click the Add button on the right of blog posts, let's add a post

Then click on the Save button to complete a post added work, will jump to the following page.

7, create the user can see the blog template

Create a static folder and Templates folder at the same level as the blog folder, and then create a blog folder under the static folder and Templates folder, as shown in the following illustration

Create a new archive.html file under the Templates Blog folder and add the following

{% load staticfiles%}
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta name= "description" content= "" >
<meta name= "Author" content= "" >
<link rel= "icon" href= "{% static" Favicon.ico "%}" >


<title>my blog</title>


<!--Bootstrap Core CSS-->
<link href= "{% static" Bootstrap/3.3.2/css/bootstrap.min.css "%}" rel= "stylesheet" >


<!--Custom styles for this template-->
<link href= "{% static" Blog/blog.css "%}" rel= "stylesheet" >


<!--Just for debugging purposes. Don ' t actually copy these 2 lines! -->
<!--[if LT IE 9]><script src= "{% static" Assets/js/ie8-responsive-file-warning.js "%}" ></script> <! [endif]-->
<script src= "{% static" Assets/js/ie-emulation-modes-warning.js "%}" ></script>


<!--HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries-->
<!--[If Lt IE 9]>
<script src= "{% static" Html5shiv/3.7.2/html5shiv.min.js "%}" ></script>
<script src= "{% static" Respond.js/1.4.2/respond.min.js "%}" ></script>
<! [endif]-->


<body>
<div class= "Blog-masthead" >
<div class= "Container" >
<nav class= "Blog-nav" >
<a class= "Blog-nav-item Active" href= "#" >Home</a>
<a class= "Blog-nav-item" href= "#" >new features</a>
<a class= "Blog-nav-item" href= "#" >Press</a>
<a class= "Blog-nav-item" href= "#" >new hires</a>
<a class= "Blog-nav-item" href= "#" >About</a>
</nav>
</div>
</div>


<div class= "Container" >
<div class= "Row" >


<div class= "Col-sm-8 blog-main" >
{% for post in posts%}
<div class= "Blog-post" >
&LT;H2 class= "Blog-post-title" >{{post.title}}<p class= "Blog-post-meta" >{{post.timestamp}}</p>


<p>{{Post.body}}</p>
</div><!--/.blog-post-->
{% ENDFOR%}
</div><!--/.blog-main-->
</div><!--/.row-->
</div><!--/.container-->


<footer class= "Blog-footer" >
<p>blog template built for <a href= "http://getbootstrap.com" >Bootstrap</a> by <a href= "https://" Twitter.com/mdo "> @mdo </a>.</p>
<p>
<a href= "#" >back to Top</a>
</p>
</footer>


<!--Bootstrap Core JavaScript
==================================================-->
<!--Placed at the "End of" the document so the pages load faster-->
<script src= "{% static" Jquery/1.11.2/jquery.min.js "%}" ></script>
<script src= "{% static" Bootstrap/3.3.2/js/bootstrap.min.js "%}" ></script>
<script src= "{% static" Assets/js/docs.min.js "%}" ></script>
<!--IE10 viewport hack for surface/desktop Windows 8 bug-->
<script src= "{% static" Assets/js/ie10-viewport-bug-workaround.js "%}" ></script>
</body>

Then edit the views.py file under the blog and add the following

From django.shortcuts Import Render


From Blog.models Import blogpost


DEF archive (Request):
Posts = BlogPost.objects.all ()
return render (Request, ' blog/archive.html ', {' posts ': posts})

Then edit the urls.py file under the MySite folder and add the following

From Django.conf.urls import patterns, include, url
From Django.contrib Import admin


Urlpatterns = Patterns ("",
# Examples:
# URL (R ' ^$ ', ' mysite.views.home ', name= ' home '),
URL (r ' ^blog/', include (' Blog.urls ')),


URL (r ' ^admin/', include (Admin.site.urls)),
)

and create a new urls.py file under the Blog folder, where you add the following

From django.conf.urls import patterns, url


Urlpatterns = Patterns ("",
URL (r ' ^$ ', ' blog.views.archive ', name= ' archive '),
)

Put our referenced static files under the static folder under the specified folder

You can then access http://127.0.0.1:8000/blog/in the browser to see the following effects

The source code can be downloaded in the attachment