html5 - Generate pages on the basis of links with jekyll -
i'm newbie jekyll , maybe have find alternative ways. achieve following goal:
- i want avoid having code replaced in everywhere (for layout). have generate page on basis of previous link.
so, have following architecture.
x.html here have link bigcomponent.html
<article> <div id="{{entry.id}}" class="panel panel-primary"> <div class="panel-heading clearfix"> <div class="pull-left"> {{ entry.title }} </div> <div class="pull-right"> <span class="label label-success">{{entry.projects}}</span> </div> <div class="pull-right" style="padding-right: 7px;"> <span class="label label-success status" >{{entry.status}}</span> </div> </p> </div><!-- panel-heading closed --> <div class="panel-body"> <div class="container-fluidrm"> {% if entry.picture %} <img src="{{entry.picture}}" class="img-responsive img-rounded" > {% else %} no-picture {% endif %} </div> </div><!-- panel-body closed --> <div class="panel-footer" style="height:120px;"> <div class="row"> <div class="col-md-9"> <p>description: {{entry.description}}</p> </div> <div class="col-md-1"> <a href="bigcomponent.html"><span id= "logos" class="material-icons"></span></a> </div> <div class="col-md-1" style="margin-left:7px;" > <span id= "logos" class="glyphicon glyphicon-star"></span> </div> </div> </div><!-- panel-footer closed --> </div><!-- panel closed --> </article>
bigcomponent.html here use parameter include right content in layout.
{% include bigcomponents/{{include.param}}/description.html %} <!doctype html> <html class="full"> {% include head.html %} <body class="full"> <div class="container-fluid" id="componentscontainer"> <div class="col-md-9"> <div class="panel panel-primary" id ="panelcomponentlarge"> <div class="panel-heading " >{{page.title}} </div> <div class="panel-body"> {% include bigcomponents/{{include.param}}/code.html %} </div> <div class="panel-footer"> <div class="row"> <!-- highlight --> <div class="col-md-9"> html: {% highlight html linenos%} {% include bigcomponents/{{include.param}}/code.html %} {% endhighlight %} </div> <!-- end hightlight --> <div class="col-md-3"> change log </div> </div><!--row--> <div class="row"> <div class="col-md-9"> <div class="col-md-1 col-md-offset-10"> <span id= "logos" style="font-size: 50px; vertical-align: middle;" class="material-icons"></span> </div> <div class="col-md-1"> <span id= "logos" style="font-size: 44px; vertical-align: middle; margin-right: 2px;" class="material-icons"></span> </div> </div> </div> </div> </div> <!--panel--> </div> <!--column--> <div class="col-md-3" id="relatedcomponents"> <div class="container-fluid"> <p> second </p> <div class="row"> {% assign fullcomponents = site.components %} {% entry in fullcomponents %} <div class="col-md-12"> {% include componentfirst.html %} </div> {% endfor %} </div> </div> </div> </div> </body> </html>
i'm sure there smart way done.
Comments
Post a Comment