Manual de Linkback per drupal 8

¡¡Aquesta entrada té un contingut amb llenguatge tècnic, sobre com instal·lar i desenvolupar un blog federable-federat dins la blogosfera!!

Instal·lació i configuració

Avís: el mòdul linkback està en desenvolupament, i tot i que hi ha una versió en dev, que sigui en dev significa que to el que explico a continuació és susceptible a canvis.

Descarrega el módul de linkbacks i activa linkback_pingback i linkback webmention. El mòdul linkback s'activarà com a dependència. Com que té dependències d'algunes llibreries via composer, s'haurà de modificar el composer.json de l'arrel, això s'haurà de fer cada cop que s'actualitzi el core:

  • Activar el repo de github per la lib de microformats/test , dependència de mf2:

    • composer config repositories.1 vcs https://github.com/microformats/tests
  • Activar la llibreria de mf2:

    • composer require mf2/mf2:dev-master
  • Activar el client de webmention :

    • composer require indieweb/mention-client:dev-master
  • Afegim el camp linkbacks al tipus de contingut que vulguem (de moment només es pot associar a entitats de tipus node [contingut]). Amb això ja tindrem la base.

  • Hi han poques coses a configurar: si vols processar els linkbacks rebuts o enviats via cron o manualment, per llocs en producció més val confiar en el cron. Arribats a aquest punt quan rebem pingbacks/webmentions la nostra web ho porcessarà.

  • Tot i això podem treure més suc de les relacions de web a web i dotar d'una semàntica bàsica el nostre site, podem triar microformats2 o rdf. Tot i que amb RDF podrem construir descripcions més acurades, com a punt de partida i tenint en compte que volem tenir un blog pel segle XXI amb microformats ja en tindrem prou. En una propera entrada de blog ja especificaré com es podria fer per dotar de descriptors rdf el nostre site i adaptar el mòdul linkbacks per tal que processi rdf's més complexes.

Oferta microformats2

Pel que fa al processament de microformats2 el mòdul linkbacks ja té tot el que ha de tenir, fa servir la llibreria mf2. El que no tindrem preparat és l'oferta de microformats al nostre lloc web. Per fer-ho haurem de modificar una mica el tema que haguem escollit pel nostre drupal. En el nostre cas fem servir un subtema de foundation 6, però es pot aplicar al que vulguem. Hi han dos entitats que necessiten ser modificades:

  • El tipus de contingut que fem servir per crear entrades de blog. Normalment article o blog_entry.

  • L'usuari. Això es configura al directori themes/nomdeltema/nomdeltema.theme i s'afegeixen les plantilles pertinents al directori themes/nomdeltema/templates/.

Theming del tipus de contingut

Hi han algunes aplicacions globals: e-content pel que fa a body i p-name pel que fa a títols. Així doncs en tots els camps on s'utilitzi aquests camps afegirem la classe corresponent. Al fitxer nomdeltema.theme:

 /**
  * Implements template_preprocess_field().
  */
 function planet_founding_preprocess_field(&$variables) {
  $element = $variables['element'];
  switch($element['#field_name']){
    case 'body':
      $apply_mf = "e-content";
      break;
    case 'title':
      $apply_mf = "p-name";
      break;
  }
  if (!empty($apply_mf)){
    $variables['attributes']['class'][] = $apply_mf;
    $variables['items'][0]['content']['#options']['attributes']['class'][] = $apply_mf;
  }
}

Un cop fet això podem modificar les plantilles per tal que s'afegeixin algunes classes i per adaptar l'estructura del DOM. A node.html.twig:

/**
 * El tag de html 'article' es descriu com a: h-entry.
 *
 * @todo Remove the id attribute (or make it a class), because if that gets
 *   rendered twice on a page this is invalid CSS for example: two lists
 *   in different view modes.
 *
 * @ingroup themeable
 */
