Skip to main content

Add an Author Bar to your article (SAP KC)

Written by Miller Saltzman
Documentation Editor, Customer Success at MindTouch

Want to personalize your documentation for your customers while making it helpful to you? By adding the author bar (shown above) you can show details about the author: name, position at your company, a photo, and a link to their LinkedIn. You can also display publicly how many views, updates, and votes the article has received, as well as how many documents link to the article. 

Why should I use it?

  • You can keep track of who is writing each page of your documentation.
  • You can see who is writing good documentation and who is not.
  • Customers can see how popular a page is based on the about of views and votes it has.
  • Customers can learn more about who wrote the page.

Creating the Author Bar Template

To create a template that will show all this information:

  1. Go to Site Tools > Templates > Template:Custom > Views > New Page.

picture location.png

  1. Choose a title for your template. You will be using this title later.
  2. Paste the following DekiScript and CSS below using the correct styles for each. Then click save.

DekiScript (red box):

var name = $name ??;
var nameurl =  $nameurl ?? nil;
var nametitle = $nametitle ?? nil;
var companyname = $companyname ??;
var companyurl = $companyurl ?? site.uri;
var pictureurl = $pictureurl ?? nil;
var uri = page.api & 'links?dir=to';
var api = wiki.api(uri);
var inboundcount = #api['page'];

<div class="mt-author-wrapper">
  <div class="mt-page-meta">
    <span class="page-meta-count">page.rating.count;</span>
    <span class="page-meta-text">"votes"</span>
  <div class="mt-page-meta">
     <span class="page-meta-count">num.format(#page.revisions,"###,###");</span>
     <span class="page-meta-text">"updates"</span>
  <div class="mt-page-meta">
      <span class="page-meta-count">num.format(page.viewcount,"###,###");</span>
      <span class="page-meta-text">"views"</span>
  if (inboundcount > 0)
  <div class="mt-page-meta">
      <span class="page-meta-count">inboundcount;</span>
      <span class="page-meta-text drop-link links-here">"links here"</span>
      <ul class="dropdown links-here-dropdown">     
          foreach(var pg in api['page'] )
              var shorttitle = string.substr((pg / 'title'),0,20);
                  <a target="_blank" href=(pg / 'uri.ui')>;shorttitle;
                  if (string.length(shorttitle) >= 20)
  if (pictureurl)
      <div class="mt-author-picture">
          <img class="internal" src=(pictureurl)/>
  <div class="mt-author-details">
      <span class="mt-author-name">
          "Written by ";
          if (nameurl)
              <a rel="external" target="_blank" href=(nameurl)>name;</a>
      <span class="mt-author-company" if=";">
          if (nametitle)
              <span class="mt-author-title">
                  " at ";
          if (companyurl)
              <a rel="external" target="_blank" href=(companyurl)>companyname;</a>

CSS (blue box):

span.links-here {
ul.links-here-dropdown li a {
ul.links-here-dropdown {
#pageToc {
  display:none !important;
.mt-page-meta {
  border-left:1px dotted #ccc;
  padding:0 8px;
.page-meta-count {
.page-meta-text {

.mt-author-wrapper {
  border:1px solid #ccc;
.mt-author-picture {
  border-right:1px dotted #ccc;
.mt-author-picture img {
.mt-author-details {
.mt-author-name {

Adding Your Template to Documentation

To make your template show up on your site:

  1. Paste the following at the beginning of your documentation in a DekiScript style (red box):
var args = {
    name : "First Last",
    nameurl : "",
    nametitle : "Position, Department",
    companyname : "Company",
    companyurl : "",
    pictureurl : "picturelocation"
  1. Replace "First Last" with the author's first and last name.
  2. Replace with the author's LinkedIn URL. 
  • To do this go to your LinkedIn profile and copy the link directly under your profile picture. You can edit the link to make it more professional.
  • When you click the author's name it will direct you to this link. If you do not want to include the LinkedIn information just delete the URL and leave the two quotation marks (""). Alternatively, if you have a bio page within your documentation you can put that in instead.
  1. Replace "Position, Department" with the author's position at the company and the department they work in at your company. This is just a suggestion. You can write anything you want. Just keep in mind it will show up under the author's name.
  2. Replace "Company" with the name of your company.
  3. Replace with a link to your website. This will be the URL a customer will be directed to if they click your company name.
  4. Replace "picturelocation" with the location of your author's picture. 
  • To find the location of the picture first find the photo you want to use. If it is not yet an attachment on your MindTouch site attach it to the page your are working on by going to the bottom of the page and clicking Attachments > Attach a File. It will not show anywhere on your site unless it is referenced. 

​NOTE: You only have to attach the picture to one page. Once it has a location, you can reference that location from any page on your site. 

  • Once you have attached the image, right click on the attachment and choose to Open Link in New Tab.
  • Copy everything after starting with the backslash. That is your picture's location. Paste it where picturelocation used to be.

picture location.png

  1. Replace "Template_Title" with the title you chose for the template in step 2 of "Creating Your Template." Make sure to use an underscore (_) instead of a space.

If you need help creating templates click here for how to use templates in MindTouch.  

What It Looks Like on Your MindTouch Site

Screen Shot 2014-07-22 at 11.12.44 AM.png

  • Was this article helpful?