一个简单的Django和CSS示例 [英] A simple example of Django and CSS

问题描述

现在，我已经在Django在线第5章了本书： http://www.djangobook.com/en/2.0/chapter05/

所有我现在想做的，在我开始尝试数据库之前，是将一些简单的CS和J添加到应用程序中。

所以问题是，我该怎么做？我只有一个应用程序，我只想要一个css文件夹中的main.css，和一个js文件夹中的一个main.js。

我查出了 https://docs.djangoproject.com/en/1.3 / howto / static-files /＃staticfiles-in-templates 页面，但阅读和阅读后，似乎没有什么可以用的例子。

如何导入样式表/ CSS（有一个像CakePHP的帮助器），我在哪里放置CSS和JS文件，我需要配置静态吗？

更新：链接：在Django中呈现CSS 没有多大帮助主要是因为它对我来说并不奏效，而且我特别不喜欢如果调试的部分。当我移动到prod时会发生什么？为什么我的媒体文件夹的定义与prod和本地的dev不同？不应该是相对的，甚至在相同的地方吗？

解决方案

如果你遵循django的指导方针，你可以简化你的生活

在您的示例代码中，您的应用程序目录中，创建一个名为 static 的文件夹。在这个文件夹中，放置你的css文件。

示例：

  $ django-admin.py startproject myproject 
 $ cd myproject 
 myproject $ python manage.py startapp myapp 
 myproject $ mkdir myapp / static 
 myproject $ cd myapp / static 
 myproject / myapp / static $ nano style.css 
  

在你的模板中：

< link rel =stylesheethref ={{STATIC_URL}} style.css/>

确保将 myapp 添加到<$ c $的$ code> INSTALLED_APPS 列表中C> settings.py 。现在，当您使用内置的开发服务器时，您的样式表将被正确呈现。

Django默认在安装的应用程序中搜索一个 static 目录，并且当前版本的django，静态文件是默认情况下启用。

---

Django示例的路径为 my_app /static /my_app/myimage.jpg 如果您的应用程序和项目具有相同的名称，那么
有点混乱。

建议这样做，因为当您运行 collectstatic 收集所有静态文件时，将覆盖相同名称的文件。如果您在另一个应用程序中有一个名为 myimage.jpg 的文件，它将被覆盖。将应用程序名称放在静态目录中将会阻止这一点，因为确切的目录结构将被复制到您的 STATIC_ROOT 目录。

一个简单的例子来说明这一点。如果您有一个带有两个应用程序的django项目，如下所示：

 。 
├──资产
├──manage.py 
├──myapp 
│├──__init__.py 
│├──models.py 
│├──静态
││└──myapp 
││└──test.txt 
│├──tests.py 
│└──views。 py 
├──myproj 
│├──__init__.py 
│├──__init __。pyc 
│├──settings.py 
│├── settings.pyc 
│├──urls.py 
│└──wsgi.py 
└──otherapp 
├──__init__.py 
├── models.py 
├──静态
│└──otherapp 
│└──test.txt 
├──tests.py 
└──views。 py 
  

资产是您的 STATIC_ROOT 。现在当你运行 collectstatic ：

 。 
├──资产
│├──myapp 
││└──test.txt 
│└──otherapp 
│└──test.txt 
├──manage.py 
├──myapp 
│├──__init__.py 
│├──__init __。pyc 
│├──models.py 
│├──静态
││└──myapp 
││└──test.txt 
│├──tests.py 
│└── views.py 
├──myproj 
│├──__init__.py 
│├──__init __。pyc 
│├──settings.py 
│├ ──settings.pyc 
│├──urls.py 
│└──wsgi.py 
└──otherapp 
├──__init__.py 
├ ──__init __。pyc 
├──models.py 
├──静态
│└──otherapp 
│└──test.txt 
├── tests.py 
└──views.py 
  

您也看到它也在创建目录。在您的模板中，您现在可以使用该应用的命名空间来引用每个文件： {{STATIC_URL}} / myapp / test.txt

I'm new to Django, and am trying to set up a really simple Django app.

Now, I'm up to chapter 5 in the Django online book : http://www.djangobook.com/en/2.0/chapter05/

All I want to do now, before I start trying databases, is to add in some simple CS and J to the app as is.

So the question is, how do I do this? I only have one app, and I only want a main.css in a css folder, and a main.js in a js folder.

I checked out the https://docs.djangoproject.com/en/1.3/howto/static-files/#staticfiles-in-templates page, but after reading and reading, there didn't seem to be a whole lot to work with in terms of examples.

How do I import the stylesheets/css (is there a helper like CakePHP?), where do I put the CSS and JS files, and do I need to configure the static thingy?

UPDATE: the link : Render CSS in Django does not help much. Mainly in that it didn't work for me, but also I especially don't like the "if debug" part. What happens when I move to prod? Why would I have my media folder defined differently for prod and local dev anyway? Shouldn't it be relative, or even in the same spot?

解决方案

If you follow django's guidelines, you can simplify your life greatly.

In your sample code, inside your application directory, create a folder called static. Inside this folder, place your css files.

Example:

$ django-admin.py startproject myproject
$ cd myproject
myproject$ python manage.py startapp myapp
myproject$ mkdir myapp/static
myproject$ cd myapp/static
myproject/myapp/static$ nano style.css

In your templates:

<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />

Make sure you add myapp to the INSTALLED_APPS list in settings.py. Now when you use the built-in development server, your style sheet will be rendered correctly.

Django searches for a static directory inside installed applications by default, and with current versions of django, static files are enabled by default.

---

The Django example has the path my_app/static/my_app/myimage.jpg which is a little confusing if your app and project have the same name.

This is recommended because when you run collectstatic to gather all your static files, files with the same name will be overwritten. If you have a file called myimage.jpg in another application, it will be overwritten. Giving the application name inside the static directory will prevent this, because the exact directory structure will be replicated inside your STATIC_ROOT directory.

A simple example to illustrate the point. If you have a django project with two apps, like this:

.
├── assets
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

assets is your STATIC_ROOT. Now when you run collectstatic:

.
├── assets
│   ├── myapp
│   │   └── test.txt
│   └── otherapp
│       └── test.txt
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── __init__.pyc
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

You see it is creating the directories as well. In your templates you would now refer to each file with its "namespace" of the app: {{ STATIC_URL }}/myapp/test.txt

这篇关于一个简单的Django和CSS示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！