<pclass="last">You are reading an old version of the Evennia documentation. <ahref="https://www.evennia.com/docs/latest/index.html">The latest version is here</a></p>.
<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 along with the
default Evennia install out of the box. You can view the default website by pointing your web browser
to <codeclass="docutils literal notranslate"><spanclass="pre">http://localhost:4001</span></code>. You will see a generic welcome page with some game statistics and a link
to the Evennia web client.</p>
<p>In this tutorial, we will add a new page that you can visit at <codeclass="docutils literal notranslate"><spanclass="pre">http://localhost:4001/story</span></code>.</p>
<sectionid="create-the-view">
<h2><spanclass="section-number">1.1. </span>Create the view<aclass="headerlink"href="#create-the-view"title="Permalink to this headline">¶</a></h2>
<p>A django “view” is a normal Python function that django calls to render the HTML page you will see
in the web browser. Django can do all sorts of cool stuff to a page by using the view function — like
adding dynamic content or making changes to a page on the fly — but, here, we will just have it spit
back raw HTML.</p>
<p>Open <codeclass="docutils literal notranslate"><spanclass="pre">mygame/web/website</span></code> folder and create a new module file 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 but, if you do, don’t forget to add an empty
<codeclass="docutils literal notranslate"><spanclass="pre">__init__.py</span></code> file in the new folfder. Adding the <codeclass="docutils literal notranslate"><spanclass="pre">__init__.py</span></code> file tells Python that modules can be
imported from the new folder. For this tutorial, here’s what the example contents of your new <codeclass="docutils literal notranslate"><spanclass="pre">story.py</span></code>
module should look like:</p>
<divclass="highlight-python notranslate"><divclass="highlight"><pre><span></span><spanclass="c1"># in mygame/web/website/story.py</span>
<p>The above view takes advantage of a shortcut provided for use by Django: <em>render</em>. The render shortcut
gives the template information from the request. For instance, it might provide the game name, and then
renders it.</p>
</section>
<sectionid="the-html-page">
<h2><spanclass="section-number">1.2. </span>The HTML page<aclass="headerlink"href="#the-html-page"title="Permalink to this headline">¶</a></h2>
<p>Next, we need to find the location where Evennia (and Django) looks for HTML files, which are referred
to as <em>templates</em> in Django’s parlance. You can specify such locations 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.</p>
<p>Navigate to <codeclass="docutils literal notranslate"><spanclass="pre">mygame/web/templates/website/</span></code> and create a new file there called <codeclass="docutils literal notranslate"><spanclass="pre">story.html</span></code>. This
is not an HTML tutorial, so this file’s content will be 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>
<h2><spanclass="section-number">1.3. </span>The URL<aclass="headerlink"href="#the-url"title="Permalink to this headline">¶</a></h2>
<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 the
stub following the port — here, <codeclass="docutils literal notranslate"><spanclass="pre">/story</span></code> — to find out to which page you would like displayed. How
does Django know what HTML file <codeclass="docutils literal notranslate"><spanclass="pre">/story</span></code> should link to? You inform Django about what address stub
patterns correspond to what files in the file <codeclass="docutils literal notranslate"><spanclass="pre">mygame/web/website/urls.py</span></code>. Open it in your editor now.</p>
<p>Django looks for the variable <codeclass="docutils literal notranslate"><spanclass="pre">urlpatterns</span></code> in this file. You will want to add your new <codeclass="docutils literal notranslate"><spanclass="pre">story</span></code> pattern
and corresponding path to <codeclass="docutils literal notranslate"><spanclass="pre">urlpatterns</span></code> list — which is then, in turn, merged with the default
<codeclass="docutils literal notranslate"><spanclass="pre">urlpatterns</span></code>. Here’s how it could look:</p>
<p>The above code imports our <codeclass="docutils literal notranslate"><spanclass="pre">story.py</span></code> Python view module from where we created it earlier — in
<codeclass="docutils literal notranslate"><spanclass="pre">mygame/web/website/</span></code> — and then add the corresponding <codeclass="docutils literal notranslate"><spanclass="pre">path</span></code> instance. The first argument to
<codeclass="docutils literal notranslate"><spanclass="pre">path</span></code> is the pattern of the URL that we want to find (<codeclass="docutils literal notranslate"><spanclass="pre">"story"</span></code>) as a regular expression, and
then the view function from <codeclass="docutils literal notranslate"><spanclass="pre">story.py</span></code> that we want to call.</p>
<p>That should be it. Reload Evennia — <codeclass="docutils literal notranslate"><spanclass="pre">evennia</span><spanclass="pre">reload</span></code> — and you should now be able to navigate
your browser to the <codeclass="docutils literal notranslate"><spanclass="pre">http://localhost:4001/story</span></code> location and view your new story page as
<pclass="last">You are reading an old version of the Evennia documentation. <ahref="https://www.evennia.com/docs/latest/index.html">The latest version is here</a></p>.
