This example is based on a folder called
Blog
The codes given are
Complete pages and must be copied to
blank plain-text files
The resulting pages are safe to open and edit or add content using the building tool
Post List
This is the
post list page
In the
Blog folder create a
index file and copy this code to that file
this code includes a
xt:script xt:filelist to display the posts with a
xt:include in the filelist template to display the descriptions
and a
javascript to convert the file list pagination to
bootstrap markup
Plus a blank bootstrap panel for any custom content
The resulting page is safe to open and edit or add content using the building tool
After you have created the file open it with the building tool and set your own title and meta description from the building tool page options
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title> Bootstrap template </title>
</head>
<body>
<div data-xtcontainer="container" class="container-fluid">
<div data-xtcontainer="row" class="row">
<div data-xtcontainer="col sm 6 (Posts)" class="col-sm-6">
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="post-list-heading" class="panel-heading">
<xt:code><h4>Post list panel</h4></xt:code>
</div>
<div data-xtcontainer="post-list-body" class="list-group">
<xt:code><!--parser:xtscript-->
var $list= <xt:filelist sort_type="updated" sort_dir="desc" folder="/Blog/posts" template="<a class="list-group-item " href=".file_url.">.file_name_base_parsed.<span class="text-muted"> <xt:include file="/Blog/posts/.file_name..txt"></span></a>" per_page="5" filter="-*.txt" />
print $list
<!--/parser:xtscript-->
</xt:code>
<xt:code>
<script>
// Convert pagination to Bootstrap
var paging=document.getElementsByClassName('filelist_paging');
for (i=0;i < paging.length;i++){
paging[i].className+=' list-group-item';
var inner=paging[i].innerHTML;
paging[i].innerHTML='';
inner=inner.replace(/span\>\.\.\.\<\/span/g, 'li\>\<a\>...\</a\>\</li').replace(/\<span/g, '\<li class=\"active\"\>\<a').replace(/\/span/g, '/a\>\</li').replace(/\<a /g, '\<li\>\<a ').replace(/\/a\>/g, '/a\>\</li\>');
var bs_pagination = document.createElement('ul');
bs_pagination.style='margin:0 !important;';
bs_pagination.className='pagination pagination-sm';
bs_pagination.innerHTML=inner;
paging[i].append(bs_pagination);}
</script>
</xt:code>
</div>
<div data-xtcontainer="post-list-footer" class="panel-footer"><xt:text>Post list footer</xt:text></div>
</div>
</div>
<div data-xtcontainer="col sm 6 (Right)" class="col-sm-6">
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="panel-heading" class="panel-heading"><xt:text><h4>Right panel</h4></xt:text></div>
<div data-xtcontainer="panel-body" class="panel-body"><xt:code></xt:code></div>
<div data-xtcontainer="panel-footer" class="panel-footer"><xt:text>Right panel</xt:text></div>
</div>
</div>
</div>
</div>
</body>
</html>
Copy code
Post Templates
In the main filebrowser create a folder called
file_presets
This folder is used to contain template files that you can create copies in any folder using the
create new file option at the bottom of any folder
In that folder create a file named
blog post
Copy this code to that file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title> Bootstrap template </title>
<xt:include file="/Blog/includes/head_data" />
</head>
<body>
<div data-xtcontainer="outer container" class="container-fluid">
<xt:code><div class="row"></xt:code>
<div data-xtcontainer="post" class="col-sm-6">
<div data-xtcontainer="content" class="panel-group">
<xt:include file="/Blog/includes/post_top" />
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="post-heading" class="panel-heading"><xt:code><h4>Post heading</h4></xt:code></div>
<div data-xtcontainer="post-body" class="panel-body"><xt:code>Post content goes here<br />Remember to set the title and description from the building tool page options</xt:code></div>
<div data-xtcontainer="post-footer" class="panel-footer"><xt:code>Post footer</xt:code></div>
</div>
<xt:include file="/Blog/includes/post_bottom" />
</div>
</div>
<div data-xtcontainer="comments" class="col-sm-6">
<xt:include file="/Blog/includes/comments_panel" />
</div>
<xt:code></div> </xt:code>
</div>
</body>
</html>
Copy code
This page template is used to create the actual post pages in the
/Blog/posts folder (you just select 'blog post' from the 'new file' options)
it has xt:include functions to add the common head data heading and footer files plus the comments panel
your post content goes in the
post body container and can use anything you can use on a standard xtgem page
After you have created the file open it with the building tool and set your own title and meta description from the building tool page options
Description Template
You can also create a description file for the post
In
file_presets create a file named
blog post description
copy this code to that file
When creating the description file you MUST give it a .txt extension
The resulting page is safe to open and edit or add content using the building tool
This file holds the description of the post that appears in the post list
xt:functions xt:widgets and xtscript will not work in the description file only normal html css javascript etc
The file is 'included' into the post list entry for the page
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex,nofollow" />
<title> head area is ignored </title>
</head>
<body><br />
<xt:code></xt:code>
</body>
</html>
Copy code
In the
Blog folder create folders named
includes and
posts
in the
includes folder create these files
head_data
This file holds any data to be included in the
<head> area of all the posts
NOTE: _headtags still applies and can override this file
<style>
.hupso_facebook{margin-left:0 !important}
#blog-post img {max-width:100%}
</style>
Copy code
post_top
This file holds the content that appears above the blog post
The resulting page is safe to open and edit or add content using the building tool
<html>
<head>
<meta name="robots" content="noindex,nofollow">
<title> head area is ignored</title>
</head>
<body>
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="panel-body" class="panel-body"><xt:text> Post Panel Top </xt:text></div>
<div data-xtcontainer="panel footer" class="panel-footer">
<a href="/Blog/" class="btn btn-default btn-xs">Back to posts</a>
</div>
</div>
</body>
</html>
Copy code
post_bottom
This file holds the content that appears below the blog post
it currently holds code to produce hupso share buttons
and the 'back to posts' button
The resulting page is safe to open and edit or add content using the building tool
<html>
<head>
<meta name="robots" content="noindex,nofollow" />
<title> head area is ignored </title>
</head>
<body>
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="panel-body" class="panel-body"><xt:code>
<!-- Hupso Share Buttons - http://www.hupso.com/share/ -->
<div class="hupso-share-buttons clearfix">
<a class="hupso_counters" href="http://www.hupso.com/share/"><img src="//static.hupso.com/share/buttons/dot.png" style="border:0px; padding-top:2px; float:left;" alt="Share Button"/></a>
<script type="text/javascript">var hupso_services_c=new Array("facebook_like","facebook_send","twitter");var hupso_counters_lang = "en_US";</script>
<script type="text/javascript" src="//static.hupso.com/share/js/counters.js"></script>
<a class="hupso_toolbar" href="http://www.hupso.com/share/"><img src="//static.hupso.com/share/buttons/dot.png" style="border:0px; padding-top:5px; float:left;" alt="Share Button"/></a>
<script type="text/javascript">var hupso_services_t=new Array("Google Plus","Tumblr","Reddit","Pinterest","Bebo","Linkedin","StumbleUpon","Email");var hupso_toolbar_size_t="medium";</script>
<script type="text/javascript" src="//static.hupso.com/share/js/share_toolbar.js"></script>
</div><!-- Hupso Share Buttons --></xt:code>
</div>
<div data-xtcontainer="panel-body" class="panel-footer">
<a href="/Blog/" class="btn btn-default btn-sm">Back to posts</a>
</div>
</div>
</body>
</html>
Copy code
comments_panel
For the comments I am using
http://htmlcommentbox.com
I have included the 'translation/custom labels' code but you must add the actual comment box code yourself from their page
This is due to it containing a hash to identify the comment box owner
The resulting page is safe to open and edit or add content using the building tool
<html>
<head>
<meta name="robots" content="noindex,nofollow">
<title> head area is ignored </title>
</head>
<body>
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="panel-heading" class="panel-heading"><xt:text><h4>Comment Panel</h4></xt:text></div>
<div data-xtcontainer="panel-body" class="panel-body">
<xt:code><!-- customize labels of htmlcommentbox.com -->
<script>
// This code goes ABOVE the main HTML Comment Box code!
// replace the text in the single quotes below to customize labels.
hcb_user = {
// L10N
comments_header : 'Comments',
name_label : 'Name',
content_label: 'Enter your comment here',
submit : 'Comment',
logout_link : '<img title="log out" src="//www.htmlcommentbox.com/static/images/door_out.png" alt="[logout]" class="hcb-icon"/>',
admin_link : '<img src="//www.htmlcommentbox.com/static/images/door_in.png" alt="[login]" class="hcb-icon"/>',
no_comments_msg: 'No one has commented yet. Be the first!',
add:'Add your comment',
again: 'Post another comment',
rss:'<img src="//www.htmlcommentbox.com/static/images/feed.png" class="hcb-icon" alt="rss"/> ',
said:'said:',
prev_page:'<img src="//www.htmlcommentbox.com/static/images/arrow_left.png" class="hcb-icon" title="previous page" alt="[prev]"/>',
next_page:'<img src="//www.htmlcommentbox.com/static/images/arrow_right.png" class="hcb-icon" title="next page" alt="[next]"/>',
showing:'Showing',
to:'to',
website_label:'website (optional)',
email_label:'email',
anonymous:'Anonymous',
mod_label:'(mod)',
subscribe:'email me replies',
are_you_sure:'Do you want to flag this comment as inappropriate?',
reply:'<img src="//www.htmlcommentbox.com/static/images/reply.png"/> reply',
flag:'<img src="//www.htmlcommentbox.com/static/images/flag.png"/> flag',
like:'<img src="//www.htmlcommentbox.com/static/images/like.png"/> like',
//dates
days_ago:'days ago',
hours_ago:'hours ago',
minutes_ago:'minutes ago',
within_the_last_minute:'within the last minute',
msg_thankyou:'Thank you for commenting!',
msg_approval:'(this comment is not published until approved)',
msg_approval_required:'Thank you for commenting! Your comment will appear once approved by a moderator.',
err_bad_html:'Your comment contained bad html.',
err_bad_email:'Please enter a valid email address.',
err_too_frequent:'You must wait a few seconds between posting comments.',
err_comment_empty:'Your comment was not posted because it was empty!',
err_denied:'Your comment was not accepted.',
//SETTINGS
MAX_CHARS: 8192,
PAGE:'', // ID of the webpage to show comments for. defaults to the webpage the user is currently visiting.
RELATIVE_DATES:true // show dates in the form "X hours ago." etc.
};
</script>
<!-- done customizing labels of htmlcommentbox.com -->
</xt:code>
<xt:code>
*** You must replace this with the code from htmlcommentbox.com yourself as it contains codes to identify the owner of the comment box ***
<!-- begin wwww.htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">Widget</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&opts=18&num=10&ts=1492344467306");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
</xt:code></div>
<div data-xtcontainer="panel-footer" class="panel-footer"><xt:text>Comments panel footer</xt:text></div>
</div>
</body>
</html>
Copy code
Login
Post reply
Graham