<h1><spanclass="section-number">1. </span>Add a simple new web page<aclass="headerlink"href="#add-a-simple-new-web-page"title="Permalink to this headline">¶</a></h1>
<p>Evennia leverages <aclass="reference external"href="https://docs.djangoproject.com">Django</a> which is a web development framework.
Huge professional websites are made in Django and there is extensive documentation (and books) on it
. You are encouraged to at least look at the Django basic tutorials. Here we will just give a brief
introduction for how things hang together, to get you started.</p>
<p>We assume you have installed and set up Evennia to run. A webserver and website comes out of the
box. You can get to that by entering <codeclass="docutils literal notranslate"><spanclass="pre">http://localhost:4001</span></code> in your web browser - you should see a
welcome page with some game statistics and a link to the web client. Let us add a new page that you
can get to by going to <codeclass="docutils literal notranslate"><spanclass="pre">http://localhost:4001/story</span></code>.</p>
<p>A django “view” is a normal Python function that django calls to render the HTML page you will see
in the web browser. Here we will just have it spit back the raw html, but Django can do all sorts of
cool stuff with the page in the view, like adding dynamic content or change it on the fly. Open
<codeclass="docutils literal notranslate"><spanclass="pre">mygame/web</span></code> folder and add a new module there named <codeclass="docutils literal notranslate"><spanclass="pre">story.py</span></code> (you could also put it in its own
folder if you wanted to be neat. Don’t forget to add an empty <codeclass="docutils literal notranslate"><spanclass="pre">__init__.py</span></code> file if you do, to tell
Python you can import from the new folder). Here’s how it looks:</p>
<divclass="highlight-python notranslate"><divclass="highlight"><pre><span></span><spanclass="c1"># in mygame/web/story.py</span>
<p>We need to find a place where Evennia (and Django) looks for html files (called <em>templates</em> in
Django parlance). You can specify such places in your settings (see the <codeclass="docutils literal notranslate"><spanclass="pre">TEMPLATES</span></code> variable in
<codeclass="docutils literal notranslate"><spanclass="pre">default_settings.py</span></code> for more info), but here we’ll use an existing one. Go to
<codeclass="docutils literal notranslate"><spanclass="pre">mygame/template/overrides/website/</span></code> and create a page <codeclass="docutils literal notranslate"><spanclass="pre">story.html</span></code> there.</p>
<p>This is not a HTML tutorial, so we’ll go simple:</p>
<spanclass="p"><</span><spanclass="nt">h1</span><spanclass="p">></span>A story about a tree<spanclass="p"></</span><spanclass="nt">h1</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">h1</span><spanclass="p">></span>A story about a tree<spanclass="p"></</span><spanclass="nt">h1</span><spanclass="p">></span>
<p>When you enter the address <codeclass="docutils literal notranslate"><spanclass="pre">http://localhost:4001/story</span></code> in your web browser, Django will parse that
field to figure out which page you want to go to. You tell it which patterns are relevant in the
<p>Django looks for the variable <codeclass="docutils literal notranslate"><spanclass="pre">urlpatterns</span></code> in this file. You want to add your new pattern to the
<codeclass="docutils literal notranslate"><spanclass="pre">custom_patterns</span></code> list we have prepared - that is then merged with the default <codeclass="docutils literal notranslate"><spanclass="pre">urlpatterns</span></code>. Here’s
<p>That is, we import our story view module from where we created it earlier and then create an <codeclass="docutils literal notranslate"><spanclass="pre">url</span></code>
instance. The first argument to <codeclass="docutils literal notranslate"><spanclass="pre">url</span></code> is the pattern of the url we want to find (<codeclass="docutils literal notranslate"><spanclass="pre">"story"</span></code>) (this is
a regular expression if you are familiar with those) and then our view function we want to direct
to.</p>
<p>That should be it. Reload Evennia and you should be able to browse to your new story page!</p>
