diff options
| author | Paul Everitt <paul@agendaless.com> | 2013-09-13 16:52:14 -0400 |
|---|---|---|
| committer | Paul Everitt <paul@agendaless.com> | 2013-09-13 16:52:14 -0400 |
| commit | b1b92284f496800a4dfd2cea72cb9be07ba8661c (patch) | |
| tree | 9dfa72427fd6aa0a3a7aaba72be4a4e49380ee26 /docs/quick_tutorial/static_assets.rst | |
| parent | 1d04f8f0b483b8d595f5ada24ae5108affe80160 (diff) | |
| download | pyramid-b1b92284f496800a4dfd2cea72cb9be07ba8661c.tar.gz pyramid-b1b92284f496800a4dfd2cea72cb9be07ba8661c.tar.bz2 pyramid-b1b92284f496800a4dfd2cea72cb9be07ba8661c.zip | |
First cut at import of quick tutorial.
Diffstat (limited to 'docs/quick_tutorial/static_assets.rst')
| -rw-r--r-- | docs/quick_tutorial/static_assets.rst | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/docs/quick_tutorial/static_assets.rst b/docs/quick_tutorial/static_assets.rst new file mode 100644 index 000000000..03c7d397d --- /dev/null +++ b/docs/quick_tutorial/static_assets.rst @@ -0,0 +1,89 @@ +========================================== +13: CSS/JS/Images Files With Static Assets +========================================== + +Of course the Web is more than just markup. You need static assets: +CSS, JS, and images. Let's point our web app at a directory where +Pyramid will serve some static assets. + +Objectives +========== + +- Publish a directory of static assets at a URL + +- Use Pyramid to help generate URLs to files in that directory + +Steps +===== + +#. First we copy the results of the ``view_classes`` step: + + .. code-block:: bash + + (env27)$ cd ..; cp -r view_classes static_assets; cd static_assets + (env27)$ python setup.py develop + +#. We add a call ``config.add_static_view in + ``static_assets/tutorial/__init__.py``: + + .. literalinclude:: static_assets/tutorial/__init__.py + :linenos: + +#. We can add a CSS link in the ``<head>`` of our template at + ``static_assets/tutorial/home.pt``: + + .. literalinclude:: static_assets/tutorial/home.pt + :language: html + +#. Add a CSS file at + ``static_assets/tutorial/static/app.css``: + + .. literalinclude:: static_assets/tutorial/static/app.css + :language: css + +#. Make sure we haven't broken any existing code by running the tests: + + .. code-block:: bash + + (env27)$ nosetests tutorial + +#. Run your Pyramid application with: + + .. code-block:: bash + + (env27)$ pserve development.ini --reload + +#. Open ``http://localhost:6543/`` in your browser. + +Analysis +======== + +We changed our WSGI application to map requests under +``http://localhost:6543/static/`` to files and directories inside a +``static`` directory inside our ``tutorial`` package. This directory +contained ``app.css``. + +We linked to the CSS in our template. We could have hard-coded this +link to ``/static/app.css``. But what if the site is later moved under +``/somesite/static/``? Or perhaps the web developer changes the +arrangement on disk? Pyramid gives a helper that provides flexibility +on URL generation: + +.. code-block:: html + + ${request.static_url('tutorial:static/app.css')} + +This matches the ``path='tutorial:static'`` in our +``config.add_static_view`` registration. By using ``request.static_url`` +to generate the full URL to the static assets, you both ensure you stay +in sync with the configuration and gain refactoring flexibility later. + +Extra Credit +============ + +#. There is also a ``request.static_path`` API. How does this differ from + ``request.static_url``? + +.. seealso:: :ref:`pyramid:assets_chapter`, + :ref:`pyramid:preventing_http_caching`, and + :ref:`pyramid:influencing_http_caching` |