广告

使用 JavaScript 生成HTML目录(一)

2018-3-8 17:30 323 2 3 分类: 软件与OS 文集: 软件

使用 JavaScript 生成HTML目录(一)


阅读帮助与感想:
1. 似乎编辑栏找不到 Markdown 语法方式, 也没有整个 html 文件上传的支持. 明明已经完成的 html 笔记, 为在博客发表而不得不在此重新编辑, 为了共享知识, 要付出作者们这么大的努力啊!
2. 网页效果似无法表现. 因为我的这份博客文章, 就是为 javacript 对网页效果的一些应用而写就的, 能够直接在 html 显示效果. 唔, 那么我尽量试试用图片来示意吧.
3. 代码段没有专门的 Tool 的ICON 指示, 帮助代码显示.


1. Markdown File 的 Export Html 的限制

作为轻易上手的 markdown 语言写作编辑器, 其 Html 的 Export 功能也往往相当简易. 似乎某些相对复杂些的 MD Editor 能够使用高级的 [TOC] 语法, 而某些则能够在编辑环境自定义的 CSS 中获得自行产生目录(TOC) 的能力.

但使用类似 MarkdownPad 的 markdown editor 时, 则往往不能相当简易获得自行产生上述 TOC 之实现.

因此, 我们需要作一些稍微麻烦点儿的工作, 去实现我们的目的. 我们可能会作笔记记录项目大致框架, 项目实现, 功能需求实现. 可能在博客上共享这些 story 或 knowledge. 因此, TOC 实现方式应该是足够的"轻", 它应无需外部的 CSS, 或 JavaScript 文件(或者至少它能放在 html 的 head 中).


2. 在文章头部添加 TOC
2.1 可展开的头部目录

引用来自 MarkdownPad2添加目录(输出为HTML时可用) 的代码(如有任何禁止引用的意见请通知我停止引用):


<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

// 生成目录列表
var div1 = document.createElement("div");
div1.style.cssText = "clear:both";
var outline = document.createElement("div");
outline.setAttribute("id", "outline-list");
outline.style.cssText = "border:solid 1px #ccc; background:#eee; min-width:200px;padding:4px 10px;";

var ele_p = document.createElement("p");
ele_p.style.cssText = "text-align: left; margin: 0;";
outline.appendChild(ele_p);

var ele_span = document.createElement("span");
// ele_span.style.cssText = "float: left;";
var ele_text=document.createTextNode("目录");
ele_span.appendChild(ele_text);

var ele_a = document.createElement("a");
ele_a.appendChild(document.createTextNode("[+]"));
ele_a.setAttribute("href", "#");
ele_a.setAttribute("onclick", "javascript:return openct(this);");
ele_a.setAttribute("title", "点击打开目录");

ele_span.appendChild(ele_a);
ele_p.appendChild(ele_span);

var ele_ol = document.createElement("ol");
ele_ol.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
ele_ol.setAttribute("id", "outline_ol");
outline.appendChild(ele_ol);
var div1 = document.createElement("div");
div1.style.cssText = "clear:both";

document.body.insertBefore(outline, document.body.childNodes[0]);
// 获取所有标题
var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
if (headers.length < 2)
  return;

// -----
var old_h = 0, ol_cnt = 0;
// -----

for (var i = 0; i < headers.length; i++) {

  var ele_ols = null;
  var ele_Current = ele_ol;
  // 找出它是H几,为后面前置空格准备
  var header = headers[i];
  header.setAttribute("id", "t" + i + header.tagName);
  var h = parseInt(header.tagName.substr(1), 10);

  // -----
  if (!old_h){
    old_h = h;

  }

  if (h > old_h) {

    ele_ols = document.createElement("ol");
    ele_Current = ele_ol;
    if(ele_Current && ol_cnt > 0){
      var temp = ol_cnt;
      while(temp > 0){
        ele_Current = ele_Current.lastChild;
        temp--;
      }
    }
    ele_Current.lastChild.appendChild(ele_ols);
    ol_cnt++;
  } else if (h < old_h && ol_cnt > 0) {

    if (h == 1) {
      while (ol_cnt > 0) {
        ol_cnt--;
      }
    } else {
      ele_ols = document.createElement("ol");
      ele_Current = ele_ol;
      if(ele_Current && ol_cnt > 0){
        var temp = ol_cnt;
        while(temp > 1){
          ele_Current = ele_Current.lastChild;
          temp--;
        }
      }
    // var ele_Parent = ele_Current.parentNode();
    //ele_Current.appendChild(ele_ols);
    ol_cnt--;

    }
  } else if (h == old_h && ol_cnt > 0) {

    ele_Current = ele_ol;
    if(ele_Current && ol_cnt > 0){
      var temp = ol_cnt;
      while(temp > 0){
        ele_Current = ele_Current.lastChild;
        temp--;
      }
    }
    ele_Current = ele_Current.lastChild;
  }
  if (h == 1) {
    while (ol_cnt > 0) {
      ol_cnt--;
    }
  }
  if (h < old_h && ol_cnt > 0 && h != 1){
    ele_li = document.createElement("li")
    ele_Current.lastChild.appendChild(ele_li);
    old_h = h;
    var a = document.createElement("a");
    // 为目录项设置链接
    a.setAttribute("href", "#t" + i + header.tagName);
    // 目录项文本前面放置对应的空格
    a.innerHTML = header.textContent;
    ele_li.appendChild(a);
    continue;
  }

  old_h = h;
  // -----
  if (ele_ols){
    ele_li = document.createElement("li")
    ele_ols.appendChild(ele_li);
  } else {
    ele_li = document.createElement("li")
    ele_Current.appendChild(ele_li);
  }
  var a = document.createElement("a");
  // 为目录项设置链接
  a.setAttribute("href", "#t" + i + header.tagName);
  // 目录项文本前面放置对应的空格
  a.innerHTML = header.textContent;
  ele_li.appendChild(a);
}
// -----
while (ol_cnt > 0) {
  ol_cnt--;
}
// -----
});
function openct(e) {
  if (e.innerHTML == '[+]') {
// createTextNode
e.setAttribute('title', '收起');
e.innerHTML = '[-]';
var element = document.getElementById("outline_ol");
element.style.cssText = "margin-left:14px;padding-left:14px;line-height:160%;";
  } else {
e.setAttribute('title', '展开');
e.innerHTML = '[+]';
var element = document.getElementById("outline_ol");
element.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
  }
  e.blur();
  return false;
}
</script>

