我有一个页面的格式是这样的:
<h1>Header</h1>
<h2>Subheader</h2>
<h3>Subsubheader</h3>
<h1>Another header</h1>
是否有可能在服务器端生成一个目录/大纲在页面的开始,就像维基百科在它的文章?我使用Ruby on Rails。
编辑:没有JavaScript!
我今天为此创建了一个类。它依赖于http://www.nokogiri.org/,但是Rails已经提供了这个gem。
放入app/models/toc.rb
:
class Toc
attr_accessor :html
TOC_CLASS = "toc".freeze
TOC_ELEMENT = "p".freeze
TOC_ITEMS = "h1 | h2 | h3 | h4 | h5".freeze
UNIQUEABLE_ELEMENTS = "h1 | h2 | h3 | h4 | h5 | p".freeze
def initialize(content)
@html = Nokogiri::HTML.fragment content
end
def generate
clear
set_uniq_ids
toc = create_container
html.xpath(TOC_ITEMS).each { |node| toc << toc_item_tag(node) }
html.prepend_child toc
return html.to_s
end
private
def clear
html.search(".#{TOC_CLASS}").remove
end
def set_uniq_ids
html.xpath(UNIQUEABLE_ELEMENTS).
each { |node| node["id"] = rand_id }
end
def rand_id
(0...8).map { ('a'..'z').to_a[rand(26)] }.join
end
def create_container
toc = Nokogiri::XML::Node.new TOC_ELEMENT, html
toc["class"] = TOC_CLASS
return toc
end
def toc_item_tag(node)
"<a data-turbolinks='false' class="toc-link toc-link-#{node.name}" href="##{node["id"]}">#{node.text}</a>"
end
end
像
一样使用toc = Toc.new article.body
body_with_toc = toc.generate
article.update body: body_with_toc
您需要从层次结构中生成像这样的数据源
@toc = [ ['header', 0], ['subheader', 1], ['subsubheader', 2],
['header2', 0], ['header3', 0], ['subheader2', 1]
]
很容易在模板中呈现,例如:
<%- @toc.each do |item, distance| %>
<%= (' ' * distance * 5).html_safe %>
<%= item %>
<br/>
<%- end %>
会给你:
header
subheader
subsubheader
header2
header3
subheader2
当然,你可以用"距离"来决定样式的大小,而不是"深度",但我希望你能明白主要的意思。
是的,这是可能的。你真的不需要rails;您还可以使用javascript生成一个目录。下面是一个您可以使用的示例库。http://www.kryogenix.org/code/browser/generated-toc/
你也可以在你循环遍历rails erb/haml视图中的元素时创建锚链接。