Graham: This example is based on a folder called Blog The

Home » Bootstrap » Bootstrap discussion » Non xtblog blog » View post

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="&lt;a class=&quot;list-group-item &quot; href=&quot;.file_url.&quot;&gt;.file_name_base_parsed.&lt;span class=&quot;text-muted&quot;&gt;&nbsp;&lt;xt:include file=&quot;/Blog/posts/.file_name..txt&quot;&gt;&lt;/span&gt;&lt;/a&gt;" 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>

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>

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 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 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 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>

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>

# Reply

Posted 17-04-12 01:21 (Edited 17-04-16 23:31 by Graham )

Home » Bootstrap » Bootstrap discussion » Non xtblog blog » View post

Online: Guests: 1

Right panel

***************

Right panel