Facilitate HTML code formatting of all pages
This commit is contained in:
Daniel Rudolf
parent
fed5b8fb24
commit
068c2652cb
4 changed files with 403 additions and 367 deletions
520
docs.html
520
docs.html
|
|
@ -3,250 +3,296 @@ layout: default
|
|||
title: Docs
|
||||
---
|
||||
|
||||
<!-- Begin Light Wrapper -->
|
||||
<div class="light-wrapper">
|
||||
|
||||
<!-- Begin Inner -->
|
||||
<div class="light-wrapper">
|
||||
<div class="inner">
|
||||
<h1 class="aligncenter">Pico Documentation</h1>
|
||||
<p class="description aligncenter">Pico is a flat file CMS, this means there is no administration backend and database to deal with.
|
||||
<br />You simply create .md files in the "content" folder and that becomes a page.</p>
|
||||
<br />
|
||||
<div class="one-fourth">
|
||||
<ul>
|
||||
<li><a href="#requirements">Requirements</a></li>
|
||||
<li><a href="#installation">Installation</a></li>
|
||||
<li><a href="#creating-content">Creating Content</a>
|
||||
<ul><li><a href="#text-file-markup">Text File Markup</a></li></ul>
|
||||
</li>
|
||||
<li><a href="#themeing">Themeing</a>
|
||||
<ul><li><a href="#blogging">Blogging</a></li></ul>
|
||||
</li>
|
||||
<li><a href="#plugins">Plugins</a>
|
||||
<ul><li><a href="#adding-custom-meta">Adding Custom Meta</a></li></ul>
|
||||
</li>
|
||||
<li><a href="#contribute">Contribute</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="three-fourth last">
|
||||
<h3 id="requirements">Requirements</h3>
|
||||
<p>To run Pico you simply need <strong>PHP 5.3+</strong> to be running on your server. If you're running Apache you will
|
||||
also require <code>mod_rewrite</code> to be enabled.</p>
|
||||
<hr>
|
||||
<h3 id="installation">Installation</h3>
|
||||
<ol>
|
||||
<li>First <a href="download.html">download</a> and extract the latest version of Pico.</li>
|
||||
<li>Upload the files to your server (via FTP or some other deployment).</li>
|
||||
<li>Download <a href="https://getcomposer.org/">composer</a> and run it with install option.</li>
|
||||
|
||||
<pre><code>
|
||||
$ curl -sS https://getcomposer.org/installer | php
|
||||
$ php composer.phar install
|
||||
</code></pre>
|
||||
|
||||
<li>The easiest way to Pico is using <a href="http://php.net/manual/en/features.commandline.webserver.php">the built-in web server on PHP</a>.</li>
|
||||
|
||||
<pre><code>
|
||||
$ php -S 0.0.0.0:8080 ./
|
||||
</code></pre>
|
||||
|
||||
<li>Pico will be accessible from <a href="http://localhost:8080">http://localhost:8080</a>.</li>
|
||||
<li>That's it. Tweak the <code>.htaccess</code> file if required.</li>
|
||||
<ol>
|
||||
<br />
|
||||
<p>You can override the default Pico settings (and add your own custom settings) by editing <code>config/config.php</code> in the Pico directory. The <code>config/config.php.template</code> lists all of the settings and their defaults. To override a setting simply copy <code>config/config.php.template</code> to <code>config/config.php</code>, uncomment the setting and set your custom value.</p>
|
||||
<hr>
|
||||
<h3 id="creating-content">Creating Content</h3>
|
||||
<p>Pico is a flat file CMS, this means there is no administration backend and database to deal with. You simply create <code>.md</code> files in the "content-sample"
|
||||
folder and that becomes a page.</p>
|
||||
<p>If you created folder within the content-sample folder (e.g. <code>content-sample/sub</code>) and put an <code>index.md</code> inside it, you can access that folder at the URL
|
||||
<code><a href="http://yoursite.com/sub">http://yoursite.com/sub</a></code>. If you want another page within the sub folder, simply create a text file with the corresponding name (e.g. <code>content-sample/sub/page.md</code>)
|
||||
and will be able to access it from the URL <code><a href="http://yoursite.com/sub/page">http://yoursite.com/sub/page</a></code>.</p>
|
||||
<p>Below we've shown some examples of content locations and their corresponing URL's:</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="text-align:left">Physical Location</th>
|
||||
<th style="text-align:left">URL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/index.md</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/sub.md</td>
|
||||
<td>/sub</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/sub/index.md</td>
|
||||
<td>/sub (same as above)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/sub/page.md</td>
|
||||
<td>/sub/page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/a/very/long/url.md </td>
|
||||
<td>/a/very/long/url</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
<p>If a file cannot be found, the file <code>content-sample/404.md</code> will be shown.</p>
|
||||
<h1 class="aligncenter">Pico Documentation</h1>
|
||||
<p class="description aligncenter">
|
||||
Pico is a flat file CMS, this means there is no administration backend and database to deal with.<br />
|
||||
You simply create .md files in the "content" folder and that becomes a page.
|
||||
</p><br />
|
||||
|
||||
<h4 id="text-file-markup">Text File Markup</h4>
|
||||
<p>Text files are marked up using <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a>.
|
||||
They can also contain regular HTML. At the top of text files you can place a block comment and specify certain attributes of the page.
|
||||
For example:</p>
|
||||
<pre><code>/*
|
||||
Title: Welcome
|
||||
Description: This description will go in the meta description tag
|
||||
Author: Joe Bloggs
|
||||
Date: 2013/01/01
|
||||
Robots: noindex,nofollow
|
||||
Template: index (allows you to use different templates in your theme)
|
||||
*/
|
||||
</code></pre>
|
||||
<p>These values will be contained in the <code>{{ meta }}</code> variable in themes (see below).
|
||||
There are also certain variables that you can use in your text files:</p>
|
||||
<ul>
|
||||
<li>%base_url% - The URL to your Pico site</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3 id="themeing">Themeing</h3>
|
||||
<p>You can create themes for your Pico installation and in the "themes" folder. Check out the default theme for an example of a theme. Pico uses
|
||||
<a href="http://twig.sensiolabs.org/documentation">Twig</a> for it's templating engine. You can select your theme by setting the <code>$config['theme']</code> variable
|
||||
in <code>config/config.php</code> to your theme folder.</p>
|
||||
<p>All themes must include an <code>index.html</code> file to define the HTML structure of the theme. Below are the Twig variables that are available to use in your theme:</p>
|
||||
<ul>
|
||||
<li><code>{{ config }}</code> - Conatins the values you set in <code>config/config.php</code> (e.g. <code>{{ config.theme }}</code> = "default")</li>
|
||||
<li><code>{{ base_dir }}</code> - The path to your Pico root directory</li>
|
||||
<li><code>{{ base_url }}</code> - The URL to your Pico site</li>
|
||||
<li><code>{{ theme_dir }}</code> - The path to the Pico active theme direcotry</li>
|
||||
<li><code>{{ theme_url }}</code> - The URL to the Pico active theme direcotry</li>
|
||||
<li><code>{{ site_title }}</code> - Shortcut to the site title (defined in <code>config/config.php</code>)</li>
|
||||
<li><code>{{ meta }}</code> - Contains the meta values from the current page
|
||||
<ul>
|
||||
<li><code>{{ meta.title }}</code></li>
|
||||
<li><code>{{ meta.description }}</code></li>
|
||||
<li><code>{{ meta.author }}</code></li>
|
||||
<li><code>{{ meta.date }}</code></li>
|
||||
<li><code>{{ meta.date_formatted }}</code></li>
|
||||
<li><code>{{ meta.robots }}</code></li>
|
||||
</ul></li>
|
||||
<li><code>{{ content }}</code> - The content of the current page (after it has been processed through Markdown)</li>
|
||||
<li><code>{{ pages }}</code> - A collection of all the content in your site
|
||||
<ul>
|
||||
<li><code>{{ page.title }}</code></li>
|
||||
<li><code>{{ page.url }}</code></li>
|
||||
<li><code>{{ page.author }}</code></li>
|
||||
<li><code>{{ page.date }}</code></li>
|
||||
<li><code>{{ page.date_formatted }}</code></li>
|
||||
<li><code>{{ page.content }}</code></li>
|
||||
<li><code>{{ page.excerpt }}</code></li>
|
||||
</ul></li>
|
||||
<li><code>{{ prev_page }}</code> - A page object of the previous page (relative to current_page)</li>
|
||||
<li><code>{{ current_page }}</code> - A page object of the current_page</li>
|
||||
<li><code>{{ next_page }}</code> - A page object of the next page (relative to current_page)</li>
|
||||
<li><code>{{ is_front_page }}</code> - A boolean flag for the front page</li>
|
||||
</ul>
|
||||
<p>Pages can be used like:</p>
|
||||
<pre><ul class="nav">
|
||||
{% for page in pages %}
|
||||
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul></pre>
|
||||
<h4 id="blogging">Blogging</h4>
|
||||
<p>If you would like to add a blog to your Pico site we suggest taking the following steps:</p>
|
||||
<ul>
|
||||
<li>Put all of your post .md files in your content-sample folder</li>
|
||||
<li>Make sure you add a "Date" field to all of your post .md files in the content-sample folder so you can distinguish between
|
||||
posts and pages (i.e. posts will have a "Date", pages won't)</li>
|
||||
<li>In your template do something like this:</li>
|
||||
</ul>
|
||||
<pre>{% if is_front_page %} <!-- Front page lists all blog posts -->
|
||||
<div class="one-fourth">
|
||||
<ul>
|
||||
<li><a href="#requirements">Requirements</a></li>
|
||||
<li><a href="#installation">Installation</a></li>
|
||||
<li>
|
||||
<a href="#creating-content">Creating Content</a>
|
||||
<ul><li><a href="#text-file-markup">Text File Markup</a></li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#themeing">Themeing</a>
|
||||
<ul><li><a href="#blogging">Blogging</a></li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#plugins">Plugins</a>
|
||||
<ul><li><a href="#adding-custom-meta">Adding Custom Meta</a></li></ul>
|
||||
</li>
|
||||
<li><a href="#contribute">Contribute</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="three-fourth last">
|
||||
<h3 id="requirements">Requirements</h3>
|
||||
<p>
|
||||
To run Pico you simply need <strong>PHP 5.3+</strong> to be running on your server.
|
||||
If you're running Apache you will require <code>mod_rewrite</code> to be enabled.
|
||||
</p>
|
||||
|
||||
<div id="posts">
|
||||
{% for page in pages %}
|
||||
{% if page.date %} <!-- Note we check for Date field (posts) here -->
|
||||
<div class="post">
|
||||
<h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
|
||||
<p class="meta">{{ page.date_formatted }}</p>
|
||||
<p class="excerpt">{{ page.excerpt }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
{% else %} <!-- Single page shows individual blog post -->
|
||||
<h3 id="installation">Installation</h3>
|
||||
<ol>
|
||||
<li>First <a href="download.html">download</a> and extract the latest version of Pico.</li>
|
||||
<li>Upload the files to your server (via FTP or some other deployment).</li>
|
||||
<li>Download <a href="https://getcomposer.org/">composer</a> and run it with install option.</li>
|
||||
|
||||
<div class="post">
|
||||
{% if meta.title %}<h2>{{ meta.title }}</h2>{% endif %}
|
||||
<p class="meta">{{ meta.date_formatted }}</p>
|
||||
{{ content }}
|
||||
</div>
|
||||
<pre><code>
|
||||
$ curl -sS https://getcomposer.org/installer | php
|
||||
$ php composer.phar install
|
||||
</code></pre>
|
||||
|
||||
{% endif %}</pre>
|
||||
<hr>
|
||||
<h3 id="plugins">Plugins</h3>
|
||||
<p><a href="plugins.html">Plugins</a> can be created by creating a new PHP file and placing it in the "plugins" folder. Plugins can be placed
|
||||
in a sub folder if required. In your new plugin PHP file you need to create class with the <strong>same name</strong> as
|
||||
the file. So if you create a file called <code>my_plugin.php</code> your class needs to be called <code>My_Plugin</code>.</p>
|
||||
<li>The easiest way to Pico is using <a href="http://php.net/manual/en/features.commandline.webserver.php">the built-in web server on PHP</a>.</li>
|
||||
|
||||
<p>Plugins can hook into Pico by adding functions with predefined names (hooks) to their class. For example you could
|
||||
add a custom template variable by adding a <code>before_render</code> hook:</p>
|
||||
<pre>class My_Plugin {
|
||||
<pre><code>
|
||||
$ php -S 0.0.0.0:8080 ./
|
||||
</code></pre>
|
||||
|
||||
public function before_render(&$twig_vars, &$twig)
|
||||
{
|
||||
// Add a custom template variable
|
||||
$twig_vars['my_custom_var'] = 'Hello World';
|
||||
}
|
||||
<li>Pico will be accessible from <a href="http://localhost:8080">http://localhost:8080</a>.</li>
|
||||
<li>That's it. Tweak the <code>.htaccess</code> file if required.</li>
|
||||
</ol><br />
|
||||
|
||||
}</pre>
|
||||
<p>Below is a list of available hooks and their parameters:</p>
|
||||
<ul>
|
||||
<li><code>plugins_loaded()</code></li>
|
||||
<li><code>config_loaded(&$settings)</code></li>
|
||||
<li><code>request_url(&$url)</code></li>
|
||||
<li><code>before_load_content(&$file)</code></li>
|
||||
<li><code>after_load_content(&$file, &$content)</code></li>
|
||||
<li><code>before_404_load_content(&$file)</code></li>
|
||||
<li><code>after_404_load_content(&$file, &$content)</code></li>
|
||||
<li><code>before_read_file_meta(&$headers)</code></li>
|
||||
<li><code>file_meta(&$meta)</code></li>
|
||||
<li><code>before_parse_content(&$content)</code></li>
|
||||
<li><code>after_parse_content(&$content)</code></li>
|
||||
<li><code>get_page_data(&$data, $page_meta)</code></li>
|
||||
<li><code>get_pages(&$pages, &$current_page, &$prev_page, &$next_page)</code></li>
|
||||
<li><code>before_twig_register()</code></li>
|
||||
<li><code>before_render(&$twig_vars, &$twig, &$template)</code></li>
|
||||
<li><code>after_render(&$output)</code></li>
|
||||
</ul>
|
||||
<p>Note that parameter variables are <a href="http://php.net/manual/en/language.references.pass.php" target="_blank">passed by reference</a>
|
||||
so that they can be modified.</p>
|
||||
<h4 id="adding-custom-meta">Adding Custom Meta</h4>
|
||||
<p>If you need to add custom meta variables you can do so using the <code>before_read_file_meta()</code> hook. For example:</p>
|
||||
<pre><code>public function before_read_file_meta(&$headers)
|
||||
{
|
||||
$headers['layout'] = 'Layout';
|
||||
}</code></pre>
|
||||
<p>Then in your content meta you would add the relevant meta value:</p>
|
||||
<pre><code>/*
|
||||
Title: Example
|
||||
Description: This is a description
|
||||
Layout: 2col
|
||||
*/
|
||||
</code></pre>
|
||||
<p>You will then be able to access this value via the <code>{{ meta.layout }}</code> template variable.</p>
|
||||
<hr>
|
||||
<h3 id="contribute">Contribute</h3>
|
||||
<p>Help make Pico better by checking out <a href="https://github.com/gilbitron/Pico">the GitHub repository</a> and submitting pull requests. If you find a bug
|
||||
please report it on <a href="https://github.com/gilbitron/Pico/issues">the issues page</a>.</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<p>You can override the default Pico settings (and add your own custom settings) by editing <code>config/config.php</code> in the Pico directory. The <code>config/config.php.template</code> lists all of the settings and their defaults. To override a setting simply copy <code>config/config.php.template</code> to <code>config/config.php</code>, uncomment the setting and set your custom value.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="creating-content">Creating Content</h3>
|
||||
<p>
|
||||
Pico is a flat file CMS, this means there is no administration backend and database to deal with.
|
||||
You simply create <code>.md</code> files in the "content-sample" folder and that becomes a page.
|
||||
</p>
|
||||
<p>
|
||||
If you created folder within the content-sample folder (e.g. <code>content-sample/sub</code>) and put an <code>index.md</code> inside it, you can access that folder at the URL
|
||||
<code><a href="http://yoursite.com/sub">http://yoursite.com/sub</a></code>. If you want another page within the sub folder, simply create a text file with the corresponding name (e.g. <code>content-sample/sub/page.md</code>)
|
||||
and will be able to access it from the URL <code><a href="http://yoursite.com/sub/page">http://yoursite.com/sub/page</a></code>.
|
||||
</p>
|
||||
|
||||
<p>Below we've shown some examples of content locations and their corresponing URL's:</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="text-align:left">Physical Location</th>
|
||||
<th style="text-align:left">URL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/index.md</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/sub.md</td>
|
||||
<td>/sub</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/sub/index.md</td>
|
||||
<td>/sub (same as above)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/sub/page.md</td>
|
||||
<td>/sub/page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content-sample/a/very/long/url.md </td>
|
||||
<td>/a/very/long/url</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br />
|
||||
|
||||
<p>If a file cannot be found, the file <code>content-sample/404.md</code> will be shown.</p>
|
||||
|
||||
<h4 id="text-file-markup">Text File Markup</h4>
|
||||
<p>
|
||||
Text files are marked up using <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a>.
|
||||
They can also contain regular HTML. At the top of text files you can place a block comment and specify certain attributes of the page.
|
||||
For example:
|
||||
</p>
|
||||
<pre><code>
|
||||
/*
|
||||
Title: Welcome
|
||||
Description: This description will go in the meta description tag
|
||||
Author: Joe Bloggs
|
||||
Date: 2013/01/01
|
||||
Robots: noindex,nofollow
|
||||
Template: index (allows you to use different templates in your theme)
|
||||
*/
|
||||
</code></pre>
|
||||
<p>
|
||||
These values will be contained in the <code>{{ meta }}</code> variable in themes (see below).
|
||||
There are also certain variables that you can use in your text files:
|
||||
</p>
|
||||
<ul>
|
||||
<li>%base_url% - The URL to your Pico site</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="themeing">Themeing</h3>
|
||||
<p>
|
||||
You can create themes for your Pico installation and in the "themes" folder. Check out the default theme for an example of a theme. Pico uses
|
||||
<a href="http://twig.sensiolabs.org/documentation">Twig</a> for it's templating engine. You can select your theme by setting the <code>$config['theme']</code> variable
|
||||
in <code>config/config.php</code> to your theme folder.
|
||||
</p>
|
||||
<p>All themes must include an <code>index.html</code> file to define the HTML structure of the theme. Below are the Twig variables that are available to use in your theme:</p>
|
||||
<ul>
|
||||
<li><code>{{ config }}</code> - Conatins the values you set in <code>config/config.php</code> (e.g. <code>{{ config.theme }}</code> = "default")</li>
|
||||
<li><code>{{ base_dir }}</code> - The path to your Pico root directory</li>
|
||||
<li><code>{{ base_url }}</code> - The URL to your Pico site</li>
|
||||
<li><code>{{ theme_dir }}</code> - The path to the Pico active theme direcotry</li>
|
||||
<li><code>{{ theme_url }}</code> - The URL to the Pico active theme direcotry</li>
|
||||
<li><code>{{ site_title }}</code> - Shortcut to the site title (defined in <code>config/config.php</code>)</li>
|
||||
<li>
|
||||
<code>{{ meta }}</code> - Contains the meta values from the current page
|
||||
<ul>
|
||||
<li><code>{{ meta.title }}</code></li>
|
||||
<li><code>{{ meta.description }}</code></li>
|
||||
<li><code>{{ meta.author }}</code></li>
|
||||
<li><code>{{ meta.date }}</code></li>
|
||||
<li><code>{{ meta.date_formatted }}</code></li>
|
||||
<li><code>{{ meta.robots }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ content }}</code> - The content of the current page (after it has been processed through Markdown)</li>
|
||||
<li>
|
||||
<code>{{ pages }}</code> - A collection of all the content in your site
|
||||
<ul>
|
||||
<li><code>{{ page.title }}</code></li>
|
||||
<li><code>{{ page.url }}</code></li>
|
||||
<li><code>{{ page.author }}</code></li>
|
||||
<li><code>{{ page.date }}</code></li>
|
||||
<li><code>{{ page.date_formatted }}</code></li>
|
||||
<li><code>{{ page.content }}</code></li>
|
||||
<li><code>{{ page.excerpt }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ prev_page }}</code> - A page object of the previous page (relative to current_page)</li>
|
||||
<li><code>{{ current_page }}</code> - A page object of the current_page</li>
|
||||
<li><code>{{ next_page }}</code> - A page object of the next page (relative to current_page)</li>
|
||||
<li><code>{{ is_front_page }}</code> - A boolean flag for the front page</li>
|
||||
</ul>
|
||||
|
||||
<p>Pages can be used like:</p>
|
||||
<pre><ul class="nav">
|
||||
{% for page in pages %}
|
||||
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul></pre>
|
||||
|
||||
<h4 id="blogging">Blogging</h4>
|
||||
<p>If you would like to add a blog to your Pico site we suggest taking the following steps:</p>
|
||||
<ul>
|
||||
<li>Put all of your post .md files in your content-sample folder</li>
|
||||
<li>
|
||||
Make sure you add a "Date" field to all of your post .md files in the content-sample folder so you can distinguish between
|
||||
posts and pages (i.e. posts will have a "Date", pages won't)
|
||||
</li>
|
||||
<li>In your template do something like this:</li>
|
||||
</ul>
|
||||
|
||||
<pre>{% if is_front_page %} <!-- Front page lists all blog posts -->
|
||||
|
||||
<div id="posts">
|
||||
{% for page in pages %}
|
||||
{% if page.date %} <!-- Note we check for Date field (posts) here -->
|
||||
<div class="post">
|
||||
<h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
|
||||
<p class="meta">{{ page.date_formatted }}</p>
|
||||
<p class="excerpt">{{ page.excerpt }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %} <!-- Single page shows individual blog post -->
|
||||
|
||||
<div class="post">
|
||||
{% if meta.title %}<h2>{{ meta.title }}</h2>{% endif %}
|
||||
<p class="meta">{{ meta.date_formatted }}</p>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% endif %}</pre>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="plugins">Plugins</h3>
|
||||
<p>
|
||||
<a href="plugins.html">Plugins</a> can be created by creating a new PHP file and placing it in the "plugins" folder. Plugins can be placed
|
||||
in a sub folder if required. In your new plugin PHP file you need to create class with the <strong>same name</strong> as
|
||||
the file. So if you create a file called <code>my_plugin.php</code> your class needs to be called <code>My_Plugin</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Plugins can hook into Pico by adding functions with predefined names (hooks) to their class. For example you could
|
||||
add a custom template variable by adding a <code>before_render</code> hook:
|
||||
</p>
|
||||
<pre>class My_Plugin {
|
||||
|
||||
public function before_render(&$twig_vars, &$twig)
|
||||
{
|
||||
// Add a custom template variable
|
||||
$twig_vars['my_custom_var'] = 'Hello World';
|
||||
}
|
||||
|
||||
}</pre>
|
||||
|
||||
<p>Below is a list of available hooks and their parameters:</p>
|
||||
<ul>
|
||||
<li><code>plugins_loaded()</code></li>
|
||||
<li><code>config_loaded(&$settings)</code></li>
|
||||
<li><code>request_url(&$url)</code></li>
|
||||
<li><code>before_load_content(&$file)</code></li>
|
||||
<li><code>after_load_content(&$file, &$content)</code></li>
|
||||
<li><code>before_404_load_content(&$file)</code></li>
|
||||
<li><code>after_404_load_content(&$file, &$content)</code></li>
|
||||
<li><code>before_read_file_meta(&$headers)</code></li>
|
||||
<li><code>file_meta(&$meta)</code></li>
|
||||
<li><code>before_parse_content(&$content)</code></li>
|
||||
<li><code>after_parse_content(&$content)</code></li>
|
||||
<li><code>get_page_data(&$data, $page_meta)</code></li>
|
||||
<li><code>get_pages(&$pages, &$current_page, &$prev_page, &$next_page)</code></li>
|
||||
<li><code>before_twig_register()</code></li>
|
||||
<li><code>before_render(&$twig_vars, &$twig, &$template)</code></li>
|
||||
<li><code>after_render(&$output)</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Note that parameter variables are <a href="http://php.net/manual/en/language.references.pass.php" target="_blank">passed by reference</a>
|
||||
so that they can be modified.
|
||||
</p>
|
||||
|
||||
<h4 id="adding-custom-meta">Adding Custom Meta</h4>
|
||||
<p>If you need to add custom meta variables you can do so using the <code>before_read_file_meta()</code> hook. For example:</p>
|
||||
<pre><code>public function before_read_file_meta(&$headers)
|
||||
{
|
||||
$headers['layout'] = 'Layout';
|
||||
}</code></pre>
|
||||
|
||||
<p>Then in your content meta you would add the relevant meta value:</p>
|
||||
<pre><code>/*
|
||||
Title: Example
|
||||
Description: This is a description
|
||||
Layout: 2col
|
||||
*/
|
||||
</code></pre>
|
||||
|
||||
<p>You will then be able to access this value via the <code>{{ meta.layout }}</code> template variable.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="contribute">Contribute</h3>
|
||||
<p>
|
||||
Help make Pico better by checking out <a href="https://github.com/gilbitron/Pico">the GitHub repository</a> and submitting pull requests. If you find a bug
|
||||
please report it on <a href="https://github.com/gilbitron/Pico/issues">the issues page</a>.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<!-- End Inner -->
|
||||
</div>
|
||||
<!-- End Light Wrapper -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,15 @@ layout: default
|
|||
title: Download
|
||||
---
|
||||
|
||||
<!-- Begin Light Wrapper -->
|
||||
<div class="light-wrapper">
|
||||
|
||||
<!-- Begin Inner -->
|
||||
<div class="light-wrapper">
|
||||
<div class="inner">
|
||||
<h1 class="aligncenter">Download Pico</h1>
|
||||
<p class="description aligncenter">Download the latest version of Pico or <a href="https://github.com/gilbitron/Pico">clone on GitHub</a>.
|
||||
<br /><br /><a href="https://github.com/picocms/Pico/archive/master.zip" class="button red">Download Pico</a></p>
|
||||
<br />
|
||||
<h3>Changelog</h3>
|
||||
<p>See the <a href="https://github.com/gilbitron/Pico/blob/master/changelog.txt">full changelog</a>.</p>
|
||||
<h1 class="aligncenter">Download Pico</h1>
|
||||
<p class="description aligncenter">
|
||||
Download the latest version of Pico or <a href="https://github.com/gilbitron/Pico">clone on GitHub</a>.<br /><br />
|
||||
<a href="https://github.com/picocms/Pico/archive/master.zip" class="button red">Download Pico</a>
|
||||
</p><br />
|
||||
|
||||
<h3>Changelog</h3>
|
||||
<p>See the <a href="https://github.com/gilbitron/Pico/blob/master/changelog.txt">full changelog</a>.</p>
|
||||
</div>
|
||||
<!-- End Inner -->
|
||||
</div>
|
||||
<!-- End Light Wrapper -->
|
||||
</div>
|
||||
|
|
|
|||
63
index.html
63
index.html
|
|
@ -3,40 +3,35 @@ layout: cover
|
|||
title: Home
|
||||
---
|
||||
|
||||
<!-- Begin Dark Wrapper -->
|
||||
<div class="dark-wrapper">
|
||||
<!-- Begin Inner -->
|
||||
<div class="dark-wrapper">
|
||||
<div class="inner">
|
||||
<div class="box-wrapper">
|
||||
<div class="one-third box"> <i class="icon-thumbs-up special"></i>
|
||||
<h3>Stupidly Simple</h3>
|
||||
<p>Picos makes creating and maintaining a website as simple as editing text files.</p>
|
||||
<div class="box-wrapper">
|
||||
<div class="one-third box"> <i class="icon-thumbs-up special"></i>
|
||||
<h3>Stupidly Simple</h3>
|
||||
<p>Picos makes creating and maintaining a website as simple as editing text files.</p>
|
||||
</div>
|
||||
<div class="one-third box"> <i class="icon-gauge special"></i>
|
||||
<h3>Blazing Fast</h3>
|
||||
<p>Pico is seriously lightweight and doesn't use a database, making it super fast.</p>
|
||||
</div>
|
||||
<div class="one-third box last"> <i class="icon-database special"></i>
|
||||
<h3>No Database</h3>
|
||||
<p>Pico is a "flat file" CMS, meaning no database woes, no MySQL queries, nothing.</p>
|
||||
</div>
|
||||
<div class="clear"></div><br />
|
||||
<div class="one-third box"> <i class="icon-font special"></i>
|
||||
<h3>Markdown Formatting</h3>
|
||||
<p>Edit your website in your favourite text editor using simple Markdown formatting.</p>
|
||||
</div>
|
||||
<div class="one-third box"> <i class="icon-brush special"></i>
|
||||
<h3>Twig Templates</h3>
|
||||
<p>Pico uses the <a href="http://twig.sensiolabs.org/" target="_blank">Twig</a> templating engine, for powerful and flexible themes.</p>
|
||||
</div>
|
||||
<div class="one-third box last"> <i class="icon-flow-branch special"></i>
|
||||
<h3>Open Source</h3>
|
||||
<p>Pico is completely free and open source, released under the MIT license.</p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="one-third box"> <i class="icon-gauge special"></i>
|
||||
<h3>Blazing Fast</h3>
|
||||
<p>Pico is seriously lightweight and doesn't use a database, making it super fast.</p>
|
||||
</div>
|
||||
<div class="one-third box last"> <i class="icon-database special"></i>
|
||||
<h3>No Database</h3>
|
||||
<p>Pico is a "flat file" CMS, meaning no database woes, no MySQL queries, nothing.</p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<br />
|
||||
<div class="one-third box"> <i class="icon-font special"></i>
|
||||
<h3>Markdown Formatting</h3>
|
||||
<p>Edit your website in your favourite text editor using simple Markdown formatting.</p>
|
||||
</div>
|
||||
<div class="one-third box"> <i class="icon-brush special"></i>
|
||||
<h3>Twig Templates</h3>
|
||||
<p>Pico uses the <a href="http://twig.sensiolabs.org/" target="_blank">Twig</a> templating engine, for powerful and flexible themes.</p>
|
||||
</div>
|
||||
<div class="one-third box last"> <i class="icon-flow-branch special"></i>
|
||||
<h3>Open Source</h3>
|
||||
<p>Pico is completely free and open source, released under the MIT license.</p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Inner -->
|
||||
</div>
|
||||
<!-- End Dark Wrapper -->
|
||||
</div>
|
||||
|
|
|
|||
164
plugins.html
164
plugins.html
|
|
@ -3,88 +3,86 @@ layout: default
|
|||
title: Plugins
|
||||
---
|
||||
|
||||
<!-- Begin Light Wrapper -->
|
||||
<div class="light-wrapper">
|
||||
|
||||
<!-- Begin Inner -->
|
||||
<div class="light-wrapper">
|
||||
<div class="inner">
|
||||
<h1 class="aligncenter">Pico Plugins</h1>
|
||||
<p class="description aligncenter">Below are some plugins which extend the functionality of Pico and make it even more awesome.<br />
|
||||
Want to make a plugin? See <a href="docs.html#plugins">the docs</a>.
|
||||
</p>
|
||||
<br />
|
||||
<div class="one-third">
|
||||
<h3>RSS Feed</h3>
|
||||
<p>Provides an RSS Feed for Pico. It will only include content with a "Date" field.</p>
|
||||
<p><a href="https://github.com/gilbitron/Pico-RSS-Plugin" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Draftin</h3>
|
||||
<p>This is a Pico plugin that integrates <a href="http://draftin.com" target="_blank">Draft</a> into Pico.
|
||||
You can see a tutorial on how to use it on <a href="http://www.codeforest.net/pico-cms-and-draft" target="_blank">Codeforest</a>.</p>
|
||||
<p><a href="https://github.com/codeforest/pico_draft" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Editor</h3>
|
||||
<p>Provides an online Markdown editor and file manager for Pico.</p>
|
||||
<p><a href="https://github.com/gilbitron/Pico-Editor-Plugin" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<br />
|
||||
<div class="one-third">
|
||||
<h3>Pagination</h3>
|
||||
<p>Provides basic pagination for Pico.</p>
|
||||
<p><a href="https://github.com/rewdy/Pico-Pagination" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Slider</h3>
|
||||
<p>Create sliders (image lists) inside Pico.</p>
|
||||
<p><a href="https://github.com/james2doyle/pico_slider" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Sitemap</h3>
|
||||
<p>Pico plugin to generate an XML sitemap.</p>
|
||||
<p><a href="https://github.com/Techn0tic/Pico_Sitemap" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<br />
|
||||
<div class="one-third">
|
||||
<h3>Get Files By Name</h3>
|
||||
<p>A Pico plugin to grab content by the filename.</p>
|
||||
<p><a href="https://github.com/james2doyle/pico_get_by_filename" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Advanced Meta</h3>
|
||||
<p>A simple plugin to customize page meta.</p>
|
||||
<p><a href="https://github.com/shawnsandy/adv-meta" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Private</h3>
|
||||
<p>Provide authentication to keep your site private.</p>
|
||||
<p><a href="https://github.com/jbleuzen/Pico-Private" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<br />
|
||||
<div class="one-third">
|
||||
<h3>OpenGraph</h3>
|
||||
<p>Adds OpenGraph to your Pico site.</p>
|
||||
<p><a href="https://github.com/ahmet2106/pico-opengraph" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Navigation</h3>
|
||||
<p>Generates a better navigation for Pico.</p>
|
||||
<p><a href="https://github.com/ahmet2106/pico-navigation" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Tags</h3>
|
||||
<p>Provides tags functionality for Pico.</p>
|
||||
<p><a href="https://github.com/szymonkaliski/Pico-Tags-Plugin" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<br />
|
||||
<p class="aligncenter">Have you created a plugin for Pico?
|
||||
<a href="https://github.com/gilbitron/Pico/wiki/Pico-Plugins">Add it to the wiki</a> and we'll put it up here.</p>
|
||||
<h1 class="aligncenter">Pico Plugins</h1>
|
||||
<p class="description aligncenter">
|
||||
Below are some plugins which extend the functionality of Pico and make it even more awesome.<br />
|
||||
Want to make a plugin? See <a href="docs.html#plugins">the docs</a>.
|
||||
</p><br />
|
||||
|
||||
<div class="one-third">
|
||||
<h3>RSS Feed</h3>
|
||||
<p>Provides an RSS Feed for Pico. It will only include content with a "Date" field.</p>
|
||||
<p><a href="https://github.com/gilbitron/Pico-RSS-Plugin" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Draftin</h3>
|
||||
<p>
|
||||
This is a Pico plugin that integrates <a href="http://draftin.com" target="_blank">Draft</a> into Pico.
|
||||
You can see a tutorial on how to use it on <a href="http://www.codeforest.net/pico-cms-and-draft" target="_blank">Codeforest</a>.
|
||||
</p>
|
||||
<p><a href="https://github.com/codeforest/pico_draft" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Editor</h3>
|
||||
<p>Provides an online Markdown editor and file manager for Pico.</p>
|
||||
<p><a href="https://github.com/gilbitron/Pico-Editor-Plugin" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div><br />
|
||||
|
||||
<div class="one-third">
|
||||
<h3>Pagination</h3>
|
||||
<p>Provides basic pagination for Pico.</p>
|
||||
<p><a href="https://github.com/rewdy/Pico-Pagination" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Slider</h3>
|
||||
<p>Create sliders (image lists) inside Pico.</p>
|
||||
<p><a href="https://github.com/james2doyle/pico_slider" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Sitemap</h3>
|
||||
<p>Pico plugin to generate an XML sitemap.</p>
|
||||
<p><a href="https://github.com/Techn0tic/Pico_Sitemap" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div><br />
|
||||
|
||||
<div class="one-third">
|
||||
<h3>Get Files By Name</h3>
|
||||
<p>A Pico plugin to grab content by the filename.</p>
|
||||
<p><a href="https://github.com/james2doyle/pico_get_by_filename" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Advanced Meta</h3>
|
||||
<p>A simple plugin to customize page meta.</p>
|
||||
<p><a href="https://github.com/shawnsandy/adv-meta" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Private</h3>
|
||||
<p>Provide authentication to keep your site private.</p>
|
||||
<p><a href="https://github.com/jbleuzen/Pico-Private" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div><br />
|
||||
|
||||
<div class="one-third">
|
||||
<h3>OpenGraph</h3>
|
||||
<p>Adds OpenGraph to your Pico site.</p>
|
||||
<p><a href="https://github.com/ahmet2106/pico-opengraph" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third">
|
||||
<h3>Navigation</h3>
|
||||
<p>Generates a better navigation for Pico.</p>
|
||||
<p><a href="https://github.com/ahmet2106/pico-navigation" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="one-third last">
|
||||
<h3>Tags</h3>
|
||||
<p>Provides tags functionality for Pico.</p>
|
||||
<p><a href="https://github.com/szymonkaliski/Pico-Tags-Plugin" class="button red">Download</a></p>
|
||||
</div>
|
||||
<div class="clear"></div><br />
|
||||
|
||||
<p class="aligncenter">Have you created a plugin for Pico?
|
||||
<a href="https://github.com/gilbitron/Pico/wiki/Pico-Plugins">Add it to the wiki</a> and we'll put it up here.</p>
|
||||
</div>
|
||||
<!-- End Inner -->
|
||||
</div>
|
||||
<!-- End Light Wrapper -->
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue