3. Adım: statik dosyaları sunma, sayfa ekleme ve Docgo uygulamasıyla şablon devralmayı kullanmaStep 3: Serve static files, add pages, and use template inheritance with Django app

Önceki adım: görünümler ve sayfa şablonlarıyla bir Docgo uygulaması oluşturmaPrevious step: Create a Django app with views and page templates

Bu öğreticinin önceki adımlarında, en az bir adet kendi kendine içerilen HTML 'nin tek bir sayfası ile en az bir Docgo uygulaması oluşturmayı öğrendiniz.In the previous steps of this tutorial, you've learned how to create a minimal Django app with a single page of self-contained HTML. Ancak modern Web Apps, genellikle birçok sayfadan oluşur ve tutarlı stil oluşturma ve davranış sağlamak için CSS ve JavaScript dosyaları gibi paylaşılan kaynakları kullanır.Modern web apps, however, are typically composed of many pages, and make use of shared resources like CSS and JavaScript files to provide consistent styling and behavior.

Bu adımda şunları yapmayı öğreneceksiniz:In this step, you learn how to:

  • Uygun ortak kod ile farklı türlerdeki yeni dosyaları hızlıca eklemek için Visual Studio öğe şablonlarını kullanın (adım 3-1)Use Visual Studio item templates to quickly add new files of different types with convenient boilerplate code (step 3-1)
  • Docgo projesini statik dosyaları sunacak şekilde yapılandırma (adım 3-2)Configure the Django project to serve static files (step 3-2)
  • Uygulamaya ek sayfalar ekleme (adım 3-3)Add additional pages to the app (step 3-3)
  • Sayfalarda kullanılan bir başlık ve gezinme çubuğu oluşturmak için şablon devralmayı kullanın (adım 3-4)Use template inheritance to create a header and nav bar that's used across pages (step 3-4)

Adım 3-1: öğe şablonları hakkında bilgi sahibi olunStep 3-1: Become familiar with item templates

Docgo uygulaması geliştirirken genellikle daha fazla Python, HTML, CSS ve JavaScript dosyası eklersiniz.As you develop a Django app, you typically add many more Python, HTML, CSS, and JavaScript files. Her dosya türü için (Ayrıca, dağıtım için ihtiyaç duyduğunuz web.config gibi diğer dosyalar), Visual Studio başlamanıza olanak sağlayacak uygun öğe şablonları sağlar.For each file type (as well as other files like web.config that you may need for deployment), Visual Studio provides convenient item templates to get you started.

Kullanılabilir şablonları görmek için Çözüm Gezginigidin, öğeyi oluşturmak istediğiniz klasörü sağ tıklatın, Add > Yeni öğeEkle ' yi seçin:To see available templates, go to Solution Explorer, right-click the folder in which you want to create the item, select Add > New Item:

Visual Studio 'da yeni öğe Ekle iletişim kutusu

Bir şablon kullanmak için, istediğiniz şablonu seçin, dosya için bir ad belirtin ve Tamam' ı seçin.To use a template, select the desired template, specify a name for the file, and select OK. Bu şekilde bir öğe eklemek, dosyayı otomatik olarak Visual Studio projenize ekler ve kaynak denetimi için değişiklikleri işaretler.Adding an item in this manner automatically adds the file to your Visual Studio project and marks the changes for source control.

Soru: Visual Studio hangi öğe şablonlarının önereceğimizi nasıl bilir?Question: How does Visual Studio know which item templates to offer?

Cevap: Visual Studio proje dosyası (. pyproj), bir Python projesi olarak işaretleyen bir proje türü tanımlayıcısı içerir.Answer: The Visual Studio project file (.pyproj) contains a project type identifier that marks it as a Python project. Visual Studio yalnızca proje türü için uygun olan öğe şablonlarını göstermek için bu tür tanımlayıcısını kullanır.Visual Studio uses this type identifier to show only those item templates that are suitable for the project type. Bu şekilde, Visual Studio her seferinde her seferinde sıralama yapmanızı istemeden birçok proje türü için zengin bir öğe şablonları kümesi sağlayabilir.This way, Visual Studio can supply a rich set of item templates for many project types without asking you to sort through them every time.

Adım 3-2: uygulamanızdan statik dosyaları sunmaStep 3-2: Serve static files from your app

Python ile derlenen bir Web uygulamasında (herhangi bir Framework kullanılarak), Python dosyalarınız her zaman Web ana bilgisayarı sunucusunda çalışır ve bir kullanıcının bilgisayarına hiçbir zaman aktarılmaz.In a web app built with Python (using any framework), your Python files always run on the web host's server and are never transmitted to a user's computer. Ancak, CSS ve JavaScript gibi diğer dosyalar yalnızca tarayıcı tarafından kullanılır, bu nedenle ana bilgisayar sunucusu bu dosyaları istendiği zaman olduğu gibi teslim eder.Other files, however, such as CSS and JavaScript, are used exclusively by the browser, so the host server simply delivers them as-is whenever they're requested. Bu tür dosyalar "static" dosyalar olarak adlandırılır ve Docgo, herhangi bir kod yazmaya gerek kalmadan bunları otomatik olarak teslim edebilir.Such files are referred to as "static" files, and Django can deliver them automatically without you needing to write any code.

Docgo projesi varsayılan olarak uygulamanın statik klasöründen statik dosyaları sunacak şekilde yapılandırılır, bu satırlar docgo projesinin Settings.py:A Django project is configured by default to serve static files from the app's static folder, thanks to these lines in the Django project's settings.py:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

