Create a website with AtikTeam
The optional public website module allows you to manage and write a public website directly from your AtikTeam application. It is perfectly secure: you and only you choose what to publish and how.
Setting up
Activation
First, you need to order this optional module so that it appears in the interface.
The website will be managed within a project space, which is why it is recommended to start by opening a new project space, named for example "public site".
From the project settings, you can then activate the "Public website" project module. A new project tab, Public site, will then appear.
Principles
AtikTeam then lets you manage the content of your website. You start by building a structure of sections / subsections, multilingual if you wish.
Specialized resources can be published in these sections:
- articles (author, date of publication ...)
- events (dates of the event)
- newsletters (automatically sent by email to subscribers)
- simple pages, to add content to the site outside of the main structure
Layout
The look of your public site relies on the standard HTML / CSS / JavaScript technologies. To learn more, see the documentation on the site settings below.
Internet address
You can use a domain that you own for your website. For more information, see the documentation on website settings below.
How sections work
The public site module allows you to structure your website in sections and subsections. To add a section, just click on the "New section" button. The requested information is then:
- the "menu name", which will appear in the navigation menu
- the "title", which will be displayed at the top of the page
- the "content", which will be the body of the page.
It is also possible to create a multilingual website by providing variants in different languages.
Subsections
To create a subsection, simply click on the parent section, then on the "New subsection" button.
Organization
The order of appearance of the items in the menu will be the same as in AtikTeam. To change this order, sections can be moved by simply dragging and dropping them.
Storage of resources
Once created, sections also serve as storage folders to publish and organize other resources (articles, events, pages, newsletters ...).
The resources of a public site
In addition to sections, a public site may contain different resources, which are specialized pages with additional information:
- articles, with authors, a summary, the date of publication ...
- events, with key dates
- newsletters, automatically sent by email to subscribers
It is also possible to create simple pages, to add content to the site outside the main structure of sections.
Storage of the resource
Each resource is stored in a section of your choice. This information may be used later for listing and display.
Writing - moderation - publication
All coworkers can write resources and submit them for moderation and publication. When created, the resource is in an "unpublished" state. A project manager can then check it, correct it if necessary, then publish it. The resource only appears on the public site once published.
Displaying the resource on the public site
Once published, the resources created become accessible in two ways. The first is simply to use wiki links between pages. The second, usually more useful, is to use automatic listing tags, which link resources automatically at the desired location. For example, you can request a list of all articles of the current section with the tag:
<div data-content="articles.show"></div>It is just a shortcut for the more explicit tag:
<div data-content="articles.show" data-param-scope="folder"></div>To extend the scope to the articles of the current section and of its subsections, you can use the parameter scope=tree:
<div data-content="articles.show" data-param-scope="tree"> </div>To extend the scope to all sections of the site, you can use the parameter scope=website:
<div data-content="articles.show" data-param-scope="website"> </div>Blog post
The blog post offers a simple way to keep your site lively with regular news. Its key information is:
- language
- author (optional)
- date of publication
- post title
- post content
Creating a blog post
Choose the section in which you wish to store the blog post, and click Write a blog post.
The author field helps you fill it in using the accounts of the users of the application. If possible, the post will then automatically display the author's profile picture. Otherwise, the name you entered will be displayed as is.
Viewing blog posts
On the public site, you can display an automatic list of blog posts by typing the following tag in the content of a section.
<div data-content="posts.show"> </div>Blog posts are automatically listed from the most recent to the oldest.
You can limit the number of blog posts displayed in the list with the parameter data-param-limit, for example to display only the last 3 blog posts:
<div data-content="posts.show" data-param-limit="3"> </div>You can also automatically truncate the blog post summary in the list with the parameter data-param-truncate, for example to limit it to 50 characters:
<div data-content="posts.show" data-param-truncate="50"> </div>All options can be combined.
Articles
Articles are publications whose key information is:
- language
- main authors
- other authors
- title of the article
- a picture
- summary of the content of the article
- full content, body of the article
Creating an article
Choose the section in which you wish to store the article, and click Write an article.
The author fields help you fill them in using the accounts of the users of the application. If possible, the article will then automatically display the photo of the main author.
Displaying articles
On the public site, you can display an automatic list of the articles of the section by typing the following tag in the content of a section.
<div data-content="articles.show"> </div>Events
Events are resources with a start date and an end date. This information is used to automatically refresh the content of the website.
Creating a new event
A new event is created with the Add event button.
Displaying events
Display the next event of the section:
<div data-content="events.next"> </div>Display the list of upcoming events:
<div data-content="events.coming"> </div>Display the list of past events:
<div data-content="events.past"> </div>You can limit the number of events displayed with the parameter data-param-limit, for example to display the next 3 events:
<div data-content="events.coming" data-param-limit="3"> </div>Newsletters
Newsletters are documents automatically sent to a list of subscribers. Visitors can subscribe directly from your website by entering an email address, and the list of subscribers can also be completed directly in AtikTeam.
Creating a newsletter
To create a new newsletter, click on the New Newsletter button. In accordance with the moderation / publication principle, the newsletter is not sent immediately.
Sending the newsletter
To send the newsletter, simply publish it.
Displaying newsletters
Sent newsletters can be listed with the following tag:
<div data-content="newsletters.show"> </div>In addition, you can insert a newsletter subscription field with the following tag:
<div data-content="newsletters.subscribe"> </div>Pages
Pages are simple resources without extra fields. They are intended to contain information that you do not want to put in a section.
Creating a page on your website
Click Write a page to create a new page.
Displaying the pages of your website
The best way to access pages is to use wiki links. Copy the wiki link of the new page, and paste it into a section. You can also list all the pages of the section with the following tag:
<div data-content="pages.show"> </div>Configure your website
You can configure several aspects of your website, especially its appearance.
All the settings below are accessible from the "Website settings" of your project
General information
You can choose the title of your website, as well as its domain name and default navigation language. To do this, click on the Site configuration link in the right column.
For the domain name to work, you must first have configured your DNS (see below).
Header and footer
You can specify a block of HTML to insert before the content of the pages (header) and another HTML block to insert after the content of the pages (footer). You are free to put whatever you want in these blocks.
Sometimes you will want to refer to external documents (images, files etc.). In this case, you can use the prefix $data_dir. For instance, the address of your external document "logo.png" would be "$data_dir/logo.png". Uploading such files is explained a little further down (static resources).
You can also refer to a page of your website, in the header as well as in the footer. For that, you can use the prefix $site_root. For example, to link to a copyright page you can insert "$site_root/content/2-copyright".
Static Resources
You can upload static resources (typically images), for example to use them in the header and footer. To upload an image, click on the static resources link, then upload your file. Each file must have a unique name that you will reference in HTML (see above).
Markup / CSS / JavaScript
The look of your public site relies on the standard HTML / CSS / JavaScript technologies. HTML pages are automatically generated from your sections and resources, with explicit classes in the markup. You can write your CSS stylesheet, which describes the visual look of your website, and reference these content classes. You can also use JavaScript functions.
HTML Structure
The HTML structure of the site is automatic, and aims to be as neutral as possible, reflecting only the structure of the pages. The CSS classes must rely on this structure.
CSS
You can download the CSS of your site, or upload a new CSS, from the static resources link. You can also upload a special fallback CSS for old or defective browsers.
From your CSS, you may need to refer to static resources (images etc.). To do this, the simplest way is to use the relative prefix ../data/.... For example, to reference logo.png, just type ../data/logo.png.
JavaScript
jQuery and Underscore are provided by default. You can add your own JavaScript code.
Domain Name (DNS)
To have your website respond to your DNS address (http://www.example.com), you need to configure your DNS and create a CNAME alias to public.atikteam.com. This configuration must be done with your domain name registrar.
Once the change has taken effect, you must enter your address (http://www.example.com) in the configuration of the public site on AtikTeam.