How To Blog

Disclaimer

The following instructions are assuming you are using the default Phile installation (Twig Templates and the Markdown parser).

Setup

Please see the blog demo theme.

Organizing Content

IMPORTANT: Here is the typical way that content files work in Phile:

Path	URL
content/index.md	/
content/sub.md	/sub
content/sub/index.md	/sub (same as above)
content/sub/page.md	/sub/page
content/a/very/long/url.md	/a/very/long/url

Here are some typical blogging style URL structures. You can re-create URL styles with folder structure:

Path	URL
content/posts/article.md	/posts/article
content/2013/11/10/post-name.md	/2013/11/10/post-name
content/category/dogs/about-huskies.md	/category/dogs/about-huskies
content/tags/cats/about-long-hairs.md	/tags/cats/about-long-hairs

Using Images

Images just need the path to where they exists. So this path:

Phile/content/images/picture.jpg

Becomes:

{{ base_url }}/content/images/picture.jpg

Or if there was an image in the theme:

{{ theme_url }}/images/theme-logo.png

Splitting Content

There are a couple ways to split content. The reasons you might want to do that is for things like sidebars, widgets, accordions, tabbed panes, column content, etc.

Here is a demo of how to split content without plugins:

### Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<hr>

### Section 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Now in your HTML you can split at that <hr> tag:

<div class="column-1">
  {{ content|split('<hr>')[0] }}
</div>
<div class="column-2">
  {{ content|split('<hr>')[1] }}
</div>

The <hr> tag is not the special thing here. The split filter in Twig is the special function. You can use any tag or made-up tag (how about <split>?) to do this.

This can even be done across different partials or be conditial based on some meta tag.

JavaScript Constants

Here is a trick to get access to Phile variables in your javascript.

<head>
  <!-- a bunch of stuff here -->
  <script type="text/javascript">
  // bind a phile object to the window
  window.Phile = {
    const: {
      root_dir: '{{ constant('ROOT_DIR') }}',
      content_dir: '{{ constant('CONTENT_DIR') }}',
      content_ext: '{{ constant('CONTENT_EXT') }}',
      lib_dir: '{{ constant('LIB_DIR') }}',
      plugins_dir: '{{ constant('PLUGINS_DIR') }}',
      themes_dir: '{{ constant('THEMES_DIR') }}',
      cache_dir: '{{ constant('CACHE_DIR') }}'
    },
    base_url: '{{ base_url }}',
    theme_url: '{{ theme_url }}',
    config: JSON.parse('{{ config|json_encode() }}') // encode the config array to a string and then parse that string
  };
  </script>
</head>

Now you can access window.Phile and see some of the settings and constants.

Ajax Demo

Here is a simple demo of using the above settings to make an ajax call (using jQuery) to some other content:

$.get(Phile.base_url + '/sub/page', function(data) {
  // print out the HTML for parsed sub/page file
  console.log(data);
});

Edit the source page on github…

Table of Contents