So I have a sphinx-generated website. Parts of it are in raw html, parsed by sphinx + jinja.
Now I want to use links to certain parts of the toc-tree inside the raw html.
Is there a way to achieve this?
Currently I'm exiting the raw html and use rst.
This looks something like
.. raw:: html
<small class="float-right example-links">
:ref:`Examples<general_examples>`
.. raw:: html
</small>
Not is this ugly, it also messes up the generated html.
Is there a better way to do this?
Thanks :)
You can simply use a HTML link element, <a href="..."...</a> if you know how section ids are generated. The ids for items in the table of contents are simply lower-cased section titles with white space replaced by hyphens, -. So this reStructuredText
Title
=====
.. contents:: Table of Contents
Section 1
---------
Some filler text...
Section 2
---------
Some filler text...
results in the following HTML snippet (<head> etc. removed)
<body>
<div class="document" id="title">
<h1 class="title">Title</h1>
<div class="contents topic" id="table-of-contents">
<p class="topic-title first">Table of Contents</p>
<ul class="simple">
<li><a class="reference internal" href="#section-1" id="id1">Section 1</a></li>
<li><a class="reference internal" href="#section-2" id="id2">Section 2</a></li>
</ul>
</div>
<div class="section" id="section-1">
<h1><a class="toc-backref" href="#id1">Section 1</a></h1>
<p>Some filler text...</p>
</div>
<div class="section" id="section-2">
<h1><a class="toc-backref" href="#id2">Section 2</a></h1>
<p>Some filler text...</p>
</div>
</div>
</body>
Therefore, in order to link to a table of contents item you can use the following reStructuredText
.. raw:: html
<small class="...">Section 1</small>
If you want to link to the section itself then replace the href value with #id1 or the relevant section's id.
Related
I want my project to display <div> quoted on the website. I am using the <code> tag. However, it doesn't appear. This is the piece of code I am using:
<div class="section">
<h3>Additional Style</h3>
<h2>Box Model of <code><div></code>
<!--
I want this code to output the following: Box Model of <div>
However, it outputs: Box Model of
-->
</h2>
<ul>
<li>padding: 40px,</li>
</ul>
</div>
Thanks beforehand!
Use > and < instead of code.
Source: https://www.w3schools.com/html/html_entities.asp
use this <h2>Box Model of <div>
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
I have a HTML markup for each brand in my page like this
<ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li>
</ul>
is that heading position ok inside a hyperlink, or should I change it to
<ul>
<li>
<h2>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</h2>
</li>
</ul>
which one is the more right way to write it, and what is the result that will be read by crawler for the heading in both case?
If in the first one, the heading content is only mallname, will the second one be read as mallname mallname mallname as there is a title attribute in the hyperlink and alt attribute in the image inside the heading
here's one of the result of the list item
In your first example, the h2 doesn’t describe the content of the li. In scope of this heading is everything following it, until the next heading starts. So in fact, the previous heading would describe the following content, and so on. This problem always arises when using headings without sectioning elements in lists.
In your second example, the h2 probably contains more than it should (two times "mallname"; the one in the title attribute is not considered to be part of the heading content). But what is the actual content here? There is only a heading, which doesn’t seem to make sense.
Your alt content is probably not correct/useful. When it is exactly the same as the corresponding heading, the you should probably use an empty alt value. But it’s likely that the image represents something in addition to the heading: describe this in the alt content.
Duplicating the heading content in the title attribute doesn’t seem to make sense, either. Only use it for additional helpful (but not essential) content.
So you should use something else: sectioning elements. Judging from the screenshot, it might be the case that article is appropriate (if not, use section).
By using a sectioning element like article, the heading doesn’t have to be placed on the top.
<ul>
<li>
<article>
<a href="/brand/mallname">
<img src="/Images/mallname.png" alt="Mallname offers … and …. It’s ….">
<h2>mallname</h2>
</a>
</article>
</li>
</ul>
However, use this only when the h2 describes the ìmg! When the image is only an alternative to the heading (or only decoration, and the actual image content isn’t relevant in this context), why use headings at all? In that case you’d have just a list of links:
<ul>
<li><img src="/Images/mallname.png" alt=""> mallname</li>
</ul>
Inside of <ul> should go <li> tags, so I think the first markup is more right, if to close eyes on the <div> elements inside of <a>.
Set your <a> to display: block; and you'll be correct with the first one.
You are missing the <ul> tags that are required as a parent for the <li>-tags.
Assuming you'd add the <ul>-tags that are missing: <ul> is not allowed as a child element for <h2> so that renders the second version as no good => first one is "more right".
The tests, I took the liberty to add the missing <ul>'s & mandatory parents, the doctype is HTML5:
W3C markup validator gives green light for this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<ul><li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li></ul>
</body></html>
W3C markup validator gives the aforementioned error to this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<h2><ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</li>
</ul></h2>
</body></html>
I'm having lots of trouble doing this. Basically I have a "Contacts" button. The button works perfectly fine, when you click the reveal comes down but fails to show the Tabs section that I want to be shown.
I tested to make sure my Reveal and button were written correctly by doing this: I replaced the sections tabs with simple tags and random words. The random words and paragraphs are shown perfectly when clicking on the button, however the Sections Tabs do not get shown for some reason. Am I missing something? Here's my markup for the Reveal including the sections Tabs:
<div id="second-modal" class="reveal-modal">
<div class="section-container tabs" data-section="tabs">
<section class="active">
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
</div>
I'm using foundation-4 and using their example code. It's a basically a straight copy and paste.
This is straight from the Foundation docs...
Looks like you have to initialize the tabs when the modal is opened.
$('#myModal').on('opened', function () {
$(this).foundation('section', 'reflow');
});
http://foundation.zurb.com/docs/components/section.html
(Scroll to the very bottom)
Ok the topic I asked here is about "anchor" is that correct?
Ok this actually works now
**Development** this is on the First Site
And then where the Development is: (2nd site)
<a name="#tips1">**Developer**</a>
Did I miss something here?
Ok this is this first site:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/test-4.png
Now if you can see, if you click on the "Development" it will go to the 2nd site. And in this 2nd site, this is where I listed the "Development" and "Consulting" in one page.
Now I would like that if the user click on "Consulting" it would go directly to the "Consulting" text and not to "Development" text first because they are written in one page.
So is this anchor?
I'm not sure I understand what you mean.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<hr />
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
When you click on a link, it will take you to the section it's linked with via element IDs. The sections can be behind the <hr />.
Linking to another page is similar:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
Is this what you meant?
[EDIT]
After clearing the issue in the comments, the solution indeed turns out to be anchors. Page one, say, index.html, will have this code:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
While page two, say, fruit.html, will have this code:
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
You don't have to use <p> tags, of course. You'll probably want to use <div> containers instead:
<div id="apple">
<p>My apple stuff</p>
</div>
<hr />
etc.
I'm really not sure what you're asking here, but I get the impression it's along the lines of:
If someone clicks the links, how do I show information related to that link on the same page?
Which is relatively easy:
html:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<div id="apple" class="panel">
<p>Apple Stuff</p>
</div>
<div id="banana" class="panel">
<p>Banana Stuff</p>
</div>
<div id="grapes" class="panel">
<p>Grapes Stuff</p>
</div>
css:
.panel {
display: none;
}
.panel:target {
display: block;
}
JS Fiddle demo of the above.
I think you are trying to link to another place on your page?
For absolute, the following syntax is used: Link text.
With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the href attribute provided that the page containing the link resides in the same folder as the page acting as the link's target.
Maybe still this doesnt answer your question?
For the same page, A named anchor inside an HTML document:
<a name="useful on same page">Useful Paragraph</a>
Create a link to the "Useful Paragraph" inside the same document:
Useful Paragraph
If I still havent answered the question, please provide more info
With an ul, very simple:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>