In the interface before we give the display of our article plus markdown, as for the declaration markdown can self-Baidu, as to how to add markdown we do not discuss in this, Bo master directly posted the tutorial address it ~
django1.8 under the markdown,highlight, PageDown solve
Okay, now start a makeover on our blog homepage.
First, we create a new base.html file in our myblog/article/templates/directory, this HTML file will be placed in our entire blog system the most basic site front end skeleton is not stupid, such as layout and navigation ~
<!doctype html>I pretend you've seen the markdown configuration tutorial above.
First we have to re-build our template files, first modify our base.html, the introduction of highlighting JS and CSS, plus the title block and container Blok, more conducive to future expansion of the
{% load staticfiles %}<!doctype html>do not expand the functionality of our blog itself. Index.html we are still just showing a list of all the articles, the code is as follows:
{% extends "base.html" %} {% load custom_markdown %} {% block container %} <div> {% for article in article_list %}About block is just to see our official Chinese documents, of course, you want to see the English language can also, we give a link to the Chinese document
Template overview
Now our main editing is still our base.html, because we have to do the overall site layout and navigation ~
for convenience, we will use the front-end bootstrap, generally we will download bootstrap to the local, in order to facilitate our direct link to the way to introduce ~
I personally prefer the way the navigation bar, you can according to their own likes to quote css~
Bootstrap Chinese documents
The following suggested that we first learn bootstrap, otherwise you can not understand
Bootstrap Video Tutorial
Although a bit verbose, but I still a sentence of each code to explain, in fact, bloggers when blogging is also learning while writing, learned to use, will be used to write a blog ~
<body><!-- bootstrap Recommended nav --everyone to learn when it is best not to paste the code directly, because from the outside to the inside of a class test look at what effect --><nav class= "Navbar navbar-default" > <div class= "Container-fluid" > <div class= "Navbar-header" ><!-- sr-only is to adapt to the mobile terminal, because the idea of Bootstrap is the mobile side first, date-toggle is to let this button associated with collapse, Date-target point out which id -- > <button type= "button" class= "Navbar-toggle" date-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" aria-expanded= "false" > <span class= "Sr-only" >Toggle navigation</span> <span class= "Icon-bar" ></span> <!--know what to do with this test. --> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button > <a class= "Navbar-brand" href= "#" >Blog</a> </div> </div> ...</nav>> Okay, post the navigation bar that's in my favor
<body style= "padding-top: 40px;" ><nav class= "Navbar navbar-inverse navbar-fixed-top" role= "Navigation" > <div class= "Container-fluid" > < div class= "Navbar-header" > < Button type= "button" class= "navbar-toggle collapsed" date-toggle= "collapse" data-target= "#navbar-collapse-1" aria-expanded= "false" > <span class= "Sr-only" >Toggle navigation </span> <span class= "Icon-bar" ></SPAN>&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&Nbsp; <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button > <a class= "Navbar-brand" href= "#" >Blog</a> </div> <div class= "Collapse navbar-collapse pull-right" id= " Navbar-collapse-1 " > <ul class= "Nav navbar-nav" > <li><a href= "/" ><span class= "Glyphicon glyphicon-home" aria-hidden= "true" >≪/span> Home </a></li> <li><a href= "#" ><span class= "glyphicon Glyphicon-heart-empty " aria-hidden=" true "></span> about me </a></li> </ul> </div> </div></nav>We also have to beautify the display of article entries-here we use the folding plugin. What we are now implementing is an effect called an accordion that opens index.html
<div class= "Panel-group" id= "accordion" > {% for article In article_list %} <div class= "panel Panel-default "> <div class=" Panel-heading ">At present, this is the first ~ after the improvement of the blog system, and then slowly change the interface ~
This article is from the "mechanism of small Wind" blog, please be sure to keep this source http://xiaofengfeng.blog.51cto.com/8193303/1885770
Replace the ugly-fried-Sky Interface (Django Blog building)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
