12 댓글

  • Nicole - Community Manager
    댓글 작업 고유 링크

    Hi Mary, 

    Yes, you could add some kind of sidebar navigation by customizing your Guide theme. 

    0
  • 댓글 작업 고유 링크

    Hi Mary,

    You can add sidebar navigation to your help center using our Zendesk extension:

     

    There is one more extension - Table of Contents:

     

    Alternatively, you can get Lotus One theme for Zendesk that includes side navigation and other additional features by default. 

    Mary, if you have any questions, contact us. We'll be happy to help.

    Best,

    Lotus Themes

     

     

    0
  • Mary Paez
    댓글 작업 고유 링크

    You showed me side bar navigation in the Guide theme.  I asked about sidebar navigation in an article.  Sometimes we create large articles that need navigation help b/c there are many sections.  We tried the bookmark approach but does not work very well. 

     

    We would like this type of navigation within an article: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

     

    I've experimented by copying and pasting some of the HTML code from this site to use in the source code of the article and could not get anything to work.

    0
  • Nicole - Community Manager
    댓글 작업 고유 링크

    Hi Mary -

    In order to implement a customization at the article level, you would still need to do this from within the Guide theme.

    0
  • Mary Paez
    댓글 작업 고유 링크

    Do you have an example of an article where it shows this type of navigation.  Would like to show our team and ask if we can do something similar.

     

    Also,  wanted to know if we add tables to articles and want all tables to follow a consistent color/border/background, is that possible also? and, How?  do you have an example?

     

    0
  • Nicole - Community Manager
    댓글 작업 고유 링크

    Hi Mary,

    I don't have examples but hopefully some other users can chime in and share some with you!

    0
  • Coley Woyak
    댓글 작업 고유 링크

    Mary Paez did you ever find a solution to this? I am hoping to do the same thing.

    I had my html formatted for a table of contents that remains on the left of the screen as a user reads the document, but it did not render correctly on zendesk. I switched it back to a macro TOC (asciidoc) for the moment.

    Some of our documentation is very long (30+ page PDFs) and a side-nav feels indispensable. 

    0
  • Mary Paez
    댓글 작업 고유 링크

    No. I do not have a solution yet.

    0
  • Karen D Snyder
    댓글 작업 고유 링크

    We have a brand in our HelpDesk that shows a sidebar with the sections on article pages, as shown below. So it's not a full table of contents, but does provide navigation to sections.

    I can share the code, but I didn't write the code, and I don't know who wrote the code. You might be able to work with it to also list the articles under the sections.

    This is in script.js inside the document.ready function:

    // get id and template name
    var _location = window.location.href.split('/en-us/');
    console.log('window.location.href: ' + window.location.href + ', _location: ');
    console.log(_location);
    if (_location.length > 1) {
    var _split = _location[1].split('-')[0];
    var _templatename = _split.split('/')[0];
    var _templateid = _split.split('/')[1];
    }

    var categoriesList = function(_categories) {
    if(typeof HelpCenter.user.locale == 'undefined') {
    HelpCenter.user.locale = window.location.pathname.replace('/', '').replace('?','/').split('/')[1];
    }

    $.ajax({
    url: '/api/v2/help_center/'+HelpCenter.user.locale+'/categories.json',
    type: 'GET',
    dataType: 'json',
    success: _categories
    });
    };

    var _list = '';

    $(document).ajaxStart(function(){
    $('#loader').show();
    });
    $(document).ajaxStop(function(){
    $('#loader').hide();
    });

    categoriesList(function(data){
    $(data.categories).each(function (idx, itm) {
    if (itm.name !== 'General') {
    _list = _list + '<li><a href="' + itm.html_url + '" id="' + itm.id + '">' + itm.name + '</a></li>'
    }
    });
    $('.left-side-category-list').html(_list);
    $('.left-side-category-list a#' +_templateid).addClass('active');

    if(_templatename=='sections' || _templatename=='articles') {
    var categoryid = $('.breadcrumbs > li:nth-child(2) > a').attr('href').split('/categories/')[1].split('-')[0];
    $('.left-side-category-list a#' + categoryid).addClass('active');
    }

    });

    This is in article_page.hbs:

     <section class="wrapper-column">
      <div class="container">
        <div class="left-col">
          <!-- Page Left Sub Navigation Links -->
          <ul class="left-side-category-list article-list list-mains">
          </ul>
        </div>
      <div class="right-col">

       [article HTML]

      </div>
    </section>

    This is in style.css:

    .left-side-category-list li a.active {
    background-color: #e1253b;
    }

    .wrapper-column .left-col > ul > li > a:hover,
    .left-side-category-list li a.active {
    background-color: #e1253b;
    }

    .wrapper-column .left-col {
    float: left;
    padding-right: 15px;
    width: 33.667%;
    }

    .wrapper-column .right-col {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    width: 66.333%;
    }

    .wrapper-column .left-col > ul > li {
    background-color: #f0f0f0;
    margin-bottom: 3px;
    }

    .wrapper-column .left-col > ul > li > a {
    color: #2d2d2d;
    display: block;
    font-size: 1.2em;
    font-weight: 400;
    padding: 10px 35px;
    text-transform: uppercase;
    width: 100%;
    }

    .wrapper-column .left-col > ul > li.active a
    {
    background-color:#e1253b;
    color:#fff;
    }

    .wrapper-column .left-col > ul > li > a:hover, .left-side-category-list li a.active {
    color:#fff;
    }

    Hope this helps.

     

     

     

    0
  • Lisa Sedlak
    댓글 작업 고유 링크

    Thanks! I will try to play with this code next week. 

    0
  • Sabrina Kwok
    댓글 작업 고유 링크

    Hello Lisa - how did it go? Any progress?

    0
  • Lisa Sedlak
    댓글 작업 고유 링크

    I didn't get a chance to check it as I have moved on to a different project. Thank you for your help though! 

    0

댓글을 남기려면 로그인하세요.

Zendesk 제공