Я собираю вики Sharepoint, и в каждой статье у меня есть википедия, как оглавление из заголовков, используя то, что я предполагаю, это javascript, который я нашел на InterWebz.

<style>
#toc {
 display: table;
 border: 1px solid #aaa;
 background-color: #f9f9f9;
 font-size: 95%;
 padding: 7px;
}
#toc #tocHeader  {
 font-weight: bold;
 text-align: center;
}
#toc a:before { /* content:"• "; */ }
#toc a { line-height: 15px; margin: 10px; }
#toc .toc_Level1 { margin-left: 5px; }
#toc .toc_Level2 { margin-left: 15px; }
#toc .toc_Level3 { margin-left: 25px; }
#toc .toc_Level4 { margin-left: 35px; }
</style> 
<div id="toc"></div> 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript"> 
function GenerateTOC() {
  $("#toc").append('<p id="tocHeader">Contents</p>');
  $(".ms-rteElement-H1, .ms-rteElement-H1B, .ms-rteElement-H2, .ms-rteElement-H2B, .ms-rteElement-H3, .ms-rteElement-H3B, .ms-rteElement-H4, .ms-rteElement-H4B").each(function(i) {
 var currentNode = $(this);
  currentNode.attr("id", "title" + i);
 var linkClass = (currentNode.hasClass('ms-rteElement-H1') || currentNode.hasClass('ms-rteElement-H1B'))
   ? "toc_Level1" 
   : (currentNode.hasClass('ms-rteElement-H2') || currentNode.hasClass('ms-rteElement-H2B'))
   ? "toc_Level2" 
   : (currentNode.hasClass('ms-rteElement-H3') || currentNode.hasClass('ms-rteElement-H3B'))
   ? "toc_Level3" 
   : (currentNode.hasClass('ms-rteElement-H4') || currentNode.hasClass('ms-rteElement-H4B'))
   ? "toc_Level4" 
   : "";
  $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + currentNode.html() + "</a><br>");
  currentNode.append(" <a href='#tocHeader'>[top]</a>");
  });
}
_spBodyOnLoadFunctionNames.push('GenerateTOC');
</script>

Мое намерение состоит в том, чтобы сделать оглавление пронумерованным отдельно для каждого уровня отступа, например:

1. Heading 1   
  1.1. Heading 2    
  1.2. Heading 2   
2. Heading 1
  2.1. Heading 2   
  2.2. Heading 2

Хотя я более или менее понимаю, что происходит в этом коде, я абсолютно не знаю javascript (или, если уж на то пошло, веб-разработки - я понятия не имею, как я добился того, чем занимаюсь сейчас, если честно), поэтому я очень маленькая идея, как это реализовать. Я вижу, что функция уже имеет счетчик для создания внутренней ссылки.

Моя стратегия состояла бы в том, чтобы вставить две дополнительные переменные, скажем, J и K (у меня есть только два уровня отступа), где J будет увеличиваться только тогда, когда это заголовок уровня 1 (Element-H1, toc_Level1), а K будет увеличиваться всегда, но будет получить сброс на 0 всякий раз, когда обрабатывается заголовок уровня 1 (Element-H1, toc_Level1), однако я абсолютно не знаю, как это сделать.

< Сильный > EDIT :

Я добавил остальные части javascript, однако они определяют только форматирование оглавления, поэтому сначала я не счел их релевантными.

Сайт структурирован следующим образом:

<span class="ms-rteElement-Name">NAME</span>
<hr/>
<span class="ms-rteElement-Section">Section1</span>
<hr/>
<span class="ms-rteStyle-Text">Stuff</span>
<p><span class="ms-rteElement-Section">Section2</span></p>
<hr/>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H1">Heading 1</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H1">Heading 1</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<span class="ms-rteElement-Section">Section3</span>
<hr/>
<p><span class="ms-rteStyle-Text">More fluff</span></p>

Сценарий, как указано выше, прекрасно генерирует оглавление, конечно, без предшествующих чисел.

0
Eleshar 30 Авг 2017 в 12:56

3 ответа

Лучший ответ

Итак, я наконец понял это. К сожалению, ни один из ответов не дал того, что было задумано (один сгенерировал ToC, где маркер второго уровня пропустил также соответствующий маркер более высокого уровня и отсутствовала функция гиперссылки; другой полностью пропустил нумерацию).

Решением было добавить дополнительные переменные в функцию GenerateTOC ()

 var j = 0, k = 0;

Затем добавьте условный счетчик и сброс счетчика на основе значения переменной linkClass и поместите их в одну текстовую переменную.

 linkClass == "toc_Level1"     
   ? (j++, k = 0)       
   : linkClass == "toc_Level2"       
   ? k++       
   : "";

 var l = k == 0 
   ? (String(j) + ". ")   
   : (String(j) + "." + String(k) + ". ");

