Closed pablormier closed 10 years ago
If the jumbotron
is in a single page only, then you can just add HTML to that page directly. It will be rendered as part of the page 'content'.
If you want to add something to the template, I think you will need to fork the skin and edit the template.. I think that would be the "Maven way" of customizing the appearance. Arbitrary HTML code is a very open-ended feature - changing the skin itself may be more flexible for such cases.
Thanks @andriusvelykis. But, for the first case, how do you add HTML directly as part of the content? In my case, I want to add a jumbotron just in the index, which is generated using markdown (index.md
). Is there any way to add html in the site.xml
file (or embedding it in markdown files), or with "adding HTML directly to the page" you mean to simply create an index.html with the additional component?
I think it should work both ways - either code everything in HTML and create the index.html
file as your page content, or just add the HTML to the Markdown file (index.md
). Markdown allows arbitrary HTML within the file - it will be rendered as expected. I am not sure how will my sectioning work in that case, but please do try.
I've tried it. It does not work as expected (<div>
tags are removed in the output html). Maybe is a feature not supported by Doxia 1.3. Anyway, I will try to do it later with XDoc and <source>
tags. In the worst case, a custom index.html
or even inserting the code dynamically with javascript would work for me. Thanks again.
Just in case someone is interested in this topic, it seems that there is a confirmed bug in Doxia =< 1.5 which causes Doxia to ignore <div>
elements in Markdown files https://jira.codehaus.org/browse/DOXIA-515. The problem is fixed in the (still unreleased) Doxia 1.6.
Super! Good catch :)
So does it work correctly with Doxia 1.6? I.e. can you add the jumbotron directly to the page?
Unfortunately I could not find Doxia 1.6 snapshots out there. I will try it as soon as it is available.
I was playing again with different configurations and I've found that fortunately, there is an old version of doxia 1.0 that seems to include the html tags pretty well. To use it, I added the following plugin dependency to the maven plugin:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-site-plugin</artifactId>
<version>3.3</version>
<dependencies>
...
<dependency>
<groupId>net.ju-n.maven.doxia</groupId>
<artifactId>doxia-module-markdown</artifactId>
<version>1.0.0</version>
</dependency>
</plugin>
Then, in order to add the jumbotron element, I've defined a new columns
section in the site.xml
. Here is how my config looks like:
<pages>
<index>
<sections>
<!-- section used for the Jumbotron -->
<columns>1</columns>
<!-- rest of sections -->
<columns>3</columns>
<body />
<sidebar />
</sections>
</inde>
...
</pages>
I've used <columns>1</columns>
instead of another section <body>
cause the first one generates a correct <div class="span12">
whereas the <body>
generates a <div class="span8">
.
Then, in the index.md file, I've just added the jumbotron html snippet in the first section:
<div class="jumbotron">
<div class="container">
<center>
<p><img alt="logo" src="logo.png"></img></p>
<p>Slogan</p>
<p><a class="btn btn-primary btn-lg" role="button">Download</a></p>
</center>
</div>
</div>
---
## <i class="fa fa-rocket"></i> Column 1
Content of the column 1
## <i class="fa fa-cogs"></i> Column 2
Content of the column 2
## <i class="fa fa-github-alt"></i> Column 3
Content of the column 3
Note that now I can also include bootstrap glyphicons or font-awesome icons just adding the
<i class=..></i>
in the markdown file :D.
However, this version of the markdown plugin has other drawbacks. For example, the generation of source code snippets does not work as expected (it removes the indentation of the code). Let's see if all these things work well in doxia 1.6.
By the way, here is the final result with Reflow Skin using Doxia 1.0 http://citiususc.github.io/hipster/. The integration of the jumbotron and the awesome font icons worked really nice :)
Awesome! Looks great :)
Is there any way to easily embed custom HTML code? what I know so far is that you can add custom html in the decoration
head
tag, but I'm trying to add bootstrap components (like jumbotron) and thehead
tag is not suitable for this purpose.Other option that I considered is to create a custom
jumbotron
component such as the<carousel>
to inject custom bootstrap components but this requires to modify the custom reflow velocity template. A different (maybe better) option is to use javascript code to inject specific html in the document using thehead
tag. Any ideas? thx