#}
{# !MF2 Afegim la descripció de h-entry a l'etiquta article #}
<article id="node-{{ node.id }}" {{ attributes.addClass('h-entry') }} >
{# !MF2 Afegim el link a la url del node amb text buit i la propietat u-url #}
  <a class="u-url"  href="{{ url }}"></a>
  {{ title_prefix }}
  {% if teaser %}
{# !MF2 En cas de teaser afegir la propietat p-name al títol#}
    <h1{{ title_attributes.addClass('teaser').addClass('p-name') }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h1> 
  {% elseif not page %}
    <h2{{ title_attributes }}>
{# !MF2 En cas que no sigui teaser i tampoc pàgina completa afegir la propietat p-name al títol #}
      <a href="{{ url }}" rel="bookmark" class="p-name" >{{ label }}</a>
    </h2>
  {% elseif page %}
{# !MF2 En cas que sigui pàgina completa afegir la propietat p-name al títol #}
    <span class="hidden p-name">{{ label }}</span>
  {% endif %}
  {{ title_suffix }}
  {% if display_submitted %}
    <small>
     <p>
      <div class="posted row">
        <div class="columns shrink align-self-middle">
          <div class="float-left">
            {{ author_picture }}
          </div>
          <div{{ author_attributes.addClass('float-left').addClass('submitted') }}>
{# !MF2 Afegim la propietat de data del post dt-published #}
            {% trans %}Submitted by {{ author_name }} on <time class="dt-published">{{ date }}</time>{% endtrans %}
            {{ metadata }}
          </div>
         {% if content.field_tags|length > 2 and not is_front %}
           <div class="tags fi-pricetag-multiple">
             {{ content.field_tags }}
           </div>
         {% endif %}
        </div>
      </div>
     </p>
    </small>
  {% endif %}
  {# We hide the comments and links now so that we can render them later. #}
  <div{{ content_attributes }}>
{# En cas que fem servir un tipus de comentari diferent per cada tipus de contingut , Amaguem els comentaris associats al tipus de contingut per poder-lo mostrar després #}
    {{ content|without('comment','comment_node_blog', 'links', 'field_tags') }}
  </div>


  {{ content.links }}
  {{ content.comment }}
</article>
<hr class="superspace">

Theming de l'usuari

Pel que fa a l'usuari s'ha d'afegir microformats a l'username insertat a dins el tipus de contingut(modificant la plantilla username), i també a la pròpia pàgina de l'usuari(full). A la pàgina pròpia de l'usuari també afegirem la variable view_mode per tal de poder treure etiquetes només en cas que es mostri l'usuari amb el display 'full'.

Haurem d'afegir les propietats de l'usuari:

- url

- nom d'usuari

- thumbnail

Amb una estructura(especificada a http://microformats.org/wiki/microformats-2) similar a: http://microformats.org/wiki/microformats-2 :

<a class="h-card" href="http://url_de_l_usuari">
  <img alt="nom de l'autor" src="urldelaimatge.jpg" />
</a>

Pel que fa a thumbnail afegirem la variable userthumb als dos llocs per disposar de la url a la imatge de l'avatar sencera, tant des del node com des de l'usuari. A nomdeltema.theme:

/**
 * Implements template_preprocess_username().
 */
function planet_founding_preprocess_username(&$variables){
  if (!$variables['account']->user_picture->isEmpty()) {
    $fid = $variables['account']->user_picture->first()->target_id;
    $file = \Drupal\file\Entity\File::load($fid);
    $variables['user_thumb'] = file_create_url($file->getFileUri());
  }
 }

 /**
 * Implements template_preprocess_user
 *
 * Add template suggestions and classes
 */
function planet_founding_preprocess_user(&$variables) {
  if (!$variables['user']->user_picture->isEmpty()) {
    $variables['user_thumb'] = file_create_url($variables['user']->user_picture->entity->getFileUri());
  }
  $variables['view_mode'] = $variables['elements']['#view_mode'];
}

Pel que fa a l'estructura del dom username dins cada entrada de blog es mostrarà amb la plantilla username.html.twig:

{#
/**
 * @file
 * Theme override for displaying a username.
 *
 * Available variables:
 * - account: The full account information for the user.
 * - name: The user's name, sanitized.
 * - extra: Additional text to append to the user's name, sanitized.
 * - link_path: The path or URL of the user's profile page, home page,
 *   or other desired page to link to for more information about the user.
 * - link_options: Options to set on the \Drupal\Core\Url object if linking the
 *   user's name to the user's page.
 * - attributes: HTML attributes for the containing element.
 *
 * @see template_preprocess_username()
 * - user_thumb: the thumbnail 
 */
#}
{% if link_path -%}
  <a href="/{{ link_path }}" class="visually-hidden p-author h-card" rel="author" title="{{ name  }}">{{ name  }}
    <img src="{{ user_thumb }}" alt="{{ name }}" />
  </a>
  <a{{ attributes }}>{{ name }}{{ extra }}</a>
{%- else -%}
  <span{{ attributes }}>{{ name }}{{ extra }}</span>
{%- endif -%}

Pel que fa al display de l'usuari sencer modificarem la plantilla user.html.twig afegirem una estructura similar a:

+ *
+ * - view_mode: the rendered view mode string.
  */
 #}
-<article{{ attributes }}>
+<article{{ attributes.addClass('h-card') }}>
+{% if view_mode == "full" %}
+  <a class="visually-hidden p-name u-url" href="user/{{ user.uid.value }}" rel="me" title=>{{ user.name.value }}</a>
+  <img class="hidden u-photo" src="{{ user_thumb }}" />
+{% endif %}

 

Dotar de semàntica els links que afegim al cos de l'entrada de blog

Per tal de poder afegir semàntica als links que afegim via l'editor de text enriquit podem instal·lar el mòdul editorsemanticlink que ens permetrà dotar de semàntica a cada link a que afegim via l'editor ckeditor. (Configurar correctament a admin/config/content/formats/manage/basichtml o admin/config/content/formats/manage/fullhtml afegint atributs class i rel a l'etiqueta a) Amb això ja podrem afegir links semàntics al cos de text de les entrades de blog.

Consum de linkbacks

Cada cop que rebem un linkback s’anirà al lloc d’origen i s’intentarà fer un parsing de la metainformació del lloc que ens menciona, si té microformats2 o RDF crearà un array json que s’emmagatzemarà al camp metainfo del linkback. Si volem utilitzar aquesta metainformació (per exemple per fer llistats de linkbacks filtrables o agrupables), hauriem de mapejar camps del json a camps del linkback.

Per fer-ho haurem d’anar a admin/structure/linkback/manage i afegir els camps que vulguem. El mapejarem anant a l’edició del field, i al camp de text afegirem la proietat de l’array json: per exemple si creem el camp autor, al mapeig hi posarem «author/name» per agafar la propietat:

{ «autor» : {«name» : «alison»}, «url»: «http://myurl» }

Si es vol agafar la propietat url, simplement es posa «url»

Cada cop que es guardi processarà el mapeig i assignarà el valor.

Pel mapeig hi ha més informació a: https://www.drupal.org/docs/8/modules/linkback/metainfo-mapping

Mostrar linkbacks

Un cop fet això ja podrem rebre i enviar linkbacks semàntics i quedarà mostrar a cada entrada de blog un comptador i el llistat de comentaris.

Per tenir-ho podem utilitzar el módul Linkback semantic. Que crea el camp semantic_type a l’entitat linkback i instal·la un bloc.

Aquest es pot configurar perquè només es mostri als tipus de contingut que ens interessi i farà que quan rebem linkbacks i aquests siguin categoritzables semànticament, es pugui veure un comptador per tipus i un llistat de comentaris agrupats per tipus.

També disposa d'una plantilla per tal de poder fer el theming corresponent. Si no convenç la llista de comentaris, es pot fer amb views.

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Semantic linkbacks

This site uses semantic webmentions to interact between sites and build federated conversations.