Creating a Blog like in the Default Content
From MODx Wiki
This is a work in progress.
There are many ways of creating a blog in MODx. This article dissects the way that it is done in the Default Content.
Based on MODx 0.9.5 RC2; some information may change.
Contents |
Required Snippets
Code used
For reference, here is the code used in pages and chunks along with the three snippets and MODx to create the blog solution.
Blog Page
Page ID is 2. If your page ID is different, you will need to change the number in &startID=`2`. Content:
[[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`FormBlogComments` &tpl=`nl_blog` &paginate=`1` &alwaysshow=`1`]] Showing [+start+] - [+stop+] of [+total+] Articles [+previous+] [+pages+] [+next+]
That's a snippet call followed by some text including some placeholders that are set by Ditto.
Blog Posts
These are child documents of Blog. There is nothing special about the page. The only fields used are Title, Long Title and content.
Add A Blog Entry Page
This happens to be a child of Blog.
[!NewsPublisher? &folder=`2` &canpost=`Site Admins` &formtpl=`FormBlog` &footertpl=`FormBlogComments` &makefolder=`1` &rtcontent=`tvblogContent`!]
The only special thing about this page is the Access permissions. It is not available to "All Document Groups (Public)", the only group checked is "Site Admin Pages". Basically, this should only be available to authorised users.
nl_blog Chunk
This is referenced in the Ditto call by &tpl=`nl_blog`, and is the main formatting of the Blog summary.
Oh, due to this Wiki's spam filter, you must change nune to none.
<div class="nl_summaryPost"> <h3><a href="[~[+id+]~]" title="[+title+]">[+title+]</a></h3> <div class="nl_info" >By <strong>[+author+]</strong> on [+date+]. <a href="[~[+id+]~]#commentsAnchor">Comments ([!Jot?&docid=`[+id+]`&action=`count-comments`!])</a></div> [+summary+] <div id="nl_comments_[+id+]" style="display: nune;"> [[Jot?&docid=`[+id+]`&action=`comments`]] </div> <p class="nl_link">[+link+]</p> </div>
FormBlogComments chunk
This formats the Comment entry form. This is referenced in the Ditto call by &commentschunk=`FormBlogComments`, and in the NewsPublisher call by &footertpl=`FormBlogComments`. NewsPublisher adds it to the document content; Ditto removes it from the content (I think). Now, why does this reference UserComments???
<a name="comments"></a> <p style="margin-top: 1em;font-weight:bold">Enter your comments in the space below (registered site users only):</p> [!UserComments? &canpost=`Registered Users, Site Admins` &makefolder=`0` &postcss=`comment` &titlecss=`commentTitle` &numbercss=`commentNum` &altrowcss=`commentAlt` &authorcss=`commentAuthor` &ownercss=`commentMe` &sortorder=`0`!]
Comments chunk
This is used by Jot, probably.
<div id="commentsAnchor"> [!Jot? &customfields=`name,email` &subscribe=`1` &pagination=`4` &badwords=`dotNet` &canmoderate=`Site Admins` !] </div>
FormBlog chunk
This is used by NewsPublisher and is the form for entering blog posts.
<form name="NewsPublisher" method="post" action="[~[*id*]~]">
<fieldset>
<h3>Publishing Details</h3>
<p>Note: Leaving the Publish Date empty will immediately publish your blog entry.</p>
<input name="NewsPublisherForm" type="hidden" value="on" />
<label for="pagetitle">Page title <abbr title="The title used on the browser window">?</abbr>: <input name="pagetitle" id="pagetitle" type="text" size="40" value="[+pagetitle+]" /></label>
<label for="longtitle">Headline <abbr title="The title used on the article">?</abbr>: <input name="longtitle" id="longtitle" type="text" size="40" value="[+longtitle+]" /></label>
<label for="pub_date">Published date: <input name="pub_date" id="pub_date" type="text" value="[+pub_date+]" size="40" readonly="readonly" />
<a onclick="nwpub_cal1.popup();" onmouseover="window.status='Select date'; return true;" onmouseout="window.status=''; return true;"><img src="manager/media/images/icons/cal.gif" width="16" height="16" alt="Select date" /></a>
<a onclick="document.NewsPublisher.pub_date.value=''; return true;" onmouseover="window.status='Remove date'; return true;" onmouseout="window.status=''; return true;"><img src="manager/media/images/icons/cal_nodate.gif" width="16" height="16" alt="Remove date"></a></label>
</fieldset>
<fieldset>
<h3>The Content</h3>
<p>The Summary field is optional, but is used as a short version for RSS feeds and summary views on the main blog page.</p>
<label for="introtext">Summary (optional, but encouraged):<textarea name="introtext" cols="50" rows="5">[+introtext+]</textarea></label>
<label for="content">Content:[*blogContent*]</label>
</fieldset>
<fieldset>
<h3>You're Done</h3>
<label>Now... wasn't that easy?</label>
<input name="send" type="submit" value="Blog it!" class="button" />
</fieldset>
</form>
<script language="JavaScript" src="manager/media/script/datefunctions.js"></script>
<script type="text/javascript">
var elm_txt = {}; // dummy
var pub = document.forms["NewsPublisher"].elements["pub_date"];
var nwpub_cal1 = new calendar1(pub,elm_txt);
//nwpub_cal1.path="manager/media/";
// If you want the calendar to work from the front-end you need to add a leading slash.
nwpub_cal1.path="/manager/media/";
nwpub_cal1.year_scroll = true;
nwpub_cal1.time_comp = true;
</script>
CSS
In /assets/templates/modxhost/modx.css :
.comment {
background-color: #fff;
border-bottom: 1px solid #ddd;
position: relative;
padding: 10px;
overflow: hidden;
}
.commentAlt {
background-color: #f4f4f4;
}
.commentAuthor {
background-color: #ffc;
}
.commentMe {
background-color: #ccf !important;
padding-top: 5px;
}
.commentNum {
font-family: Arial, sans-serif;
font-size: 50px;
line-height: 30px;
position: absolute;
top: 0;
right: 0;
color: #f2f2f2;
font-weight: bold;
letter-spacing: -4px;
z-index: 1;
}
.commentAlt .commentNum {
color: #eaeaea;
}
.commentMe .commentNum {
color: #b0b0ff;
}
.commentAuthor .commentNum {
color: #f3f3bb;
}
.commentTitle {
position: relative;
z-index: 10;
color: #999;
}
.commentTitle span {
text-transform: uppercase;
font-size: 86%;
}
.commentTitle strong {
color: #693;
font-size: 110%;
text-transform: none;
font-weight: normal;
margin-right: 6px;
}
.comment .content {
position: relative;
z-index: 10;
}
.nl_summaryPost h3 {
border-bottom: 1px solid #CCCCCC;
margin: 0px !important;
padding: 5px !important;
color: black;
}
.nl_summaryPost .nl_info {
background-color: #F8F8F8;
padding: 5px !important;
font-size: 0.8em;
color: black;
}
.nl_link {
font-size: 76%;
text-align: right;
}
.nl_paging {
border-top: 1px solid #ccc;
padding: 10px;
font-size: 86%;
color: #618100;
}
#nl_pages #nl_currentpage {
border: 1px solid #618100;
padding: 1px 5px 2px;
margin-right: 1px;
background-color: #9c0;
color: #fff;
}
#nl_pages .nl_off {
border: 1px solid #ccc;
padding: 1px 5px 2px;
margin-right: 1px;
color: #ccc;
}
#nl_pages a, #nl_pages a:link, #nl_pages a:visited {
border: 1px solid #9c0;
padding: 1px 5px 2px;
margin-right: 1px;
text-decoration: none !important;
color: #618100;
}
#nl_pages a:hover {
background-color: #fff;
color: #000;
}
#nl_archivelist ul {
list-style-type: none;
margin-left: 15px;
padding-left: 0;
}
#nl_archivelist ul ul{
list-style-type: square;
margin-left: 35px;
}
#nl_archivelist .nl_month {
font-weight: bold;
}
