Blogging

Blogging with imperia

imperia 10 provides a way to use it to create Blogs.

In the following you will be explained step by step how to create the blogging environment.

1. Blogging Workflow#

First, create a new workflow, that will be used for your blogging category.

You need to consider whether your Blog will be in several languages or just in one language.

Multilingual blog#

In case you are creating a multilingual Blog and want to have speaking URIs, you may use a workflow, similar to this one:

The second Multilang plug-in (in this case called SpeakingURI) is used to create the speaking URIs.

In the copy variable, set for example (code wrapped for representation purposes):

<!--SECTION:DIRECTORY-->/<!--Xstrftime:C:%Y-->/<!--DOC_ID:%06d-->/<!--XX-NORMALIZE
(lingua=<!--XX-lingua-->):title_lingua-->.html.<!--XX-lingua-->:
TEMPLATE=<!--XX-template-->:__imperia_preview_select_name=<!--XX-CODE2LANGUAGE:
lingua-->:lingua=<!--XX-lingua-->

Single language blog#

In case you are creating a single language Blog and want to have speaking URIs, you may use a workflow, similar to this one:

The Meta-Setter plug in is used to create the speaking URIs.

For the filename meta variable, set for example:

<!--XX-NORMALIZE(lingua=de):title-->.html

2. Blogging Template#

Next, you will need a template for your Blog entries. The following variables are required:

  • title - the blog entry's title

  • impblog_author - the blog entry's author

  • impblog_date - the blog entry's date (in the desired format)

  • impblog_sortdate - the blog entry's sort date required format - '%Y-%m-%d %H:%M'

  • impblog_tag - the blog entry's tags (a comma-separated list of tags or an array)

Important

For a multilingual blog ALL mentioned above variables have to be supplemented with the _lingua suffix (e.g. title_lingua).

Now that you have created your entry template, you need a template for your overview page. You don't need to create a separate template file for this purpose. Use the variable impblog_overview to check whether are inside an overview page.

Copy site/sample/include/impblog_overview.html to site/include (you can edit it if necessary) and include it in your overview template:

<!--CODEINCLUDE:impblog_overview.html-->

3. Blogging System Services#

Finally, create a SiteActive system service that will generate the actual overview page. For multilingual Blogs, create a separate system service for each language.

Your system service needs the following parameters:

  • TEMPLATE={SITE_ACTIVE}/imperia/blog/overviews.html

  • template=blogging.htms - this is the template of your blogging category.

  • SAVEPAGE=/ssi/blogs/international/overview/log.txt.en - contains possible debugging output

  • directory=/blogs/international - this is the directory of your blogging category.

  • filemask=.*\.html\.en$ - a regular expression that defines which files should be considered hits.

  • view=/blog/overview-multilang.html - you can change this variable with your own view template.

  • lingua=en - defines the language.

The system service for a single language blog needs the following parameters:

  • TEMPLATE={SITE_ACTIVE}/imperia/blog/overviews.html

  • SAVEPAGE=/ssi/blogs/single/overview/log.txt - contains possible debugging output

  • directory=/blogs/single - this is the directory of your blogging category.

  • filemask=.*\.html$ - a regular expression that defines which files should be considered hits.

  • view=/blog/overview.html - you can change this variable with your own view template.

  • lang=de - defines the language.

You will need to create system services for your Archive and Tag lists. The parameters for the Archive list are as follows (code wrapped for representation purposes):

TEMPLATE={SITE_ACTIVE}/imperia/blog/archivelist.html:
SAVEPAGE=/ssi/blogs/international/archives/index.ssi.en:
view=/imperia/blog/archivelist/archivelink.html:
filemask=.*.html.en$:lingua=en

The parameters for the Tag list are as follows (code wrapped for representation purposes):

TEMPLATE={SITE_ACTIVE}/imperia/blog/taglist.html:
SAVEPAGE=/ssi/blogs/international/tags/index.ssi.en:
view=/imperia/blog/taglist/taglink.html:filemask=.*.html.en$:lingua=en

The examples above are for multilingual Blog. You will need to create separate system services for each language. To include the lists in your template with:

