Consulting | 4 MIN READ

Building Websites with Confluence and Scroll Viewport from K15t

Today I will write about a fairly new solution for building websites. We ourselves have been using this solution for Riada.se. It was quite a challenge, but we love challenges and to explore new things. So we only had one choice, just to do it, and the result was above our expectations.

 

Everything has to start somewhere

There is a lot of content management systems to use for building websites, let’s take Wordpress for example. Wordpress is a great tool when you need to make a fully customized layout for your website and then have a management system behind it.

I’m not going to focus on Wordpress in this post, I took it as an example to explain that Wordpress actually wasn’t meant for websites, from the beginning it was a blog tool. But as you know, everything can evolve into something bigger, so it quickly grew to become a tool for websites, intranets, web shops and more. That's because the tool allows you to build page structures and store content in an abstract way so you can choose whether it is a blog or news post in the view when your layout display it.

 

Confluence - More than a wiki

Confluence is a very powerful collaboration tool, where you also can build page structures and store content into them with the awesome rich editor. The ability to use existing macros and develop your own macros breaks the limits of what is possible to do. But what if you want to use Confluence for building a website? Even though you can do basically anything with the content, you may want the layout look like something else than a wiki.

The Atlassian partner K15t Software have developed an excellent add-on for Confluence, Scroll Viewport. This plugin lets you build templates freely with frontend programming languages such as HTML, CSS and JavaScript. It also comes with an easy SDK that have resources to fetch your content from Confluence.

When you install the add-on, it doesn’t affect your Confluence instance until you decide which space you want to be a "viewport". A viewport can be explained as your theme connected to a space in Confluence, this theme will then render your pages as you defined it, with your own style.

 viewport_website

 

How to make the themes

Scroll Viewport comes with a built-in FTP service for storing your theme directories. When you access the FTP you will end up in a root where each directory is a theme. Depending on the URL, Scroll Viewport will search for some template files in the theme directory. For example, if the URL points to a page in Confluence it will call the template page.vm, and error.vm if page not found and so on. Velocity is used in the templates to access the SDK with predefined placeholders to output content from Confluence. Otherwise, you have full control on HTML, CSS and JavaScript. Read more about develop themes in the documentation https://www.k15t.com/display/VPRT/Developers+Guide.

 

 frontend_languages

How to structure your content

You will use a placeholder to output all the content from a single page to your layout. If you want to structure your content into columns, tables and other formatting, there's no problem, Confluence has many opportunities to do it directly in the rich editor, which then generate semantic HTML that you can fit with your stylesheets. Besides the basic formatting you can also create your own macros to make UI modules such as buttons, slideshows or anything that needs customized code elements.

confluence-editor-mode

 

Pretty links

Scroll Viewport solves the part of bad links by making them SEO-friendly, for instance a standard Confluence URL like https://riada.se/pages/viewpage.action?pageId=1212512 will be https://riada.se/consulting-services. The page name would thus automatically end up in the link to the page, and its hierarchy, if there's a subpage.

prettylinks

 

 Conclusion

An important part in content management systems is that you are able to build advanced page structures directly in the editor, so you don't have to create a custom template for each page that have small differences. In Confluence, you can solve that part with macros. Building the themes is easy as long you have required frontend skills. Something that's missing is the ability to have custom meta data on pages, it would be good for meta descriptions etc. However, ScrollViewport  is under development and K15t Software team is willing to implement new features in time. Scroll Viewport 2.0 will be released within the next weeks.

If you want to try something new, Scroll Viewport is a good choice. Get it here https://www.k15t.com/software/scroll-viewport/overview

Originally published Nov 27, 2014 4:10:21 AM

Topics: Consulting