Now that you understand vectors, let's talk about how Vectoran organizes your website. In the control panel, you will see several sections (outlined below) on the left side. The main area is where the editors will appear.

Note: the documentation below makes the assumption that you have a basic understanding of how websites work and what the various components are.


Every website is made up of pages; however, in Vectoran the concept is a little different. Rather than a page being a page in its entirety, it's just the meat of a page. In other words, it's your normal page minus the template. With this approach, you only deal with the data unique to each page. Furthermore, you can even include pages within pages using the {{ include }} vector. This allows you to reuse bits of content in multiple pages while only having to write it once.

Each page on your website will have a page corresponding to it in your control panel. Within each page, you will select the template used to wrap the content.


On any given website, there will be at least one template. I define the template as the overall look of the website - the parts that remain the same on all the pages. In Vectoran, you can create as many of these as you like but generally a website will only require one or two of them. To do this, click on the template tab on the left side of the control panel. You will see a list of templates currently set up for your website. You can click on the "New Template" link to add a new one or click on the name of an existing one to edit it. Here is where you will also tie your stylesheets and javascripts to a template. The vector {{ main_content }} will need to be placed within the template to indicate where in the Vectoran engine should place the contents of the requested page.


This section is straight forward. Each stylesheet is simply a free form text box. These stylesheets can then be assigned to your templates for use during the rendering of your website. For more information on stylesheets, see: http://www.w3.org/Style/.


Similar to the stylesheets, these are simply free form text boxes to organize your javascript code into files. For more information on javascript, see: http://www.javascript.com/.


In this section you can upload media for you website such as images and pdfs. They can then be referenced using vectors such as {{ image }}.


The entities section is where you will create, edit, and modify records in your virtual database. Your virtual database is relational and faciliates creating similar pages over and over. For instance, say your website had home listings on it. Rather than create a separate page for every listing, you would simply create a "house" table to store all of your home listings. Then you would create a single page that displays a home listing. Then, based on the id you pass in to the page, the engine will load the correct home listing from the database.