Il y a temps: comment afficher les dates de publication comme le temps depuis publié

Les plats clés

• Affichage des dates de publication en tant que temps depuis publié, telles que «publié il y a 2 minutes», peut augmenter le sentiment de fraîcheur et d'engagement avec votre public, par opposition aux formats de date traditionnels comme «Publié le 12 septembre 2016».
• Une fonction PHP appelée time_ago () peut être utilisée pour convertir un horodat Unix en un format lisible par l'homme tel que «maintenant», «il y a 3 minutes», «il y a 8 heures», «hier» ou des dates spécifiques si la L'activité s'est produite il y a plus de deux jours.
• L'élément HTML peut être utilisé pour présenter ces dates dynamiques, avec une valeur de secours fournie par l'attribut [DateTime] pour garantir une meilleure accessibilité. L'attribut [Title] peut être utilisé pour afficher la date exacte lorsque le curseur est placé sur le texte de la date.
• JavaScript peut être utilisé pour incrémenter les dates en temps réel, similaires à Facebook. Cela peut être une belle amélioration pour certains types de sites Web où les mises à jour en temps réel sont importantes.

Il est courant de présenter les dates sur le Web dans un format tel que publié le 12 septembre 2015 ou le 09/12/2015, 09:41:23 et 2015-09-12.

Chacun de ces exemples indique la date complète et / ou l'heure d'une sorte d'activité - que ce soit un article publié, ou un commentaire de lecteur, ou peut-être une vidéo téléchargée.

Les formats de date comme celui-ci peuvent sembler parfaitement raisonnables. Après tout, ils sont informatifs et lisibles par l'homme! Eh bien oui, mais «lisible par l'homme» n'est pas nécessaire que les utilisateurs soient nécessaires pour comprendre à quel point l'activité s'est produite récemment. Le Web est un endroit rapide, et donner à votre contenu un sentiment de fraîcheur pourrait être la clé pour s'engager avec votre public! Voyons donc comment nous pourrions améliorer ces formats de date courants.

une petite astuce

Encore une fois, disons que vous avez trébuché sur un article qui a été publié il y a quelques minutes, mais la sous-position du post indique ceci:

publié le 12 septembre 2016

… ou ceci:

Publié le 2016-09-12, 09:41:23

Le problème avec ces messages est qu'ils ne communiquent pas le sentiment que votre site Web vient d'être mis à jour ou que vous le faites très souvent. Donc, c'est sûrement plus invitant - et beaucoup plus clair - à présenter le temps de cette façon:

publié il y a 2 minutes

Vous avez vu cela plusieurs fois auparavant? Mais combien d'entre vous ont construit cela dans vos projets? Prenez Facebook par exemple: à quoi cela ressemblerait-il s'ils présentaient les dates du dernier contenu comme dans mon premier exemple? Comparez les colonnes gauche et droite dans l'image suivante:

Les dates de la colonne de gauche ne sont pas si attrayantes, n'est-ce pas? Je parierai que les exemples de droite vous sont plus attrayants. Savoir que le contenu est frais est très important - en particulier sur les réseaux sociaux, où les gens sont plus susceptibles d'ignorer le contenu vieux ou non clairement horodomagistique.

Impression de meilleures dates

Afin de présenter de meilleures dates , vous aurez besoin de scripts côté serveur et j'utiliserai PHP pour cette démo. J'ai créé une petite fonction appelée time_ago (), comme indiqué ici:

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

Regardons quelques détails de ce code.

• Le seul argument que vous devez fournir est $ Temps, et c'est une date dans Unix Timestamp - comme Time_ago (1442082961).
• Exemples de ce que la fonction reviendra en ce qui concerne le temps de $ passé:
  • maintenant - Si cela s'est produit il y a moins de 60 secondes (TimeBefore_Now)
  • il y a 3 minutes - s'il y a moins de 60 minutes (TimeBefore_Minute (s))
  • il y a 8 heures - si il y a moins de 24 heures (TimeBefore_hour (s))
  • Hier - Si il y a moins de 48 heures (TimeBefore_yesterday)
  • 12 SEP - Si plus de 48 heures et se sont produits cette année (TimeBefore_Format)
  • 12 sept. 2015 - Si cela ne s'est pas produit cette année (TimeBefore_format_year).
