I am beginning with AsciiDoctor and I want to output HTML. I've been trying to figure out how to create custom class in divisions, I searched google, manuals etc. and couldn't find a solution. What I want to do is simply write something like this:
Type the word [userinput]#asciidoc# into the search bar.
Which generates HTML
<span class="userinput">asciidoc</span>
but I want to have div tags instead of span. Is there any way to do it or should I just use something like
+++<div class="userinput">asciidoc</span>+++ ?
I think what you need is called "role" in Asciidoctor.
This example:
This is some text.
[.userinput]
Type the word asciidoc into the search bar.
This is some text.
Produces:
<div class="paragraph">
<p>This is some text.</p>
</div>
<div class="paragraph userinput">
<p>Type the word asciidoc into the search bar.</p>
</div>
<div class="paragraph">
<p>This is some text.</p>
</div>
You have now a css selector div.userinput for the concerned div.
See 13.5. Setting attributes on an element in the Asciidoctor User Manual (you can also search for "role").
You may want to use an open block for that purpose:
Type the following commands:
[.userinput]
--
command1
command1
--
Producing:
<div class="paragraph">
<p>Type the following commands:</p>
</div>
<div class="openblock userinput">
<div class="content">
<div class="paragraph">
<p>command1</p>
</div>
<div class="paragraph">
<p>command1</p>
</div>
</div>
</div>
The advantage is it can wrap any other block and is not limited to only one paragraph like the other answer.
For slightly different use cases, you may also consider defining a custom style.
Related
I am trying to add existing division of Odoo product template in a new division. for that, I can do the "replace" of the whole division. and add my custom division.
for example, here is default Odoo template section with the div.
<section t-attf-class="container mt8 oe_website_sale" id="product_detail">
<div class="row" id="odoo_default_row">
</div>
</section>
and I wanted to add odoo_default_row div in my custom div element. like
<section t-attf-class="container mt8 oe_website_sale" id="product_detail">
<div id="my_custom_div">
<div class="row" id="odoo_default_row">
</div>
</div>
</section>
what is the best way to add existing division in the custom division despite using xpath replace?
We can replace whole div element using "replace" attribute. With these, we can freely design custom div element.
Try with following code:
<div id="odoo_default_row" position="replace">
<!-- Design your div element as per your requirement-->
</div>
NOTE:
As per my understanding with your situation is that "inside" attribute will not work.
for other areas of a web page it is simple to mark up; i.e. navigation element, header, footer, sidebar
Not so with mainContentOfPage; I've seen a number of different ways to implement this, most recently (and I found this one to be the most strange) on schema.org itself:
<div itemscope itemtype="http://schema.org/Table">
<meta itemprop="mainContentOfPage" content="true"/>
<h2 itemprop="about">list of presidents</h2>
<table>
<tr><th>President</th><th>Party</th><tr>
<tr>
<td>George Washington (1789-1797)</td>
<td>no party</td>
</tr>
<tr>
<td>John Adams (1797-1801)</td>
<td>Federalist</td>
</tr>
...
</table>
</div>
I could use some examples; the main content of my page is in this case a search results page, but I would plan to use this on other pages too (homepage, product page, etc.)
Edit, I found some more examples:
Would this be valid? I found this on a blog:
<div id="main" itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
<p>The content</p>
</div>
I also found this even simpler example on another blog (might be too simple?):
<div id="content" itemprop="mainContentOfPage">
<p>The content</p>
</div>
The mainContentOfPage property can be used on WebPage and expects a WebPageElement as value.
But Table is not a child of WebPage and true is not an expected value. So this example is in fact strange, as it doesn’t follow the specification.
A parent WebPage should use Table as value for mainContentOfPage:
<body itemscope itemtype="http://schema.org/WebPage">
<div itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Table">
</div>
</body>
EDIT: Update
Your second example is the same like mine, it just uses the more general WebPageElement instead of Table. (Of course you’d still need a parent WebPage item, like in my example.)
Your third example is not in line with schema.org’s definition, as the value is Text and not the expected WebPageElement (or child) item.
A valid option would be:
<body itemscope itemtype="http://schema.org/WebPage">
<main itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
<div itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
<h1 itemprop="name">whatever</h1>
</div>
</main>
</body>
Of course you may add related properties to top-level or nested elements, and change Thing into any other item type listed at Full Hierarchy. I also recommend to use mainEntity, documentation still doesn't clarify if it's really necessary, but according to 1st example here, using WebPage you may want to specify a mainEntity:
<body itemscope itemtype="http://schema.org/WebPage">
<header><h1 itemscope itemprop="mainEntity" itemtype="http://schema.org/Thing">whatever</h1></header>
<main itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
<div itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
<h2 itemprop="name">whatever</h2>
</div>
</main>
</body>
Cannot tell if also this would be valid:
<body itemscope itemtype="http://schema.org/WebPage">
<main itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
<div itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Thing">
<h1 itemprop="name">whatever</h1>
</div>
</main>
</body>
Documentation doesn't say nothing about setting mainEntity to nested items.
In any case, consider that "[...] Every web page is implicitly assumed to be declared to be of type WebPage [...]" as stated in WebPage description, and use of HTML tags as <main>, <footer> or <header> already gives information about what type of elements are used in a page. So if actually you do not need to add relevant information to those elements or to your web page itself, with a proper use of HTML tags you could easily do without mainContentOfPage or even WebPage.
Given the following html, how to get a list of tuple (TIME, COMMENT, OOXX) by XPath? I think I need to make use of XPath Axes but not sure how to use that. Furthermore, the OOXX seems not to belong to any tags!
<div class="contents">
<p></p>
<div class="meta">TIME</div>OOXX
<div class="comment">COMMENT</div>
<p></p>
<div class="meta">TIME</div>OOXX
<div class="comment">COMMENT</div>
<p></p>
<div class="meta">TIME</div>OOXX
<div class="comment">COMMENT</div>
<p></p>
<div class="meta">TIME</div>OOXX
<div class="comment">COMMENT</div>
<p></p>
</div>
How you'll want to deal with multiple such tuples in the input XML will depend on your requirements and the facilities of the context of the XPath evaluation.
However, here's how to get the first TIME:
/div/div[#class="meta"][1]/text()
Here's how to get the first COMMENT:
/div/div[#class="comment"][1]/text()
And here's how to get the first OOXX:
/div/div[#class="meta"][1]/following-sibling::text()[1]
HTML structure looks like this:
<div class="Parent">
<div id="A">more tags and text</div>
<div id="B">more tags and text</div>
more tags
<p> and text </p>
</div>
I would like to extract text just from the parent and the tags apart from the A and B children.
I have tried
/div[#class='Parent']//text()
which extracts text from all the descendant nodes, so a made a constraint like /div[#class='Parent']//text()[not(self::div)]
but it did not change a thing.
Thanks for any advice
/div[#class='Parent']/*[not(self::div and (#id='A' or #id='B'))]//text() | /div[#class='Parent']/text()
I unfortunately have to scrape a webpage, and I'm doing so via Google Docs.
The document looks like this:
<div class='search'>
<div class='new'>
<img src="product1.png" title="Product 1 - €2.40"/>
</div>
<div class='new dupe'> <!-- this one appears dimmed: there's a better offer -->
<!-- I don't want these in my results -->
<img src="product1.png" title="Product 1 - €2.70"/>
</div>
</div>
The current xPath looks like this:
//div[#class='search']//#title
How can I modify it? I could do
//div[#class='search']//div[not(#class='dupe')]//#title
...but that won't work because no item actually has the list of classes being exactly 'dupe'.
/div[#class='search']/div[not(contains(#class, 'dupe')]//#title
I would try to avoid using // and be more specific:
/div[#class='search']/div[not(contains(#class, 'dupe')]/img/#title