首页 > 代码库 > 换掉那个丑炸天的界面(django博客搭建)
换掉那个丑炸天的界面(django博客搭建)
在做界面之前我们先给我们文章的显示加上了markdown，至于声明时markdown可以自行百度，至于怎么加上markdown我们在这就不做讨论了，博主就直接贴出教程地址吧~
django1.8下的markdown，highlight, pagedown解决
好啦 现在就开始给我们的博客主页改头换面
首先，我们在我们myblog/article/templates/目录下新建一个base.html文件，这个html文件会放置我们整个博客系统最基本的网站前端骨架不笨，比如布局和导航～
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>My First Blog</title></head><body></body></html>
我假装你们已经看了上面的markdown配置教程
首先我们得从新构建我们的模板文件，先修改我们的base.html，引入高亮js和css，加上title block和container blok，更利于以后的扩展
{% load staticfiles %}<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<script src="http://www.mamicode.com/{% static ‘highlight/highlight.pack.js‘ %}"></script>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/{% static ‘highlight/styles/monokai-sublime.css‘ %}">
<title>{% block title %}{% endblock %}</title></head><script>hljs.initHighlightingOnLoad();</script><body>{% block container %}
{% endblock %}</body></html>对于我们博客本身的功能先不做扩展。index.html我们依然只是显示所有文章的一个列表,代码如下：
{% extends "base.html" %}
{% load custom_markdown %}
{% block container %} <div>
{% for article in article_list %} <h1><a href="http://www.mamicode.com/#">{{ article.title }}</a></h1>
<p>
Time: {{ article.create_time }} </p>
<p>
{{ article.content|custom_markdown }} </p>
{% endfor %} </div>{% endblock %}关于block的只是请看我们的官方中文文档，当然你想看英文的也可以，我们给出中文文档的链接
模板概述
现在我们主要编辑的还是我们的base.html,因为我们要先做好整体的网站布局和导航～
为了方便，我们前端会用到bootstrap，一般我们会把bootstrap下载到本地，为了方便我们就直接以链接的方式引入～
<head> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head>
我个人更喜欢导航条的方式，各位可以根据自己 的喜欢自己引用css～
bootstrap中文文档
以下内容建议大家先学一下bootstrap，不然估计看不懂
bootstrap视频教程
虽然有点啰嗦，不过我还是一句一句的把每个代码进行说明，其实博主写博客的时候也是边学边写，学会了就用，会用了就写成博客～
<body><!-- bootstrap建议用nav --大家学习的时候最好不要直接贴代码，因为从外到内一个class的测试看时什么效果 --><nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"><!-- sr-only 是为了适应移动终端，因为bootstrap的思想是移动端优先， date-toggle是为了让这个按钮与collapse关联，date-target指出关联哪个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> <!--这个自己测试就知道时干嘛用的 --> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.mamicode.com/#">Blog</a> </div> </div> ...</nav>
好啦贴出按着我自己的喜好的导航条
<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> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.mamicode.com/#">Blog</a> </div> <div class="collapse navbar-collapse pull-right" id="navbar-collapse-1" > <ul class="nav navbar-nav"> <li><a href="http://www.mamicode.com/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li> <li><a href="http://www.mamicode.com/#"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> 关于我</a></li> </ul> </div> </div></nav>
我们也得把文章条目的显示也美化下～这里我们用到了折叠插件。我们现在实现的是一个叫做手风琴的效果，打开index.html
<div class="panel-group" id="accordion">
{% for article in article_list %} <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="http://www.mamicode.com/#collapse{{ article.id }}" data-toggle="collapse" data-parent="#accordion">{{ article.title }}</a>
</h4>
</div>
<div id="collapse{{ article.id }}" class="peal-collapse collapse">
<div class="peal-body">
{{ article.content|custom_markdown }} </div>
</div>
</div>
{% endfor %}</div>目前就先这样吧～以后随着博客系统的完善，再慢慢改变界面～
本文出自 “机制小风风” 博客，请务必保留此出处http://xiaofengfeng.blog.51cto.com/8193303/1885770
换掉那个丑炸天的界面(django博客搭建)