使用方式: copy 这段代码到: Tool -> Options -> Advanced -> Edit your html head(或类似button名) 即可.
实现后效果是这样:

上传时提示 SERVER(IO) ERROR 

展开后效果是这样:

上传时提示 SERVER(IO) ERROR 

2.2 细节调整
  • 对我而言, 尚有几个使用上的小问题, 首先在 MarkdownPad 编辑界面的直接预览中看不到这个目录.
  • 其次, 在 call 外部 browser 打开预览时, 倒是可以看到预览生成的目录, 但点击链接导航会失败: 显示错误是"XXX file 调用提示". 解决的方式是: 需要 Export Html, 然后点击生成TOC, 则展开的TOC 的任何一个标题, 都可顺利导航至相应的标题处。-- 如果我们很少写 JS 脚本(或者懒得去跟代码), 那么这个不便, 看起来也并非不可接受.
  • 还有, 这段脚本中, 贴心地为我们的 h1 标题栏(标题1), 增加了序号; 对 h2 标题栏增加了 'i' 字符作为标识. 但是对我这样的逻辑强迫症重度综合症来说, 根本用不着 -- 在稍长点文章后, 我自个儿就有强迫加序号, 或直接命名为"章节X", 或给一个 "$x" 标识等习惯.
  • 解决方式: 简单跟进这段代码 --大致上这段 JS 脚本分析了标题后, 以标题名做了一个目录 list, 每个item 也作了链接. 继续检查 ol, li 的格式, 注意到这是加序号的 list 风格. 因此, 我们需要加一行代码, 使用实心圆 type 替代序号 type 即可, 添加一行代码:

// 目录项文本前面放置对应的空格
a.innerHTML = header.textContent;
ele_li.appendChild(a);
ele_li.type = 'disc';    // add here with new disc type for the list item;

这是现在展开头部目录的样子:
上传时提示 SERVER(IO) ERROR 

跳转至: 使用JavaScript 生成目录(二)


后记: 这里的代码显示太痛苦了, 由于没有背景渲染, 左侧边亮色标识, 以及标识行数, 使得阅读较困难. 那么我暂时不再对这个讨论课题更新了.

计划中的写作, 应包括:

使用JavaScript 生成目录(二): 更简洁的头部目录的默认展开显示

使用JavaScript 生成目录(三): 左侧目录树的显示


其他讨论课题: JavaScript 实现左侧边代码行号标识

注意到面包板正在不断变化中, 待完善些我再来补充.

广告

文章评论 1条评论)

登录后参与讨论

ev711 2018-3-9 08:39

建议收到,我们会不断改进的~感谢分享
相关推荐阅读
allen_zhan_752827529 2017-08-25 09:20
功能手机方案不同生产批次间可能的差异
功能手机方案不同生产批次间可能的差异开始正文前, 首先我们尝试对手机方案或者说平台, 与传统的嵌入式项目进行一番对比. 这类对比绝对不是浪费时间, 考虑到两者之间巨大差异-- 从开发认知程度的强烈不同...
allen_zhan_752827529 2017-08-09 10:57
使用电池电源的便携系统的低功率设计的几个注意事项
使用电池电源的便携系统的低功率设计的几个注意事项今天IoT物联网时代, 越来越多的设计被引入到, 使用电池能量的便携电子设备设计. 此时, 低功耗特性往往成为系统设计最重要的核心之一, 完成系统基础功...
allen_zhan_752827529 2014-08-15 15:03
关于寄存器更多的讨论
关于寄存器更多的讨论   我们过去一份 blog 中("核心寄存器何其少耶"), 对于 register 被 instruction 的 size 的大小而限制, 进行了一番讨论. 尽管可...
allen_zhan_752827529 2014-07-21 17:50
UAL的指令描述格式的参考
UAL的指令描述格式的参考   嵌入式系统( Embedded system) 开发的核心, 往往围绕着 uController 的开发而进行. 也即是说, 在 hardware 的 ...
allen_zhan_752827529 2014-07-14 16:48
观察 uController 的视角
观察 uController 的视角   我们几乎无法回到 ARMv4 之前的年代,  因为 Architecture Reference Manaul 已经不建议我们这样做. 这种回溯可...
我要评论
1
2
广告
关闭 热点推荐上一条 /2 下一条