June 26, 2008
Use DekiScript to skin MindTouch Deki
DamienH @ 11:12 am
Until now the only portion of a page that has been editable by the user is the content inside the editor. Logically this makes sense, however, there are times when a user or administrator may want to add additional content to the skinning template*. For instance a user may want to add advertisements, navigations, widgets or some custom html. Such functionality has been available since November, 2007 but was fairly basic. Users could add site-wide content into numerous different custom HTML areas and were limited to HTML and client side scripting languages.
With our latest improvement (8.05.1) users can now designate custom skin content by assigning a page template** to specific skinning regions. This process offers two noticeable benefits. First, custom content can now be injected on a per-page basis. Second, and most importantly, custom content can now utilize DekiScript which means that both server-side and client-side functionality is acceptable. Another extremely useful benefit of using DekiScript for custom skin content is the ability to script per-user functionality.
In order to support skinning template targeting you need to make some minor modifications to your Deki. First you need to define which portions of your Skinning Template can have Deki content injected into them (for security reasons). To do this you need to crack open LocalSettings.php and add the following line:
$wgTargetSkinVars = array('customarea1', 'customarea2', 'customarea3',
'customarea4', 'customarea5');
By adding the $wgTargetSkinVars to LocalSettings.php your simply granting permission for the listed Skinning Variables to be overwritten with injected Deki content. In the above example you can see that I opened up all the custom areas in a skinning template. If you’re using Fiesta these custom areas are the same as the custom HTML areas that are found in Control Panel > Visual Appearance > Custom Site HTML.
Now that you’ve updated LocalSettings.php you can go to your Deki and start injecting content. To start lets first create the content that is going to get injected. Navigate to Tools > Templates and create a new template called ‘PageTemplateName’. Add some generic text such as “MindTouch Deki is awesome”, save and then navigate to your Deki homepage. Now click edit on your Deki homepage and add the following DekiScript:
{{ wiki.template("PageTemplateName", nil, "customarea1") }}
Using the DekiScript above you’ve injected your Page Template into customarea1. Now you can take this example a little further by adding some DekiScript into your Page Template. Navigate back to Tools > Templates > PageTemplateName and click edit. Add some of the following examples:
{{ web.link(user.uri,'Take me to my page') }}
{{ wiki.contributors(nil, 3) }}
{{ feed.list('http://feeds.feedburner.com/mindtouch?format=xml',5) }}
I’ve been experimenting with this new approach a lot recently. In fact I have created two custom templates that take full advantage our new skinning capability. In both cases I was able to easily add powerful functionality to the templates with very little code. As I continue to experiment with new approaches to skinning I’ll be sure to keep everyone up to date.
Thanks
Damien
DamienH[at]mindtouch.com
Interesting, so would it be possible to use this technique to customise the skin based on requesting user agent - ie offer a basic skin if users are accessing using a BlackBerry / PDA? It would sure be useful
Comment by Ross — June 26, 2008 @ 11:47 am
Ross, I wouldn’t recommend using this approach to define different styles fore each medium. Instead I would recommend using CSS. With CSS you can define the media type and write media-specific styles.
Check out the w3 reference to media types: http://www.w3.org/TR/REC-CSS2/media.html
Damien
Comment by Damien Howley — June 26, 2008 @ 12:30 pm
Please post a more magnified screenshot of the page, showing the results of the above code. Thanks!
Comment by Methedras — June 26, 2008 @ 1:13 pm
Methedras, that actually isn’t a screenshot of the demo, it’s just a screenshot of the Fiesta skin. I took a screen shot at attached it to the blog. The demo isn’t very practical(as you’ll see in the screenshot) but serves the purpose of teaching the technique. Please use the following link:
http://www.mindtouch.com/blog/wp-content/uploads/2008/06/fiesta_screenshot_demo.gif
Damien
Comment by Damien Howley — June 26, 2008 @ 1:22 pm
In the earlier documentation I’ve seen on this topic it said to include ‘languages’ and ‘toc’ because they are used internally. Is that no longer necessary?
$wgTargetSkinVars = array(’languages’, ‘toc’, ‘customarea1′, ‘customarea2′, ‘customarea3′, ‘customarea4′, ‘customarea5′, ‘customarea6′);
Comment by jsteeley — June 27, 2008 @ 7:15 am
Jsteeley,
I removed languages and toc for the demonstration. You can actually use any of skinning variables that are in the markup (fiesta.php, ace.php, etc…). However, I do caution to be careful about which areas you open for targeting.
For instance if you add FiestaUserAuth to the array users could overwrite the login/logout area with custom content and essentially eliminate the login/logout functionality.
For a full list of skinning variables check out: http://wiki.developer.mindtouch.com/MindTouch_Deki/Skinning/Base/Skinning/Variables
Also - to contribute to the template targeting documentation please visit: http://wiki.developer.mindtouch.com/MindTouch_Deki/Skinning/Fiesta/Template_Targeting
Thanks
Damien
Comment by Damien Howley — June 27, 2008 @ 9:13 am
This is pretty cool. However, I’m not sure I can do what I’d really like, which is to insert the dekiscript into the custom HTML areas in the control panel. In other words, I’m more interested in putting some dekiscript into those areas that are constant for every page. Is that possible? Doesn’t seem to be work.
For instance, I’d like to put a link to the RSS feed for the page on every page, into customarea4. Easy to specify the dekiscript, but I can’t figure out how to convince Deki to render it there. Is there a way to do that that I’m missing?
I’m always on the lookout for ways to do this sort of thing without diving into the skin itself, because I’m not really comfortable with it.
Comment by Neil Weinstock — June 30, 2008 @ 6:55 am
Neil,
I’m glad you asked that question. In fact with our next release (8.05.2) we’ve addressed the issue you’re describing. Simply put you will be able to identify one page that will serve as your skinning template master. I plan on writing a blog post about the additional functionality after the release.
Thanks
Damien
Comment by Damien Howley — June 30, 2008 @ 9:06 am
Hmm, that sounds very intriguing. I look forward to hearing more.
Comment by Neil Weinstock — July 1, 2008 @ 6:25 am
When will 8.05.2 be available?
Comment by Giulio Montevecchi — July 4, 2008 @ 12:41 am
Ops, stupid question. Sorry, it’s already available, great!!!
Going straight to run update script, evviva :-))
Comment by Giulio Montevecchi — July 4, 2008 @ 12:45 am
[...] 8.05.2 release of MindTouch Deki has a many noticeable improvements, particularly regarding skinning template targeting. Additionally, 8.05.2 shipped with a fairly drastic series of updates to the most popular MindTouch [...]
Pingback by Fiesta 2.0 - MindTouch Deki Skinning Refresh | MindTouch, Inc Blog — July 11, 2008 @ 1:30 pm
How can I Install Deki_Wiki_8.08_Kilen_woods in windows XP? Can anybody please provide me the guide?
Comment by Miraj — October 5, 2008 @ 9:39 pm