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: asaleotestf@gmail.com
  • Telegram Messenger: https:/t.me/tommytran0401

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

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

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

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

 
Chờ đợi gì ở iPad 3?

Chờ đợi gì ở iPad 3?

iPad 2 chính thức ra mắt vào mùa xuân năm ngoái, vậy có nghĩa là sẽ có khả năng rất lớn iPad 3 được hé lộ trong vài tháng tới

Gigan JSC - Number Talks & Number Works

Gigan JSC - Cách lấy hóa đơn từ quảng cáo Google, Facebook

Rất nhiều Startup Việt Nam và cả doanh nghiệp lớn gặp phải lúng túng trong việc hợp thức hóa chi phí quảng cáo Google và Facebook vào báo cáo tài chính cho doanh nghiệp.

Galaxy S, Galaxy S II và Galaxy Ace thoát án kiện cáo

Galaxy S, Galaxy S II và Galaxy Ace thoát án kiện cáo

Tại phiên tòa xét xử vụ kiện cáo vi phạm bản quyền đang diễn ra hết sức căng thẳng giữa Apple và Samsung, vị thẩm phán Lucy Koh vừa ra phán quyết các sản phẩm Samsung Galaxy S GT-i9000, Galaxy S II GT-i9100 và Galaxy Ace không còn là đối tượng sản phẩm liên quan đến vụ kiện nữa.