zoukankan      html  css  js  c++  java
  • [TimLinux] myblog 首页创建

    1. 设计

    2. 结构

    3. 实现

    templates/common/layout.html:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        {% load staticfiles %}
        <meta charset="UTF-8">
        <title>MyBlog</title>
        <link rel="stylesheet" href="{% static 'css/common/layout.css' %}" >
    </head>
    <body>
        <header>
            <div class="logo">MyBlog</div>
            <div class="nav-link">
                <ul>
                    <li><a href="#">博客园</a></li>
                    <li><a href="{% url 'polls:index' %}">首页</a></li>
                    <li><a href="/articles">文章</a></li>
                </ul>
            </div>
            <<div class="login"><a href="/user/login">登陆</a></div>
        </header>
        <div class="content">
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            <p>abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </p>
            {% block content %}{% endblock %}
        </div>
        <footer>&copy;2018 — TimLinux</footer>
    
        <script type="application/javascript" src="{% static 'js/common/layout.js' %}"></script>
        {% block script %}{% endblock %}
    </body>
    </html>
    View Code

    static/css/common/layout.css:

    body {
        margin: 0 auto;
        background-color: #d6fff1;
    }
    
    header {
        background-color: #000;
        position: fixed;
        top: 0;
        left: 0;
        height: 3em;
        width: 100%;
    }
    
    header .logo {
        color: #FFF;
        font-size: 24px;
        padding: 8px 20px 0 40px;
        position: relative;
        float: left;
    }
    
    header .nav-link {
        color: #FFF;
        /*background-color: yellow;*/
        /*border: 1px solid red;*/
        position: relative;
        float: left;
    }
    
    header ul {
        margin: 0;
        padding: 0;
    }
    
    header li {
        position: relative;
        float: left;
        list-style: none;
        /*border: 1px solid red;*/
    }
    
    header li a {
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
        padding: 12px 10px;
        width: 80px;
        text-align: center;
        color: #FFF;
    }
    
    header li a:hover {
        background-color: #4eff6e;
    }
    
    header .login {
        position: relative;
        float: right;
    }
    
    header .login a {
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        padding: 13px 10px;
        width: 40px;
        text-align: center;
        color: #FFF;
    }
    
    header .login a:hover {
        background-color: #4eff6e;
    }
    
    header .selected {
        background-color: #ffac47;
    }
    
    .content {
        margin: 50px 0 30px 0;
        /*border: 1px solid blue;*/
    }
    
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: cornsilk;
        width: 100%;
        text-align: center;
        height: 20px;
    }
    View Code

    static/js/common/layout.js:

    function addLoadEvent(func) {
        var old_onload = window.onload;
        if (typeof old_onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                old_onload();
                func();
            }
        }
    }
    
    function setSelectedNavLink() {
        var navLinks = document.querySelectorAll("a[href^='/']");
        var curPath = location.pathname;
        for (var i=0; i < navLinks.length; i++) {
            var curElement = navLinks[i];
            if (curElement.pathname === curPath) {
                curElement.parentNode.className.replace('selected', '');
                curElement.parentNode.className += ' selected';
            }
        }
    }
    
    addLoadEvent(setSelectedNavLink);
    View Code

    polls/templates/polls/index.html

    {% extends "common/layout.html" %}
    
    {% block content %}
        {{ name }}
    {% endblock %}
    View Code

    myblog/settings.py追加的内容:

    polls/views.py:

    from django.template import loader
    from django.http import HttpResponse
    
    
    def index(request):
        t = loader.get_template("polls/index.html")
        c = {'name': 'TimLinux'}
        return HttpResponse(t.render(c, request))
    View Code

    4. 效果

  • 相关阅读:
    Django配置MySQL数据库教程
    给大家发个Python和Django的福利吧,不要钱的那种~~~
    Django 设置admin后台表和App(应用)为中文名
    Django 配置JWT认证方式
    威联通(NAS)应用篇:自建OwnCloud网盘(百度网盘,拜拜~~~)
    请不要浪费你的生命,一文多发推广就用它(OpenWrite)
    Django ORM 查询表中某列字段值
    【Django 2.2文档系列】Model 外键中的on_delete参数用法
    嵌入式、C语言位操作的一些技巧汇总
    【RT-Thread笔记】IO设备模型及GPIO设备
  • 原文地址:https://www.cnblogs.com/timlinux/p/9142672.html
Copyright © 2011-2022 走看看