This OctoberCMS plugin provides the SEO and Routing functionality for a Styla magazine. The first diagram on this page should provide you an overview of what the plugin does and how it exchanges data with Styla.
In order to fill a magazine page created within OctoberCMS with crawlable content a component must be attached to the magazine page.
The first step is installing the plugin by copying the /styla folder to the /plugins directory. That's it already. You should now see the Magazine plugin in the OctoberCMS Backend:
The setup of the folder integration can also completely be done from within the OctoberCMS Backend Interface.
- Create a new page for your magazine: The URL of the page should reflect the
rootPathof the desired magazine, e.g./<rootPath> - Create another Page for your magazine which will serve as a wildcard: The URL should be something like this
/<rootPath>/:param*
- Drag & drop the plugin from the components section to both pages code section.
- Place the following line where the magazine should appear on the site:
{% component 'Magazine' %}
- In order to configure the plugin click on the component. You'll see the following settings:
Alias– required, default:Magazine– the internal name which OctoberCMS will use to load the componentDomain– required – the domain of the desired magazineCDN Server– required, default:http://cdn.styla.com/– the server that provides the necessary scripts and styles for the magazineSEO Server– required, default:http://seo.styla.com/– the server that provides SEO information for the magazineVersion Server– required, default:http://live.styla.com/– the server that provides the latest version number of the scripts and styles for the magazineFeedlimit– optional, the amount of stories to be shown in the magazine, adds thedata-feedlimitattributeTag– optional, the magazine will only show stories with the specified tag, adds thedata-tagattributeDebug– optional, when enabled Debug information will be displayed above the magazine
- When a page with the plugin is called the component will write fetched SEO information to the
headin your layout file - Therefor the
<head>section of your layout should look something like this (in regards to the placeholder):
<head>
<title>October CMS - {{ this.page.title }}</title>
<meta name="author" content="October CMS">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}" />
{% placeholder head %}
{% styles %}
<link href="{{ [
'assets/css/theme.css'
]|theme }}" rel="stylesheet">
</head>
- Done.
With everything set up, a simple magazine page could look like this:
