title: Generate pages on the basis of links with jekyll
body: <p>I'm newbie with Jekyll and maybe I have to find alternative ways.
  I would like to achieve the following goal:</p>
  
  <ul>
  <li>I want to avoid having my code replaced in everywhere (for the layout).  I have to generate a page on the basis of the previous link. </li>
  </ul>
  
  <p>So, I have the following architecture.</p>
  
  <p>x.html
  Here I have the link to bigcomponent.html </p>
  
  <pre><code>&lt;article&gt;
      &lt;div id="{{entry.id}}" class="panel panel-primary"&gt;
          &lt;div class="panel-heading clearfix"&gt;
              &lt;div class="pull-left"&gt;
                  {{ entry.title }}
              &lt;/div&gt;
              &lt;div class="pull-right"&gt;
                  &lt;span class="label label-success"&gt;{{entry.projects}}&lt;/span&gt;
  
              &lt;/div&gt;
  
              &lt;div class="pull-right" style="padding-right: 7px;"&gt;
  
  &lt;span class="label label-success status" &gt;{{entry.status}}&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;/p&gt;
          &lt;/div&gt;&lt;!-- panel-heading closed --&gt;
          &lt;div class="panel-body"&gt; 
              &lt;div class="container-fluidrm"&gt;
               {% if entry.picture %} &lt;img src="{{entry.picture}}" class="img-responsive img-rounded" &gt; {% else %} No-picture {% endif %}
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- panel-body closed --&gt;
          &lt;div class="panel-footer" style="height:120px;"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-9"&gt;
  
                      &lt;p&gt;Description: {{entry.description}}&lt;/p&gt;
  
  
                  &lt;/div&gt;
  
                  &lt;div class="col-md-1"&gt;
                      &lt;a href="bigcomponent.html"&gt;&lt;span id= "logos" class="material-icons"&gt;&amp;#xE85B;&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-1" style="margin-left:7px;" &gt;
                      &lt;span id= "logos" class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- panel-footer closed --&gt;
  
  
      &lt;/div&gt;&lt;!-- panel closed --&gt;
  
  &lt;/article&gt;
  </code></pre>
  
  <p>bigcomponent.html
  Here I would like to use a parameter to include the right content in my layout.</p>
  
  <pre><code>{% include bigcomponents/{{include.param}}/description.html %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html class="full"&gt;
  {% include head.html %}
  
      &lt;body class="full"&gt;
          &lt;div class="container-fluid" id="componentscontainer"&gt;
  
                  &lt;div class="col-md-9"&gt;                  
                      &lt;div class="panel panel-primary" id ="panelcomponentlarge"&gt;
                          &lt;div class="panel-heading " &gt;{{page.title}}
  
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
  
                                      {% include bigcomponents/{{include.param}}/code.html %}
  
                          &lt;/div&gt;
                          &lt;div class="panel-footer"&gt;
                              &lt;div class="row"&gt;
                                  &lt;!-- highlight --&gt;
                                  &lt;div class="col-md-9"&gt;
  
                                      HTML:
  
                                      {% highlight html linenos%}
                                          {% include bigcomponents/{{include.param}}/code.html %}
                                      {% endhighlight %}
  
                                  &lt;/div&gt;
                                  &lt;!-- end hightlight --&gt;
                                  &lt;div class="col-md-3"&gt;
                                      Change Log
                                  &lt;/div&gt;
                              &lt;/div&gt;&lt;!--row--&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-9"&gt;
                                      &lt;div class="col-md-1 col-md-offset-10"&gt;
                                          &lt;span id= "logos" style="font-size: 50px; vertical-align: middle;" class="material-icons"&gt;&amp;#xE906;&lt;/span&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-md-1"&gt;
                                          &lt;span id= "logos" style="font-size: 44px; vertical-align: middle; margin-right: 2px;" class="material-icons"&gt;&amp;#xE838;&lt;/span&gt;
  
                                      &lt;/div&gt;  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt; &lt;!--panel--&gt;
                  &lt;/div&gt; &lt;!--column--&gt;
                  &lt;div class="col-md-3" id="relatedcomponents"&gt;
                      &lt;div class="container-fluid"&gt;
                      &lt;p&gt; Second &lt;/p&gt;
                          &lt;div class="Row"&gt;
                              {% assign fullcomponents = site.components %}
                              {% for entry in fullcomponents %}
                              &lt;div class="col-md-12"&gt;
                                   {% include componentfirst.html %}
                              &lt;/div&gt;
                              {% endfor %}
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm sure that there is a smart way to get it done.</p>