I'm making an android app, using apache cordova. I want to know how to make a system of "posts" as in Jekyll, it simply picks up text files and transforms them into post. For each .txt file it creates a post. How can I do this?
For example, in the .txt file I have:
### Titulo
## Texto
# link do botão
And it generates a post type this:
I've assembled the CSS below. I think it does what you want. I do not know if it is exactly in accordance with the original because you did not post the image in its original resolution, but anyway, it's very close.
The HTML to be populated is what is represented by <div> of class caixa . This <div> is created by jQuery in the fazCaixa function using a piece of TXT like this:
Torre de Belem ### Torre de Belém is located in the parish of Belém, municipality and district of Lisbon, in Portugal. On the right bank of the river Tagus, where Belém beach once existed, it was originally surrounded by waters around its perimeter. ### Google Maps
This format corresponds to the title followed by the content and then the button text, separated by ### . It should not be too difficult to make adaptations in the format of the text if it is necessary in case some other format is desirable.
Click the blue Run button below to see the result.
function fazCaixa(txt) {
var parts = post.split("###");
var titulo = parts[0];
var texto = parts[1];
var botao = parts[2];
var esqueleto = $(""
+ "<div class='caixa'>"
+ " <h2></h2>"
+ " <p></p>"
+ " <div class='bt'>"
+ " <button></button>"
+ " </div>"
+ "</div>"
);
var div = $(esqueleto);
div.find("h2").html(titulo);
div.find("p").html(texto);
div.find("button").html(botao);
$(".area-externa").append(div);
}
var post = "Torre de Belem###A Torre de Belém localiza-se na freguesia de Belém, concelho e distrito de Lisboa, em Portugal. Na margem direita do rio Tejo, onde existiu outrora a praia de Belém, era primitivamente cercada pelas águas em todo o seu perímetro.###Google Maps";
fazCaixa(post);.area-externa {
width: 330px;
}
.caixa {
background-color: rgb(238, 238, 238);
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
font-family: sans-serif;
box-shadow: 2px 2px 6px rgb(160, 160, 160), -3px 0 rgb(0, 123, 255);
border-radius: 3px;
}
.caixa p, .caixa h2 {
margin: 0;
padding: 0;
}
.caixa p {
margin-top: 15px;
margin-bottom: 15px;
}
.caixa .bt {
text-align: right;
}
.caixa .bt button {
background-color: rgb(0, 123, 255);
color: white;
padding: 12px;
border-style: none;
border-radius: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="area-externa">
</div>