<!--#include virtual="/ssi/path/to/your/archive/blog/dir/index.ssi.<!--XX-lingua-->"-->

<!--#include virtual="/ssi/path/to/your/tags/blog/dir/index.ssi"-->

Note

The <!--XX-lingua--> is only needed with multilang documents.

4. Adding Comments#

Note

All the examples below are for multilingual Blogs.

To include comments to your articles, first you need the following JavaScripts within your template (code is wrapped for representation purposes):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" 
type="text/javascript" charset="utf-8"></script>
<script src="/imperia/js/features/blog/dist/jquery.cookie.js" 
type="text/javascript" charset="utf-8"></script>
<script src="/imperia/js/features/blog/feedback.js" 
type="text/javascript" charset="utf-8"></script>

For the part of the comments visible to users, create an HTML form. Example (code is wrapped for representation purposes):

#IF (NOT <!--XX-editmode-->)
  <h3>Leave a comment</h3>
  <div>
      <form action="/controller/live/feedback" method="get">
        <label>Name*</label> 
        <input name="name" required="true" /> <br />
        <label>Email* (will not be published)</label>
        <input name="email" type="email" required="true" /> <br />
        <label>Website</label> 
        <input name="website" /> <br/>
        <label>Subject</label> 
        <input name="subject" /> <br/>
        <label>Comment*</label> 
        <textarea name="comment" required="true"></textarea><br/>

        <input type="hidden" name="uri" 
        value="<!--XX-directory-->/<!--XX-filename-->" />

        <noscript id="impblog-captcha-placeholder" 
        data-uri="/controller/live/captcha">
            <input type="hidden" name="no_javascript_support" value="1" />
            <h1>Comments require javascript support!</h1>
        </noscript>
        <br class="clear"/>
        <input type="submit" value="Post Comment"/>            
    </form>
  </div>
#ENDIF

Keep in mind:

  • the form action is “/controller/live/feedback”;

  • the names of the input fields are not optional, they have to be the same as the example above. This is because all comments are stored in lists and called by a variable name that corresponds to the name attribute of the input field;

  • the “uri” hidden field is used so that imperia knows to which file to attach the comments;

  • the noscript tag is where the captcha functionality gets inserted.

  • In order to retrieve new comments, the Hermes has to poll your live systems. This is controlled by the existence of the site/temp/feedback directory. If it exists, Hermes polls the live systems; in case you want to prevent this behavior, simply delete the directory.

To display the number of comments, use:

{% num_comments = @{meta.@getValues('impblog_comment_name_<!--XX-lingua-->')} %}

{% num_comments %} comment(s)

In order to be able to delete comments, you need to create an array block in your template (code is wrapped for representation purposes):

{% #if (num_comments) %}     
<h3>Comments</h3>
<ul>  
<!--ARRAYBLOCK:JS_OPERATIONS=1:DND=1-->
  <li>
      <div><!--XX-ARRAY-DATETIME('format=%c' 'convert=utc-client' 
      'lingua=<!--XX-lingua-->'):impblog_comment_time_<!--XX-lingua-->--></div>
      <div><input name="IMPERIA:TEXT:impblog_comment_name_lingua" /></div>
      <div><input name="IMPERIA:TEXT:impblog_comment_subject_lingua" /></div>               
      <div><textarea name="IMPERIA:impblog_comment_content_lingua"></textarea></div>

      #IF (<!--XX-editmode-->)
      <input name="IMPERIA:impblog_comment_email_lingua" type="hidden" />
      <input name="IMPERIA:impblog_comment_website_lingua" type="hidden" />
      <input name="IMPERIA:impblog_comment_time_lingua" type="hidden" />
      <input name="IMPERIA:impblog_comment_ip_lingua" type="hidden" />
      #ENDIF
  </li>
<!--/ARRAYBLOCK-->

Keep in mind:

  • all fields that can be edited by users have to be escaped;

  • in EDIT mode you have to add hidden fields for all variables that are not used in form fields (like input or textarea) so that the corresponding values get deleted from the arrays, when a comment is deleted or moved.