A Blogdown Reminder

Photo by Josue Isai Ramos Figueroa on Unsplash

Où est quoi ?

Ce premier essai de blogdown m’a paru être un jeu de piste. Pour pouvoir modifier une petite partie, un bout de texte, etc. il faut savoir où cela se cache et comment ça se calibre.

Cette note est écrite pour répondre à ce besoin ressenti.

my new2 screenshot

A gauche:

Les éléments de gauche sont modifiés dans : content\authors\admin\_index.md. Le YAML, définit plusieurs sections: auteur, rôle, organisation et les liens des réseaux sociaux qui apparaissent à gauche

La description de l’auteur

La section authors: définie plusieurs champs :

  • Nom et prénom: name:
  • Rôle: role:
  • L’organisation: dans le YAML. En section organizations. On précise le name: et l’ url:
  • Les icônes de liens (LinkedIn, ResearchGate, etc.): content\authors\admin\_index.md : dans le YAML. En section social, on précise l’icône (à la fois le nom de l’icône dans le paquet d’où il est téléchargé ) et le lien interne (une autre page du blog - cv ou résumé ou contact) ou externe (une url)
authors:
name: MySelf
role: My role
bio: My research interests include...
organizations:
- name: The best Institution ever 
  url: http://genie-industriel.grenoble-inp.fr//
social:
- icon: paper-plane
  icon_pack: fas
  link: /contact

Remarques

  • La bio: bio: : La bio apparaît en bas de page des diffétentes pages du blog: des posts, des projets, le résumé, etc.
  • Attention, l’indentation est sensible ici

A droite

Deux fichiers décrivent cette partie

  • Le titre: est dans content/home/about.md
  • l’image: content\authors\admin\_index.md en dehors du / après le YAML
  • le petit texte: content\authors\admin\_index.md en dehors du /après le YAML

Les listes automatiques :

  • Interests: content\authors\admin\_index.md: En section interests, on décrit une liste à points d’intérêts
  • Education: content\authors\admin\_index.md: En section education, on décrit un ensemble de courses. Chaque course est décrit par son nom course, son institution et une annèe year
interests:
- I 
- and myself
education:
  courses:
  - course:  Economics
    institution:  University
    year: 2017

Les éléments constituant la page

Ordre des éléments et sections sur la page

L’ordre d’affichage des sections sur la page principale vient du poids ou rang défini sur chaque fichier de définition de la section :

content/home/myfile.mdmyfile.md pourra être skills.md ou publications.md.

