De:Tutorials BlogAdvanced1
From MODx Wiki
Es gibt viele Wege mit MODx ein Blog zu erstellen. Dieser Artikel zeigt einen Weg wie es mit Inhaltsseiten gemacht werden kann. (Basiert auf MODx 0.9.5 RC2)
Contents |
Benötigte Snippets
Benutzter Code
Als Beispiel der Code der in Dokumenten und Chunks zusammen mit den 3 Snippets benutzt wird.
Blog-Seite
Seiten-ID ist im Beispiel 2. Falls dein Blog-Ordner eine andere ID hat bitte in &startID=`2` anpassen.
im Dokument:
[[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`FormBlogComments` &tpl=`nl_blog` &paginate=`1` &alwaysshow=`1`]] zeige [+start+] - [+stop+] von [+total+] Artikeln [+previous+] [+pages+] [+next+]
Ein Snippet-Aufruf und danach etwas Text mit Ditto-Platzhaltern.
Blog-Einträge
Beiträge sind dem Blog-Ordner untergeordnete Dokumente. In diesen Dokumenten gibt es keinerlei Besonderheiten, es werden einfach die Felder Titel, langer Titel und Inhalt befüllt.
Blogeinträge schreiben
Seiten-ID ist im Beispiel 2. Falls dein Blog-Ordner eine andere ID hat bitte in &folder=`2` anpassen.
Die einzelnen Beiträge werden zu untergeordeten Dokumenten im Blog-Ordner.
[!NewsPublisher? &folder=`2` &canpost=`Site Admins` &formtpl=`FormBlog` &footertpl=`FormBlogComments` &makefolder=`1` &rtcontent=`tvblogContent`!]
Durch den Wert Site Admins können nur authorisierte Benutzer Beiträge schreiben.
Chunk für Formatierung der Ausgabe
Wird durch den Ditto-Aufruf &tpl=`nl_blog` benutzt und gibt die Formatierung der Artikel-Zusammenfassung vor.
wichtige Anmerkung: wegen eines Wortfilters, der hier benutzt wird, steht im folgenden Beispiel nune statt dem nötigen none.
<div class="nl_summaryPost"> <h3><a href="[~[+id+]~]" title="[+title+]">[+title+]</a></h3> <div class="nl_info" >von <strong>[+author+]</strong> am [+date+]. <a href="[~[+id+]~]#commentsAnchor">Kommentare ([!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>
Chunk für Formatierung der Kommentar-Eingabe
Wird durch den Ditto-Aufruf &commentschunk=`FormBlogComments` benutzt, und im NewsPublisher-Aufruf durch &footertpl=`FormBlogComments`.
.
.
.
.
. weiter übersetzen
.
.
.
.
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/";
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;
}