• Les définitions PHP sont destinées à séparer les données de type configuration du code de fonction (il serait une bonne pratique de mettre toutes les occurrences Define () dans un fichier de configuration et la fonction dans le fichier des aides).
• {num} dans les définitions sont remplacées par des nombres réels (minutes ou heures).
• J'utilise strftime () au lieu de Date () pour éviter les problèmes de langue / région.

Donc, par exemple, si vous voulez obtenir ceci sur votre site WordPress, vous écririez simplement ceci:

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

ou si c'était un autre CMS hypothétique:

<?=time_ago( $post->date_created )?>

ou la manière statique:

<?=time_ago( 1447571705 )?>

Accessibilité et convivialité

Il y a un élément HTML spécifique que vous devez utiliser pour présenter les dates: . Dans notre cas, lorsque vous utilisez la fonction Time_ago, la valeur de l'élément temporel n'est pas toujours dans un format de date valide (comme hier ou il y a 3 minutes ). Par conséquent, vous devez également fournir une valeur de secours en utilisant l'attribut [DateTime]:

Published <time 
    datetime="<?=date( 'Y-m-d', $time )?>" 
    title="<?=strftime( date( 'Y', $time ) == 
        date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time )?>">
    <?=time_ago( $time )?>
    </time>

Cela entraînerait une meilleure accessibilité, par exemple:

Published <time datetime="2015-09-12" title="September 12">3 minutes ago</time>

Avez-vous repéré l'attribut [titre]? C’est une minuscule amélioration de l’utilisabilité: mettre le texte du curseur sur la date montre un message présenté dans l’attribut de titre. C'est pour les utilisateurs qui, pour une raison quelconque, cherchaient les «vraies» dates. Voici une petite astuce CSS pour renforcer le sentiment qu'il y a quelque chose de plus:

<span>time<span><span>[title]</span></span>
</span><span>{
</span>    <span>cursor: help;
</span><span>}</span>

JavaScript Enhancement

Il y a encore une chose que nous pouvons faire! Avez-vous remarqué que Facebook augmente également les dates en temps réel? Il suffit de regarder à 3 minutes pendant une minute et il se transformera en 4 minutes et ainsi de suite. Donc, il existe des types de sites Web que cela fonctionne comme une très belle amélioration. Il ne serait pas utile sur un article d'article comme celui-ci, mais il est parfait sur un site comme ReadERRR:

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

Enfin, nous devons convertir le code PHP en un équivalent JavaScript. Je l'ai fait pour vous dans Vanilla JS (bien qu'une version jQuery soit également disponible). Le script traverse chaque fois l'élément [de données] une fois à chaque minute (setTimeout (Updatedates, 1000 * 60)) et met à jour les valeurs:

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

Demo en ligne et téléchargement de code

Vous pouvez consulter une démo en ligne du code ci-dessus ou télécharger le code de démonstration complet.

Encore une chose

Dans les exemples ci-dessus, la date complète est présentée si l'activité s'est produite il y a trois jours ou plus. Mais il est assez facile d'étendre le script pour présenter le temps de la manière il y a 5 jours, il y a 2 semaines et 1 mois, etc.:

<?=time_ago( $post->date_created )?>

enveloppent

L'expérience utilisateur et la satisfaction sont en détail. Parfois, un détail simple - comme un format de date dynamique - est suffisant pour améliorer un peu nos sites Web.

Alors, que pensez-vous de cette solution? Envisageriez-vous de l'utiliser sur votre prochain projet? Avez-vous des questions à ce sujet? S'il vous plaît laissez-moi savoir dans les commentaires.

Soit dit en passant, j'espère que quelqu'un pourra dire aux gens à Instagram que 122W n'est pas cool et que 2,4 ans seraient beaucoup plus faciles à comprendre. Ce serait mieux, n'est-ce pas?

Les questions fréquemment posées (FAQ) sur le comptage du temps «il y a»

Comment fonctionne la fonction temporelle «il y a» en JavaScript?

La fonction temporelle «il y a» en JavaScript est un moyen d'afficher le temps écoulé depuis qu'un événement particulier s'est produit. Il utilise l'objet date pour calculer la différence entre l'heure actuelle et l'heure de l'événement. Cette différence est ensuite convertie en secondes, minutes, heures, jours, semaines ou années, selon l'ampleur de la différence. Le résultat est une chaîne qui représente le temps écoulé dans un format lisible par l'homme, tel que «il y a 5 minutes» ou «il y a 2 jours».

