Djangoの学習：ブログページ応答レイアウト（10）

その他 2019-08-27 20:08:05 訪問数: null

詳細ページ応答レイアウトを変更するには、ブートストラップグリッドシステムを使用する必要があります。そしてので密着ページやアプリ、関連するアプリテンプレートフォルダへの最良のテンプレートファイルの。

  • 移動mysite templates blogするフォルダをmysite blog templates以下のフォルダ

  • 修正blog_list.html

{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                {% for blog in blogs %}
                    <a href="{% url 'blog_detail' blog.pk %}">
                    <h3>{{ blog.title }}</h3>
                    </a>
                    <p>{{ blog.content|truncatechars_html:30 }}</p>

                {% empty %}
                    <p>-- 暂无博客，敬请期待 --</p>
                {% endfor %}
                    <p>一共有{{ blogs|length }}篇博客</p>
            </div>
            <div class='col-md-4'>
                <h4>博客分类</h4>
            </div>
    </div>
    
{% endblock %}

ブログの分類を使用するために、我々は必要なmysite views.pyすべてのブログのタイプを取得し、ファイルを変更します

  • 変更しmysite views.pyたファイルを
from django.shortcuts import render_to_response,get_object_or_404
from .models import Blog, BlogType

# Create your views here.

def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)


def blog_detail(request,blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog/blog_detail.html', context)


def blogs_with_type(request, blog_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    context['blogs'] = Blog.objects.filter(blog_type=blog_type)
    context['blog_type'] = blog_type
    return render_to_response('blog/blogs_with_type.html', context)
  • blog_list.html`ファイルを変更します
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                {% for blog in blogs %}
                    <a href="{% url 'blog_detail' blog.pk %}">
                    <h3>{{ blog.title }}</h3>
                    </a>
                    <p>{{ blog.content|truncatechars_html:30 }}</p>

                {% empty %}
                    <p>-- 暂无博客，敬请期待 --</p>
                {% endfor %}
                    <p>一共有{{ blogs|length }}篇博客</p>
            </div>
            <div class='col-md-4'>
                <h4>博客分类</h4>
                <ul>
                    {% for blog_type in blog_types %}
                        <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                    {% empty %}
                        <li>暂无分类</li>
                    {% endfor %}
                </ul>
            </div>
    </div>
    
{% endblock %}

入力127.0.0.1:8000/blogビュー

参照https://v3.bootcss.com/components/#panelsパネルを追加

  • 変更しblog_list.htmlたファイルを
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                {% for blog in blogs %}
                    <a href="{% url 'blog_detail' blog.pk %}">
                    <h3>{{ blog.title }}</h3>
                    </a>
                    <p>{{ blog.content|truncatechars_html:30 }}</p>

                {% empty %}
                    <p>-- 暂无博客，敬请期待 --</p>
                {% endfor %}
                    <p>一共有{{ blogs|length }}篇博客</p>
            </div>
            <div class='col-md-4'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                </div>
                    </div>
            </div>
    </div>
    
{% endblock %}

表示するには、ページを更新

ブログポイントの分類を削除するには、CSSスタイルを追加するためのULラベル

<ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>

次のようにページが行きます：

同じパネルも変更し、ブログにコンテンツを追加しblog_list.htmlたファイルを

{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <a href="{% url 'blog_detail' blog.pk %}">
                            <h3>{{ blog.title }}</h3>
                        </a>
                        <p>{{ blog.content|truncatechars_html:30 }}</p>

                        {% empty %}
                            <p>-- 暂无博客，敬请期待 --</p>
                        {% endfor %}
                            <p></p>
                    </div>
                </div>
                
            </div>
            <div class='col-md-4'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

画面が小さい画面を引っ張っすると、ブログの内容とブログのリストが行くように一つにマージされます、我々は画面のさまざまな設定する必要があります。

  • 変更しblog_list.htmlたファイルを
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <a href="{% url 'blog_detail' blog.pk %}">
                            <h3>{{ blog.title }}</h3>
                        </a>
                        <p>{{ blog.content|truncatechars_html:30 }}</p>

                        {% empty %}
                            <p>-- 暂无博客，敬请期待 --</p>
                        {% endfor %}
                            <p></p>
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}
  • ulラベルのcssスタイルを個別に抽出：ではmysite static、以下のフォルダに新しいファイルを作成するにはblog.css、blog_list.htmlファイルのulラベルを追加するclassプロパティをblog_types。

blog.css

ul.blog_types {
    list-style-type: none;
}
  • 変更blog_list.htmlの導入blog.css静的ファイルを
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <a href="{% url 'blog_detail' blog.pk %}">
                            <h3>{{ blog.title }}</h3>
                        </a>
                        <p>{{ blog.content|truncatechars_html:30 }}</p>

                        {% empty %}
                            <p>-- 暂无博客，敬请期待 --</p>
                        {% endfor %}
                            <p></p>
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

一貫性を保つため、するblog.cssにファイルを移動app。ではblog app、次の確立staticにフォルダをstatic作成するには、以下のフォルダblogのフォルダを、blog.cssそこにファイルを移動します。

  • 修正blog_list.html、参照cssパス
{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

あなたは同じ結果ページを取得することができます。

  • さらなる最適化blog_list.htmlページ
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}
  • 最適化されたページの表示、変更blog.css、ファイルを
ul.blog_types {
    list-style-type: none;
}
div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
div.blog h3 {
    margin-top: 0.5em;
}
div.blog p.blog-info {
    margin-bottom: 0;
}

このような現在のページ。

  • 分類と増加のブログ記事は、修正blog_list.htmlファイルを次のように
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p class="blog_info">
                                分类：<a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a>
                                发表日期：{{ blog.created_time|date:"Y-m-d" }}
                            </p>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

ブログのページ次のように：

さらに参照するとhttps://v3.bootcss.com/components/#glyphicons-examplesアイコンの代わりのフォントを使用しています

  • 変更しblog_list.htmlたファイルを
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p class="blog_info">
                                <span class="glyphicon glyphicon-tag"></span><a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a>
                                <span class="glyphicon glyphicon-time"></span>{{ blog.created_time|date:"Y-m-d" }}
                            </p>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

ページは次のよう：

すべてのブログは、すべてのブログのリストページでカテゴリが一覧表示されますので、類似した拡張テンプレートのブログのリストで使用することができます

  • 変更しblog_list.htmlたファイルを
<div class="panel-heading">{% block blog_list_title %}博客列表(一共有{{ blogs|length }}篇博客){% endblock %}</div>
  • 変更blogs_with_type.htmlページやブログのリストページが同様に表示されるように、
{% extends 'blog/blog_list.html' %}
{# 页面标题 #}
{% block title %}{{ blog_type.type_name }}{% endblock %}
{% block blog_list_title %}
    {{ blog_type.type_name }}
    （一共有{{ blogs|length }}篇博客）
    <a href='{% url "blog_list" %}'>查看全部博客</a>
{% endblock %}
  • 変更しblog views.pyたファイルを、ブログの分類が右側に表示されていることを確認
from django.shortcuts import render_to_response,get_object_or_404
from .models import Blog, BlogType

# Create your views here.

def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)


def blog_detail(request,blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog/blog_detail.html', context)


def blogs_with_type(request, blog_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    context['blog_type'] = blog_type
    context['blogs'] = Blog.objects.filter(blog_type=blog_type)
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blogs_with_type.html', context)
  • テンプレートブログの詳細ページを変更しますblog_detail.html
{% extends 'base.html' %}
{% block title %}{{ blog.title }}{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class='col-xs-10 col-xs-offset-1'>
                <h3>{{ blog.title }}</h3>
                    <ul class='blog_info_description'>
                        <li>作者：{{ blog.author }}</li>
                        <li>分类：<a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a></li>
                        <li>发表时间：{{ blog.created_time|date:"Y-m-d G:m:s" }}</li>
                    </ul>
                    <div class='blog-content'>{{ blog.content }}</div>
            </div>
        </div>
    </div>
    
{% endblock %}
  • 詳細ページには、ページのレイアウトを調整するために

blog.css

ul.blog_types {
    list-style-type: none;
}
div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
div.blog h3 {
    margin-top: 0.5em;
}
div.blog p.blog-info {
    margin-bottom: 0;
}

ul.blog_info_description {
    list-style-type: none;
    margin-bottom: 1em;
}
ul.blog_info_description li {
    display: inline-block;
    margin-right: 2em;
}
div.blog-content {
    text-indent: 2em;
}

最後に、次のような詳細ページをブログ：

おすすめ

転載: www.cnblogs.com/sjfeng1987/p/11417848.html
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com