Hướng dẫn tự động sinh summary với Toc.js module trong Drupal 8

Hướng dẫn tự động sinh summary với Toc.js module trong Drupal 8

Express Magazine hướng dẫn các bạn khám phá mô-đun Toc.js cho phép chúng ta dễ dàng tạo một bản tóm tắt theo cách mô-đun bất kể trang nào của trang web với Drupal 8.

The generation of an automatic summary for relatively long articles is a recurring need for content publishing. A summary provides better visibility for the reader, and an effective way to navigate within an article as soon as it is a little dense. And as for the editor, this saves him from having to manually manage a summary that will have to be updated as an article is modified. In other words, it eliminates a source of potential and multiple input errors. Let's discover the Toc.js module which allows us to easily generate a summary in a modular way whatever the page of a Drupal 8 site.

The Toc.js module offers full integration with the content types of a Drupal project. To use it, simply activate it in the configuration page of a content type.

Toc.js settings


The proposed options allow to precisely adapt the table of contents to be generated according to the type of content, these fields etc. To understand the configuration options, let's go back to the module's operating principle.

This module uses the jQuery TOC.js library, and as such the generation of the summary is done once the page is rendered, which allows a great flexibility on the coverage of the desired content, unlike for example a solution based on a text format. This approach allows you to target any part of a page from a CSS selector (the Container in the configuration options), whether this page is generated from simple fields, or less simple ones like paragraphs for example.

The other configuration options allow you to specify the behavior of the generated summary, including

  • the CSS selectors to target to generate the summary titles
  • The minimum number of titles to generate an automatic summary. It is not necessarily appropriate to generate a summary when an article has only two unfortunate sections.
  • The type of HTML list to generate
  • The possibility of inserting a Return to Summary link on each content title that has been the target of the automatic summary
  • Enabling soft scrolling to the content part by clicking on a title in the summary
  • The ability to highlight the summary titles if their corresponding section in the article arrives in the visible area when scrolling the page
  • The ability to make the summary stick to the page scrolling (useful if you want the summary, placed in a sidebar, to always be visible when scrolling a page)

And finally, if you activate the included Toc.js per node submodule, you also have the possibility to enable / disable the automatic summary in a granular way, content by content.

Once configured, the positioning of the automatic summary can be easily configured in the display modes of the content type.

Toc display settings


You can then use the Core Layout Builder module, or via a Twig template, to customize the positioning of the summary that will be generated.

However, if we can generate an automatic summary here in a few clicks for Drupal 8 content types, this is not (yet) true for any page type (other content entities, custom pages, views, etc.).

To meet this need, rather than a specific integration (for each possible content entity) that could be laborious, the Toc.js module provides a new type of Block that allows us to place and generate a summary this time on any type of page (including also content types), whether it is a taxonomy term page, another content entity, a view, etc. 

Toc.js block

Its configuration options are similar to those available on content types.

Toc.js block settings

And we can obtain, after a few magic CSS rules, a summary of our customized content, depending on the nature of the pages of a project.

Toc.js summary example

Note that the uses of the Toc.js module can be extended to other needs than the generation of an automatic summary or a table of contents. For example, you can easily generate a contextual sub-menu based on the page allowing smooth scrolling navigation. Or generate an automatic menu of a One page site managed on a Drupal website factory for example.

Toc.js menu example

Another way of seeing and finally formatting a summary, simply by extending its scope to all the elements that make up a page and not just those of a content.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/t.me/tommytran0401

Tìm kiếm bất động sản





Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

Firefox 9 Beta - Nhanh hơn và mạnh hơn

Firefox 9 Beta - Nhanh hơn và mạnh hơn

Chỉ ít ngày sau khi Firefox 8 chính thức được trình làng, Mozilla đã tiếp tục nâng đưa phiên bản Firefox 9 vào quá trình thử nghiệm cuối cùng (Beta) để sẵn sàng cho ra mắt phiên bản mới nhất này trong thời gian tới.

Bảo vệ Drupal Content với Node Access Password

Bảo vệ Drupal Content với Node Access Password

This module will automatically generate a random password for each node you want to protect. That password must be entered before viewing the content.

Philippines đoạt 9 vương miện sắc đẹp quốc tế trong 10 năm qua, điều này làm bùng nổ các cuộc thi nhan sắc ở quốc gia này

Phía sau các cuộc thi hoa hậu ở Philippines là tiền và tình

Trong thế giới của hoa hậu, nhan sắc, danh vọng và tiền bạc còn đi kèm với những cạm bẫy không thể lường trước, những phi vụ trao đổi thân xác sẽ giúp bạn thăng tiến nhanh hơn trong sự nghiệp

Wordpress Freelancer


Wordpress Freelancer