Comment puis-je implémenter la fonction temporelle «il y a» dans mon Web Application?

Pour implémenter la fonction de temps «Ago» dans votre application Web, vous devez créer une fonction JavaScript qui prend un objet Date en entrée et renvoie une chaîne représentant l'heure écoulée. Cette fonction doit calculer la différence entre l'heure actuelle et la date d'entrée, convertir cette différence en unités appropriées et formater le résultat en tant que chaîne. Vous pouvez ensuite appeler cette fonction chaque fois que vous avez besoin d'afficher le temps «il y a».

Quels sont les avantages de l'utilisation de la fonction temporelle «il y a»?

La fonction temporelle «il y a» fournit une façon plus intuitive et conviviale d'afficher des informations de temps. Au lieu de montrer la date et l'heure exactes d'un événement, qui peut être difficile à interpréter et à comparer, la fonction de temps «il y a» montre le temps écoulé dans un format facile à comprendre et à comprendre. Cela peut améliorer l'expérience utilisateur et rendre votre application Web plus attrayante et interactive.

La fonction temporelle «il y a» peut-elle gérer les dates futures?

Oui, la fonction temporelle «il y a» peut gérer l'avenir dates. Si la date d'entrée est ultérieure que la date actuelle, la fonction calculera l'heure jusqu'à l'événement au lieu de l'heure qui a suivi l'événement. Le résultat sera une chaîne qui représente le temps restant dans un format lisible par l'homme, comme «en 5 minutes» ou «en 2 jours».

Comment puis-je personnaliser la fonction de temps «il y a Mes besoins?

La fonction temporelle «Ago» est hautement personnalisable. Vous pouvez modifier la fonction pour utiliser différentes unités de temps, différents formats pour la chaîne de sortie ou différentes règles pour arrondir le temps écoulé. Vous pouvez également ajouter une prise en charge de différentes langues ou lieux, si nécessaire. En peaufinant la fonction, vous pouvez le faire s'adapter parfaitement à la conception et aux fonctionnalités de votre application Web.

La fonction temporelle `` Ago '' est-elle compatible avec tous les navigateurs?

L'heure «il y a» La fonction est basée sur des fonctionnalités JavaScript standard, il doit donc être compatible avec tous les navigateurs Web modernes. Cependant, c'est toujours une bonne idée de tester votre code sur différents navigateurs et plates-formes pour s'assurer qu'il fonctionne correctement et de manière cohérente.

La fonction de temps «il y a» peut-elle gérer les fuseaux horaires?

Oui, oui, La fonction temporelle «Ago» peut gérer les fuseaux horaires. La fonction utilise l'objet Date, qui prend automatiquement en compte le fuseau horaire de l'appareil de l'utilisateur. Cela signifie que le temps «il y a» sera précis, indépendamment de l'emplacement ou du fuseau horaire de l'utilisateur.

Comment puis-je déboguer la fonction de temps `` Ago '' si cela ne fonctionne pas correctement?

Si le La fonction du temps «il y a» ne fonctionne pas correctement, vous pouvez utiliser la méthode console.log () pour imprimer la date d'entrée, la date en cours et la différence calculée. Cela vous aidera à identifier les erreurs ou les incohérences de la fonction. Vous pouvez également utiliser l'outil de débogueur dans les outils de développeur de votre navigateur pour parcourir la fonction et inspecter son comportement en détail.

Puis-je utiliser la fonction temporelle `` il y a "dans une application mobile?

Oui, vous pouvez utiliser la fonction temporelle «Ago» dans une application mobile. JavaScript est un langage polyvalent qui peut être utilisé dans de nombreux environnements différents, y compris les applications mobiles. La fonction doit fonctionner de la même manière dans une application mobile que dans une application Web.

Comment puis-je optimiser les performances de la fonction temporelle «il y a»?

Pour optimiser les performances de la fonction temporelle «il y a», vous pouvez utiliser des techniques telles que la mémorisation ou la mise en cache. Ces techniques peuvent réduire le nombre de calculs que la fonction doit effectuer, le rendant plus rapide et plus efficace. Vous pouvez également minimiser le nombre de fois où la fonction est appelée en mettant à jour le temps «il y a» uniquement lorsque cela est nécessaire, plutôt que sur chaque page de charge ou chaque seconde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!