Simple static HTML template

Simple template

For those who wish to avoid writing HTML, a very simple template has been built with:

• 6 HTML pages
• CSS
• some images
• 5 text files (containing the information you want to display)
• some JQuery scripts

An example of this template is available at the following address https://perso.isima.fr/~wiltestor/template_simple/index.html

Download the simple template

Some information about these pages:

• the email is obfuscated to prevent spam
• The "Publications" tab opens an iframe on the HAL website displaying your publications, if your HAL account is up to date, your personal page will be too.
• The colors used on these pages correspond to those of the LIMOS graphic charter

It is possible to quickly configure these pages by editing the text files and making modifications at specific locations

Modifying information

• Edit the content of the text files to display the desired information (nomprenom.txt, pedagogie.txt, etc.). All text files are located at the root of public_html Do not touch the tags.

• Save your photo in place of the existing one in the public_html/img directory

respect the name and format of the file: photo.png

• Save your CV in place of the existing one in the public_html/img directory

respect the name and format of the file: cv.pdf

• Edit your email, modify the index.html file On line 37, replace the four name and first name fields with your email address href="mailto:bastien.doreau(at)isima.fr">bastien.doreau (at) isima.fr becomes href="mailto:prenom.nom(at)isima.fr">prenom.nom (at) isima.fr

• Edit the link to your publications, modify the publications.html file On line 36, replace the two name and first name fields with yours <iframe ... hal.archives-ouvertes.fr/search/index/?q=Bastien+Doreau" becomes <iframe ... hal.archives-ouvertes.fr/search/index/?q=Prenom+Nom"

Bootstrap template

Presentation

A slightly more complex template has been built in HTML, JS and CSS, it allows:

• a rendering close to the LIMOS website
• responsive management via Bootstrap
• automatic display of publications deposited in HAL from the researcher's idHal

An example of this template is available at the following address https://perso.isima.fr/~wiltestor/template_bootstrap/index.html

Download the Bootstrap template

It is possible to quickly configure these pages by editing the text files and making modifications at specific locations

Page architecture

______________________________________
|                                     |
|               HEADER                |
|_____________________________________|
|     |                               |
|  M  |         CONTENT               |
|  E  |                               |
|  N  |                               |
|  U  |                               |
|     |                               |
|     |                               |
|     |                               |
|_____|_______________________________|
|              FOOTER                 |
|_____ _______________________________|

The HTML pages "Accueil", "Recherche", "Enseignement" and "Infos supplémentaires" are built on the same model.

Each of these pages integrates:

• a <div id="header"> tag for the logo and name
• a <div id="navigation"> tag for the menu on the left
• a <div id="footer"> tag for the purple block at the bottom of the page.

A script at the end of the page will replace these tags with HTML pages contained in the template folder, either "header.html", "navigation.html" and "footer.html"

Thus, modifying one of these 3 pages will be reflected on all content pages.

The content you want to display must be inserted between the parts <!-- CONTENT --> and <!-- FIN CONTENT --> (NB: These elements are not HTML tags but comments)

This template includes a CSS file (main.min.css) and a JavaScript file (main.min.js) contained respectively in the "css" and "js" folders

Integrating a title-menu block

This type of block is an element generated by Bootstrap. In HTML, it appears in the form:

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Some info...</h3>
    </div>

    <div class="panel-body">
        ... additional
    </div>
</div>

To modify the title, edit it between the tags <h3 class="panel-title"> and </h3>

For the content, edit it between the following tags <div class="panel-body"> and </div>

To add a block, copy and paste the content of the HTML block above and modify the title and content.

Edit name and first name in the Header

Edit the file template/header.html and replace line 32 <b>Pascal LAFOURCADE</b> with <b>Firstname LASTNAME</b>

Edit the home page

The home page contains:

• a title between <h2> and </h2> tags
• text with links
• a title-content block
• a set of photos (books)
• a 3-column title-content block
• text with bullet points

All this information is found between <!-- CONTENT --> and <!-- FIN CONTENT -->

Edit publications on the Research page

A script will retrieve from HAL all publications linked to an author identifier called idHal

This script uses a web service on HAL and retrieves a result in JSON which is processed and elements are formatted and displayed.

For information, the query sent is:

https://api.archives-ouvertes.fr/search/?q=authIdHal_s:"+idHalUser+"&start=0&rows=500&fl=uri_s,authFullName_s,title_s,docType_s,keyword_s,producedDate_s,journalTitle_s,conferenceTitle_s&sort=producedDate_s%20desc&wt=json

To modify this idHal, change line 109 the content of the variable idHalUser with your idHal

var idHalUser = "pascalafourcade"; → var idHalUser = "bdoreau";

No idHal yet? Create one here

Edit responsive content

To have responsive content, Bootstrap has imagined a block system with 12 units per line

When the media is smaller, the blocks that are normally side by side are placed one below the other.

It is therefore not recommended to use tables but rather this block system for this template so that it is fully responsive

The principle is that a line can be broken down into 12 units, either 6 units + 6 units OR 4 units + 4 units + 4 units OR 1 unit + 10 units + 1 unit OR ...

The idea being that the total number of units per line is 12.

In the code, this translates as follows:

<div class="row">

    <div class="col-lg-3 col-md-3 col-sm-3">
        Content 1st Block of 3 units
    </div>

    <div class="col-lg-5 col-md-5 col-sm-5">
        Content 2nd Block of 5 units
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
        Content 3rd Block of 4 units
    </div>

</div>

First, create a tag to define the line with <div class="row"> which you close at the end with </div>

Then inside, a tag indicating the number of units of the block if it is large (large), medium (middle) or small (small) <div class="col-lg-3 col-md-3 col-sm-3">

It is possible to have lines nested in others, for example:

<div class="row">

    <div class="col-lg-3 col-md-3 col-sm-3">
        Content 1st Block of 3 units which will also contain a line of 12 blocks
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                BLABLA
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                BLOBLO
            </div>
        </div>
    </div>
    ...

French-English Bootstrap template

Another template has been defined with the possibility of changing languages (FR / EN). It is heavier to manage due to duplicated HTML pages.

An example is available here https://perso.limos.fr/~basdorea/

Its principle lies in another navigation_en.html menu accessible via the English flag and directing to English pages.

Thus, in this template you will have the files index.html, index_en.html, recherche.html, recherche_en.html, projets.html, projets_en.html, peda.html, peda_en.html, infosup.html, infosup_en.html

Download the Bootstrap_en template

My complete personal site with Pelican

For a personal site allowing the generation of static pages using markdown with Pelican:

This solution notably allows the management of internationalization, writing mathematical equations, a search engine, ...