Dans le toml de chaque fichier de section, on retrouve les champs :

  • widget, headless dont la définition m’échappe encore (malgré https://sourcethemes.com/academic/docs/page-builder/). widget="pages" affiche la section complète, alors que widget="portfolio" affiche une mosaique clicable.

  • active: pour rendre actif ou nom un widget
  • weight: pour définir la position de la section en page principale
  • title et subtitle: définissent les titres

widget = "pages"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = false  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 90  # Order that this section will appear.
title = "Publications"
subtitle = ""

Le menu en haut de page

Il se définit dans config/_default/menus.toml On définit une section par l’accroche main définissant name l’élément de menu, url indiquant le lien interne de la page ciblée et weight précisant le poids ou le rang dans l’ordre d’apparition du menu. La liste et l’ordre de éléments du menus peuvent être différents de ceux affichés sur la page principale.

La balise associée au bouton est le nom du fichier associé présent dans content/home. Par exemple pour le bouton Projects du menu, on précise un name="Projet" et un url = "#projects" qui correspond au fichier projects.md.

[[main]]
    name = "cv"
    url = "#cv"
    weight = 70

Les contacts et la map

Dans config/_default/params.toml

La mise en page

Dans config/_default/params.toml

# Color theme.
#   Choose from `default`, `ocean`, `forest`, `dark`, `apogee`, `1950s`, `coffee`, `cupcake`, `strawberry`.
color_theme = "iragael"


# Override the theme's font set (optional).
#   Latest font sets (may require updating): https://sourcethemes.com/academic/themes/
#   Browse built-in font sets in `themes/academic/data/fonts/`
#   Browse user installed font sets in `data/fonts/`
font = "iragael"

# Choose a font size.
# Sizes: XS (extra small), S (small), M (medium), L (large - DEFAULT), XL (extra large)
font_size = "S"

Fonctions de base

blogdown::build_site()

Workflow :

  1. Installer R et RStudio
  2. Créer un BlogDown avec RStudio
  3. Créer son GitHub
  4. Installer Git sur sa machine (certainement optionel, sauf si instal de l’add-on Git dans RStudio ?)
  5. Synchroniser Git et RStudio
    • Commit
    • Push
  6. Créer un compte Netlify ou relier Netlify au compte GitHub
  7. Depuis Netlify,
    • créer un nouveau site web, en ciblant un repo de GitHub
    • Accéder aux option de GitHub pour autoriser l’accés aux repo depuis Netlify
    • Attention (2020: ajouter une variable : HUGO_VERSION : 0.56.0 - bien faire attention au trailing 0)
  8. Laisser mouliner.

Des fois ça marche… d’autres moins

REste à voir

  1. comment changer le thème hugo ‘on live’
  2. Comment utiliser la clé de connexion ssh entre Rstudio et GitHub

Synchronising with GitHub

R packages Git and GitHub:

http://r-pkgs.had.co.nz/git.html#git-init

CAcher une section

Dans \content\home\ on trouve les fichiers de design des sections, dont l’option active=true/false

Inserer une image dans un post

L’insertion d’image reste une opération délicate pour moi.

J’énumère ci-dessous plusieurs méthodes. Toutes ne fonctionnent pas et je ne sais pas encore pourquoi…

Cela nécessite de copier l’image à charger dans un dossier présent dans static (éventuellement le dossier du post ou non)

![Hey](/Resume/Resume_files/header_ECUREUIL_8563bfcd1b052ba889107feeaee32b8e.jpg)

Hey

Hey

<img alt = 'my new screenshot' width='200' src='/Resume/Resume_files/header_ECUREUIL_8563bfcd1b052ba889107feeaee32b8e.jpg' />

my new screenshot

<img alt = 'my new screenshot' width='600' height='80' src='/authors/admin/josue-isai-ramos-figueroa-qvBYnMuNJ9A-unsplash.jpg' />

my new screenshot

![Iragaël Joly](/Resume/Resume_files/header_ECUREUIL_8563bfcd1b052ba889107feeaee32b8e.jpg){width=50%}

Iragaël Joly

Iragaël Joly

Insertion avec informations, captions, etc.

<figure class="kg-card kg-card-image kg-card-hascaption">
    <img src='/authors/admin/josue-isai-ramos-figueroa-qvBYnMuNJ9A-unsplash.jpg' alt="Photo by" class="kg-image" 
    <figcaption>Photo by Josue Isai Ramos Figueroa  <a href="https://unsplash.com/photos/qvBYnMuNJ9A">on Unsplash </a>
    </figcaption>
</figure>
<img src=‘/authors/admin/josue-isai-ramos-figueroa-qvBYnMuNJ9A-unsplash.jpg’ alt=“Photo by” class=“kg-image”
Photo by Josue Isai Ramos Figueroa on Unsplash

Insérer une image dans un en-tête de post:

On précise les éléments: caption et focal point. Mais l’image doit être dans le dossier du post avec le nom featured.jpg. Remarque, le nom du fichier du post est index.Rmd

image:
  caption: Photo by Josue Isai Ramos Figueroa  <a href="https://unsplash.com/photos/qvBYnMuNJ9A">on Unsplash </a>
  focal_point: 'center'

Insérer une image dans le coeur d’un post

On insère l’image par l’instruction suivante. Le fichier image est dans le dossier du post (une copie dans static\img\ semble utile)

<img alt = 'my new2 screenshot' width='600' height='200'  src='Tuto1.jpg' />

Website icon

Save your main icon and mobile icon as square PNG images named icon.png and apple-touch-icon.png, respectively. Place them in your root static/img/ folder.

md Markdown Syntax

Références

Avatar
Iragaël Joly
Assistant Professor, Doctor in Economics & Data Scientist

My research interests include consumption and behavior econometric modelling applied to transport, food and innovative products.