• [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. 效果

  • 相关阅读:
    跟着太白老师学python 10day 函数的动态参数 *args, **kwargs, 形参的位置顺序
    IO 流之字符流的缓冲区
    Java IO异常处理方式
    Java IO 流
    Java 其他对象的 API
    Java 集合框架之 JDK 1.5 新特性
    Java 集合框架工具类
    Java 集合框架之 Map
    Java 集合框架查阅技巧
    Java 集合框架之泛型
  • 原文地址:https://www.cnblogs.com/timlinux/p/9142672.html
Copyright © 2020-2023  润新知