Затем текстовая переменная была добавлена прямо перед «currentNode.html» в строке, создающей запись ToC.

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>    
<script type="text/javascript">    
function GenerateTOC() {    
 var j = 0, k = 0; // counters    

  $("#toc").append('<p id="tocHeader">Contents</p>');      
  $(".ms-rteElement-KD_Heading1, .ms-rteElement-KD_Heading2").each(function(i) {

 var currentNode = $(this);

  currentNode.attr("id", "title" + i);

 var linkClass = (currentNode.hasClass('ms-rteElement-KD_Heading1') || currentNode.hasClass('ms-rteElement-H1B'))    
   ? "toc_Level1"    
   : (currentNode.hasClass('ms-rteElement-KD_Heading2') || currentNode.hasClass('ms-rteElement-H2B'))    
   ? "toc_Level2"    
   : "";

 linkClass == "toc_Level1"     // runs the counters
   ? (j++, k = 0)       
   : linkClass == "toc_Level2"       
   ? k++       
   : "";

 var l = k == 0     // concatenates the counters
   ? (String(j) + ". ")       
   : (String(j) + "." + String(k) + ". ");

  $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + l + currentNode.html() + "</a><br>");    
  currentNode.append(" <a href='#tocHeader'>[top]</a>");    
  });    
}    
_spBodyOnLoadFunctionNames.push('GenerateTOC');    
</script>
0
Eleshar 31 Авг 2017 в 07:55

Решение, которое генерирует упорядоченный список, который должен уметь работать с более глубокими документами:

function levelClassName(level) {
  if (typeof level !== "number") {
    throw new Error("Wrong argument type");
  }

  return "ms-rteElement-H".concat(level.toString(10));
}

function elementLink(element) {
  return $("<li></li>").text($(element).text());
}

function generateTOC() {
  var level = 1, // list level
    tocList = $("<ol></ol>"), // top level list
    lastElement = tocList;

  $("#toc").append('<p id="tocHeader">Contents</p>');
  $("#toc").append(tocList);

  $("span").each(function(index, value) {
    // make a jQuery object out of current element once instead of doing it
    // every time I want to use it
    var element = $(value),
      newElement;

    if (element.hasClass(levelClassName(level))) { // same level
      newElement = elementLink(value);
      // append inside list tag or next to last tag if it isn't a list
      lastElement[lastElement.prop("tagName") === "OL" ?
        "append" :
        "after"](newElement);
      lastElement = newElement;
    } else if (element.hasClass(levelClassName(level + 1))) { // deeper
      newElement = elementLink(value);
      // make a new list tag for the deeper level
      lastElement.append($("<ol></ol>").append(newElement));
      lastElement = newElement;
      level += 1;
    } else if (level - 1 >= 1 && // shallower
      element.hasClass(levelClassName(level - 1))) {
      newElement = elementLink(value);
      lastElement // list element
        .parent().parent() // -> list (on same level) -> list element above
        .after(newElement);
      lastElement = newElement;
      level -= 1;
    }
  });
}

$(document).ready(generateTOC);
#toc {
  display: table;
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  font-size: 95%;
  padding: 7px;
}

#toc #tocHeader {
  font-weight: bold;
  text-align: center;
}

#toc a:before {
  /* content:"• "; */
}

#toc a {
  line-height: 15px;
  margin: 10px;
}

#toc .toc_Level1 {
  margin-left: 5px;
}

#toc .toc_Level2 {
  margin-left: 15px;
}

#toc .toc_Level3 {
  margin-left: 25px;
}

#toc .toc_Level4 {
  margin-left: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toc"></div>
<span class="ms-rteElement-Name">NAME</span>
<hr/>
<span class="ms-rteElement-Section">Section1</span>
<hr/>
<span class="ms-rteStyle-Text">Stuff</span>
<p><span class="ms-rteElement-Section">Section2</span></p>
<hr/>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H1">Heading 1</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H1">Heading 1</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<p><span class="ms-rteElement-H2">Heading 2</span></p>
<p><span class="ms-rteStyle-Text">Fluff</span></p>
<span class="ms-rteElement-Section">Section3</span>
<hr/>
<p><span class="ms-rteStyle-Text">More fluff</span></p>

Нет кода, который делает ссылки кликабельными. Лучший способ сделать это - присвоить каждому заголовку уникальные идентификаторы, а затем связать их с ToC.

0
DoMiNeLa10 30 Авг 2017 в 12:03

Возможное решение

function GenerateTOC() {
  $("#toc").append('<p id="tocHeader">Contents</p>');
  $(".ms-rteElement-H1, .ms-rteElement-H1B, .ms-rteElement-H2, .ms-rteElement-H2B, .ms-rteElement-H3, .ms-rteElement-H3B, .ms-rteElement-H4, .ms-rteElement-H4B").each(function(i) {
    var currentNode = $(this);
    currentNode.attr("id", "title" + i);
    var linkClass = (currentNode.hasClass('ms-rteElement-H1') || currentNode.hasClass('ms-rteElement-H1B')) ?
      "toc_Level1" :
      (currentNode.hasClass('ms-rteElement-H2') || currentNode.hasClass('ms-rteElement-H2B')) ?
      "toc_Level2" :
      (currentNode.hasClass('ms-rteElement-H3') || currentNode.hasClass('ms-rteElement-H3B')) ?
      "toc_Level3" :
      (currentNode.hasClass('ms-rteElement-H4') || currentNode.hasClass('ms-rteElement-H4B')) ?
      "toc_Level4" :
      "";
    $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + currentNode.html() + "</a><br>");
    currentNode.append(" <a href='#tocHeader'>[top]</a>");
  });

  // level 1
  $(".ms-rteElement-H1, .ms-rteElement-H1B").each(function(index, el) {
    $(this).html(index + '. ' + $(this).text());
    // level 2
    $('.ms-rteElement-H2, .ms-rteElement-H2B', this).each(function(idx, child) {
      $(this).html(index + '.' + idx + ' ' + $(this).text());
    });
  });
}
0
bluehipy 30 Авг 2017 в 11:14