İstediğiniz statik içindeki herhangi bir klasör yapısını kullanarak dosyaları düzenleyebilir ve ardından dosyalara başvurmak için bu klasörde göreli yollar kullanabilirsiniz.You can organize files using any folder structure within static that you like, and then use relative paths within that folder to refer to the files. Bu işlemi göstermek için aşağıdaki adımlar uygulamaya bir CSS dosyası ekler ve sonra bu stil sayfasını index.html şablonunda kullanır:To demonstrate this process, the following steps add a CSS file to the app, then use that stylesheet in the index.html template:

  1. Çözüm Gezgini, Visual Studio projesindeki hellodocgoapp klasörüne sağ tıklayın, yeni klasör Ekle ' yi seçin Add > New folderve klasörü adlandırın static .In Solution Explorer, right-click the HelloDjangoApp folder in the Visual Studio project, select Add > New folder, and name the folder static.

  2. Statik klasöre sağ tıklayın ve Add > Yeni öğeEkle ' yi seçin.Right-click the static folder and select Add > New item. Görüntülenen iletişim kutusunda, stil sayfası şablonunu seçin, dosyayı adlandırın site.css ve Tamam' ı seçin.In the dialog that appears, select the Stylesheet template, name the file site.css, and select OK. Site. css dosyası projede görünür ve düzenleyicide açılır.The site.css file appears in the project and is opened in the editor. Klasör yapınız aşağıdaki görüntüye benzer görünmelidir:Your folder structure should appear similar to the following image:

    Çözüm Gezgini gösterildiği gibi statik dosya yapısı

  3. Site. css içeriğini aşağıdaki kodla değiştirin ve dosyayı kaydedin:Replace the contents of site.css with the following code and save the file:

    .message {
        font-weight: 600;
        color: blue;
    }
    
  4. Uygulamanın Templates/Hellodocgoapp/index.html dosyasının içeriğini aşağıdaki kodla değiştirin <strong> . Bu, adım 2 ' de kullanılan öğenin <span> Stil sınıfına başvuran bir ile değiştirilir message .Replace the contents of the app's templates/HelloDjangoApp/index.html file with the following code, which replaces the <strong> element used in step 2 with a <span> that references the message style class. Bu şekilde bir stil sınıfı kullanmak, öğe stillendirme konusunda çok daha fazla esneklik sağlar.Using a style class in this way gives you much more flexibility in styling the element. (VS 2017 15,7 ve daha önceki bir sürümü kullanırken index.html 'yi şablonlarda bir alt klasöre taşımadığınız takdirde, adım 2-4 ' de Template namespacing ' e bakın.)(If you haven't moved index.html into a subfolder in templates when using VS 2017 15.7 and earlier, refer to template namespacing in step 2-4.)

    <html>
        <head>
            <title>{{ title }}</title>
            {% load staticfiles %} <!-- Instruct Django to load static files -->
            <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
        </head>
        <body>
            <span class="message">{{ message }}</span>{{ content }}
        </body>
    </html>
    
  5. Sonuçları gözlemlemek için projeyi çalıştırın.Run the project to observe the results. Tamamlandığında sunucuyu durdurun ve isterseniz kaynak denetimine yaptığınız değişiklikleri kaydedin ( Adım 2' de açıklandığı gibi).Stop the server when done, and commit your changes to source control if you like (as explained in step 2).

Soru: {% Load staticfiles%} etiketinin amacı nedir?Question: What is the purpose of the {% load staticfiles %} tag?

Cevap: {% load staticfiles %} ve gibi öğelerde statik dosyalara başvurulmadan önce satır gerekir <head> <body> .Answer: The {% load staticfiles %} line is required before referring to static files in elements like <head> and <body>. Bu bölümde gösterilen örnekte, "staticfiles", {% static %} statik dosyalara başvurmak için söz dizimini kullanmanıza izin veren özel bir Docgo şablon etiketi kümesine başvurur.In the example shown in this section, "staticfiles" refers to a custom Django template tag set, which is what allows you to use the {% static %} syntax to refer to static files. Olmadan {% load staticfiles %} , uygulama çalışırken bir özel durum görürsünüz.Without {% load staticfiles %}, you'll see an exception when the app runs.

Soru: statik dosyaları düzenlemek için herhangi bir kural var mı?Question: Are there any conventions for organizing static files?

Yanıt: diğer CSS, JavaScript ve HTML dosyalarını statik klasörünüze ekleyebilirsiniz, ancak istediğiniz gibi.Answer: You can add other CSS, JavaScript, and HTML files in your static folder however you want. Statik dosyaları düzenlemenin tipik bir yolu, yazı tipleri, betiklerve içerik (stil sayfaları ve diğer dosyalar için) adlı alt klasörler oluşturmaktır.A typical way to organize static files is to create subfolders named fonts, scripts, and content (for stylesheets and any other files). Her durumda, bu klasörleri başvurulara dosyanın göreli yoluna dahil etmeyi unutmayın {% static %} .In each case, remember to include those folders in the relative path to the file in {% static %} references.

Soru: {% Load staticfiles%} etiketini kullanmadan aynı görevi tamamlayabilirim?Question: Can I complete the same task without using the {% load staticfiles %} tag?

Cevap: Evet, bunu yapabilirsiniz.Answer: Yes, you can.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Adım 3-3: uygulamaya bir sayfa eklemeStep 3-3: Add a page to the app

Uygulamaya başka bir sayfa eklemek aşağıdakiler anlamına gelir:Adding another page to the app means the following:

  • Görünümü tanımlayan bir Python işlevi ekleyin.Add a Python function that defines the view.
  • Sayfa işaretlemesi için bir şablon ekleyin.Add a template for the page's markup.
  • Gerekli yönlendirmeyi Docgo projesinin URLs.py dosyasına ekleyin.Add the necessary routing to the Django project's urls.py file.

Aşağıdaki adımlarda "Hellodocgoapp" projesine bir "hakkında" sayfası ve bu sayfanın giriş sayfasından bağlantıları verilmiştir:The following steps add an "About" page to the "HelloDjangoApp" project, and links to that page from the home page:

  1. Çözüm Gezgini, Templates/hellodocgoapp klasörüne sağ tıklayın, yeni öğe Ekle' yi seçin > New item, HTML sayfası öğe şablonunu seçin, dosyayı adlandırın about.html ve Tamam' ı seçin.In Solution Explorer, right-click the templates/HelloDjangoApp folder, select Add > New item, select the HTML Page item template, name the file about.html, and select OK.

    İpucu

    Yeni öğe komutu Ekle menüsünde görünmezse, Visual Studio 'nun hata ayıklama modundan çıkmasını sağlamak için sunucuyu durdurduğunuzdan emin olun.If the New Item command doesn't appear on the Add menu, make sure that you've stopped the server so that Visual Studio exits debugging mode.

  2. about.html öğesinin içeriğini aşağıdaki biçimlendirmeyle değiştirin (adım 3-4 ' de basit bir gezinti çubuğu ile giriş sayfasına yönelik açık bağlantıyı değiştirirsiniz):Replace the contents of about.html with the following markup (you replace the explicit link to the home page with a simple navigation bar in step 3-4):

    <html>
        <head>
            <title>{{ title }}</title>
            {% load staticfiles %}
            <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
        </head>
        <body>
            <div><a href="home">Home</a></div>
            {{ content }}
        </body>
    </html>
    
  3. Uygulamanın views.py dosyasını açın ve şablonu kullanan adlı bir işlev ekleyin about :Open the app's views.py file and add a function named about that uses the template:

    def about(request):
        return render(
            request,
            "HelloDjangoApp/about.html",
            {
                'title' : "About HelloDjangoApp",
                'content' : "Example app page for Django."
            }
        )
    
  4. Docgo projesinin URLs.py dosyasını açın ve aşağıdaki satırı urlPatterns diziye ekleyin:Open the Django project's urls.py file and add the following line to the urlPatterns array:

    url(r'^about$', HelloDjangoApp.views.about, name='about'),
    
  5. Templates/Hellodocgoapp/index.html dosyasını açın ve ilgili sayfanın altına aşağıdaki satırı ekleyin <body> (Bu bağlantıyı, adım 3-4 ' de bir gezinti çubuğu ile değiştirirsiniz):Open the templates/HelloDjangoApp/index.html file and add the following line below the <body> element to link to the About page (again, you replace this link with a nav bar in step 3-4):

    <div><a href="about">About</a></div>
    
  6. Dosya > Tümünü Kaydet menü komutunu kullanarak tüm dosyaları kaydedin veya CTRL + + Shift + Stuşlarına basın.Save all the files using the File > Save All menu command, or just press Ctrl+Shift+S. (Teknik olarak, Visual Studio 'da projeyi çalıştırmak için bu adım gerekli değildir. dosyaları otomatik olarak kaydeder.(Technically, this step isn't needed as running the project in Visual Studio saves files automatically. Bununla birlikte, bunun hakkında bilgi edinmek için iyi bir komuttur!)Nevertheless, it's a good command to know about!)

  7. Sonuçları gözlemlemek ve sayfalar arasında gezinmeyi denetlemek için projeyi çalıştırın.Run the project to observe the results and check navigation between pages. Bitince sunucuyu kapatın.Close the server when done.

Cevap: views.py içindeki görüntüleme Işlevi adlandırılmış olsa da index , docgo PROJESININ URLs.py dosyasındaki URL yönlendirme desenleri "index" dizesiyle eşleşen bir normal ifade içermez.Answer: Even though the view function in views.py is named index, the URL routing patterns in the Django project's urls.py file does not contain a regular expression that matches the string "index". Bu dizeyi eşleştirmek için, model için başka bir girdi eklemeniz gerekir ^index$ .To match that string, you need to add another entry for the pattern ^index$.

Sonraki bölümde gösterildiği gibi, {% url '<pattern_name>' %} bir düzenin adına başvurmak için sayfa şablonundaki etiketinin kullanılması çok daha iyidir. Bu durumda, docgo sızın için uygun URL 'yi oluşturur.As shown in the next section, it's much better to use the {% url '<pattern_name>' %} tag in the page template to refer to the name of a pattern, in which case Django creates the proper URL for you. Örneğin, <div><a href="home">Home</a></div> about.html ' de ile değiştirin <div><a href="{% url 'index' %}">Home</a></div> .For example, replace <div><a href="home">Home</a></div> in about.html with <div><a href="{% url 'index' %}">Home</a></div>. URLs.py ' DEKI ilk URL deseninin, aslında ' index ' adlı (bağımsız değişkenin virtuale tarafından) olduğu için ' index ' kullanımı burada çalışıyor name='index' .The use of 'index' works here because the first URL pattern in urls.py is, in fact, named 'index' (by virtue of the name='index' argument). İkinci düzene başvurmak için ' Home ' öğesini de kullanabilirsiniz.You can also use 'home' to refer to the second pattern.

Adım 3-4: başlık ve gezinti çubuğu oluşturmak için şablon devralmayı kullanmaStep 3-4: Use template inheritance to create a header and nav bar

Modern Web Apps, her sayfada açık gezinti bağlantıları sağlamak yerine genellikle bir marka üst bilgisi ve en önemli sayfa bağlantılarını, açılan menüleri vb. sağlayan bir gezinti çubuğu kullanır.Instead of having explicit navigation links on each page, modern web apps typically use a branding header and a navigation bar that provides the most important page links, popup menus, and so on. Üst bilgi ve gezinti çubuğunun tüm sayfalarda aynı olduğundan emin olmak için, her sayfa şablonunda aynı kodu yinelemek istemezsiniz.To make sure the header and nav bar are the same across all pages, however, you don't want to repeat the same code in every page template. Bunun yerine, tüm sayfalarınızın ortak parçalarını tek bir yerde tanımlamak isteyebilirsiniz.You instead want to define the common parts of all your pages in one place.

Docgo 'nın şablon oluşturma sistemi, birden çok şablon genelinde belirli öğeleri yeniden kullanmak için iki yol sağlar: dahil ve devralma.Django's templating system provides two means for reusing specific elements across multiple templates: includes and inheritance.

  • , Söz dizimi kullanılarak başvuran şablonda belirli bir yere eklediğiniz diğer sayfa şablonlarıyla dahildir {% include <template_path> %} .Includes are other page templates that you insert at a specific place in the referring template using the syntax {% include <template_path> %}. Ayrıca, kodda dinamik olarak yolu değiştirmek istiyorsanız bir değişkeni de kullanabilirsiniz.You can also use a variable if you want to change the path dynamically in code. Eklemeleri genellikle sayfanın gövdesinde, paylaşılan şablonu sayfada belirli bir konumda çekmek için kullanılır.Includes are typically used in the body of a page to pull in the shared template at a specific location on the page.

  • Devralma , {% extends <template_path> %} başvuran şablonun üzerinde derleneceği paylaşılan temel şablonu belirtmek için bir sayfa şablonunun başındaki öğesini kullanır.Inheritance uses the {% extends <template_path> %} at the beginning of a page template to specify a shared base template that the referring template then builds upon. Devralma genellikle, bir uygulamanın sayfalarına yönelik olarak paylaşılan bir düzen, gezinme çubuğu ve diğer yapıları tanımlamak için kullanılır. bu nedenle, şablonlar yalnızca temel şablonun bloklarolarak adlandırılan belirli bölgelerini eklemesi veya değiştirmesi gerekir.Inheritance is commonly used to define a shared layout, nav bar, and other structures for an app's pages, such that referring templates need only add or modify specific areas of the base template called blocks.

Her iki durumda da <template_path> uygulamanın Şablonlar klasörüne görelidir ( ../ veya ./ Ayrıca izin verilir).In both cases, <template_path> is relative to the app's templates folder (../ or ./ are also allowed).

Bir temel şablon {% block <block_name> %} , ve etiketlerini kullanarak blokları ayırıcıları {% endblock %} .A base template delineates blocks using {% block <block_name> %} and {% endblock %} tags. Başvuruda bulunan bir şablon daha sonra aynı blok adına sahip Etiketler kullanıyorsa, blok içeriği temel şablonun üzerine yazar.If a referring template then uses tags with the same block name, its block content override that of the base template.

Aşağıdaki adımlarda devralma gösterilmektedir:The following steps demonstrate inheritance:

  1. Uygulamanın Templates/hellodocgoapp klasöründe yeni bir HTML dosyası oluşturun ( Add > Yeni öğe Ekle bağlam menüsünü kullanarak veya Add > HTML sayfasıEkle ' yi kullanarak) layout.htmladlı adı ve içeriğini aşağıdaki biçimlendirmeyle değiştirin.In the app's templates/HelloDjangoApp folder, create a new HTML file (using the Add > New item context menu or Add > HTML Page) called layout.html, and replace its contents with the markup below. Bu şablonun, başvuran sayfaların yerini almak için gereken "içerik" adlı bir blok içerdiğini görebilirsiniz:You can see that this template contains a block named "content" that is all that the referring pages need to replace:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>{{ title }}</title>
        {% load staticfiles %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    
    <body>
        <div class="navbar">
           <a href="/" class="navbar-brand">Hello Django</a>
           <a href="{% url 'home' %}" class="navbar-item">Home</a>
           <a href="{% url 'about' %}" class="navbar-item">About</a>
        </div>
    
        <div class="body-content">
    {% block content %}{% endblock %}
            <hr/>
            <footer>
                <p>&copy; 2018</p>
            </footer>
        </div>
    </body>
    </html>
    
  2. Uygulamanın static/site. css dosyasına aşağıdaki stilleri ekleyin (Bu izlenecek yol, yanıt veren tasarımı göstermeye çalışmıyor; bu stiller yalnızca ilginç bir sonuç oluşturmak için kullanılır):Add the following styles to the app's static/site.css file (this walkthrough isn't attempting to demonstrate responsive design here; these styles are simply to generate an interesting result):

    .navbar {
        background-color: lightslategray;
        font-size: 1em;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color: white;
        padding: 8px 5px 8px 5px;
    }
    
    .navbar a {
        text-decoration: none;
        color: inherit;
    }
    
    .navbar-brand {
        font-size: 1.2em;
        font-weight: 600;
    }
    
    .navbar-item {
        font-variant: small-caps;
        margin-left: 30px;
    }
    
    .body-content {
        padding: 5px;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
  3. Şablonları/Hellodocgoapp/index.html 'yi, temel şablona başvuracak ve içerik bloğunu geçersiz kılacak şekilde değiştirin.Modify templates/HelloDjangoApp/index.html to refer to the base template and override the content block. Devralma kullanarak bu şablonu basit hale getirebilirsiniz:You can see that by using inheritance, this template becomes simple:

    {% extends "HelloDjangoApp/layout.html" %}
    {% block content %}
    <span class="message">{{ message }}</span>{{ content }}
    {% endblock %}
    
  4. Şablonları/Hellodocgoapp/about.html ' y i aynı zamanda temel şablona başvuracak ve içerik bloğunu geçersiz kılacak şekilde değiştirin:Modify templates/HelloDjangoApp/about.html to also refer to the base template and override the content block:

    {% extends "HelloDjangoApp/layout.html" %}
    {% block content %}
    {{ content }}
    {% endblock %}
    
  5. Sonuçları gözlemlemek için sunucuyu çalıştırın.Run the server to observe the results. Bitince sunucuyu kapatın.Close the server when done.

    Gezinti çubuğunu gösteren uygulama çalıştırılıyor

  6. Uygulamada önemli değişiklikler yapabileceğinizden, değişikliklerinizi kaynak denetimine kaydetmekiyi bir zaman alabilir.Because you'd made substantial changes to the app, it's again a good time to commit your changes to source control.

Sonraki adımlarNext steps

Daha derin gitGo deeper