To display blocks of related articles created using the Views function on any page, use the block layout to specify the page on which you want to display them and set the display location.
Drupal's excellent Views function allows you to extract content such as articles based on certain conditions and display them freely within the site. The block layout is a function that allows you to set the display location of pages and blocks created using the Views function.
The block layout is a feature typical of Drupal, and it offers a high degree of flexibility in terms of settings, making it easy to switch between navigation menus and side menus for each piece of content.
The navigation menu and side menu on this site are also switched by language using the block layout settings.
Overview of the Block Layout
- You can freely construct the structure of your site.
- The basic structure consists of the header, body, left and right side menus, and footer sections.
- The structure of the block layout depends on the theme you have selected.
- Choose the entities you want to place in each section of the block layout and place them.
- Choose the content you want to display for the entities you have chosen.
This is a function that allows you to configure navigation menus, side menus, footers, etc. for the articles and pages you have created by configuring content, site building, taxonomy, and views, as summarised in the articles on Drupal so far.
The block layout is a function that builds up the structure of the site.
Generally, websites are made up of separate sections: header, body, left and right side menus, and footer. The way each section is used will differ depending on the purpose of the site, but this is the format adopted by the majority of sites. In practice, the header is divided into multiple sections, and the footer is also made up of three sections, etc., but since this site also has a learning function, it is simply made up of four sections: header, body, right-hand side menu, and footer.
The sections that can be configured using the block layout depend on the theme you select. I have selected the Bootstrap 5 theme, and I am using a sub-theme for actual operation, so I am configuring and building the site using the block layout template provided by the Bootstrap 5 sub-theme.
Block Layout
Bootstrap 5 Subtheme Block Layout
|-- Header
| |-- Navigation branding region // Site description at top of page, etc
| |-- Main navigation region // Site name, logo, etc
| |-- Additional navigation region (eg search form, social icons, etc)
| // Navigation menu, etc
|
|-- Breadcrumbs
|
|-- Main content // Entities added to content such as articles
|
|-- Sidebar first // Left-hand menu
|
|-- Sidebar second // Right-hand menu
|
|-- Footer // FooterYou can build the structure of your site by setting the blocks you want to display in each section of the prepared block layout and specifying the content to display.
In this article, we will look at an example of block layout settings using the structure of the #C21 Views-2 Block from the previous article as an example.
Home > Administration > Structure > Block Layout
Block Layout Setting
|-- Header
| |-- Main menu // Navigation menu for English pages
|
| |-- Navigation branding region
| // Not used
| |-- Main navigation region
| // Not used
| |-- Additional navigation region (eg search form, social icons, etc)
| // Not used
|
|-- Breadcrumbs
| // Not used
|
|-- Main content
| |-- Message // Default settings | For the admin menu
| |-- Page title // Default settings | Displayed in /En-Creation
| |-- Tabs // Default settings | For the admin menu
| |-- Help // Default settings | For the admin menu
| |-- Primary admin actions // Default settings | For the admin menu
| |-- Main page content // Default settings | Displayed in /En-Creation
| |-- Breadcrumbs // Settings | Displayed in /Creation
| |-- Creation-Bottom_block // Content block created in /En-Creation | Displayed in /En-Creation
| // Content block for related articles created in /En-Creation
|
|-- First sidebar
| // Not in use
|
|-- Second sidebar
| |-- En-Side Bar 01 // Content block created | Displayed in /Creation
|
|-- Footer
| |-- En-Footer01 // Content block created | Footer for English contentThe structure is as shown above. In reality, there are more settings than in this example, as there are menus for other content types, etc., but in order to understand the structure and settings of the block layout, we have extracted only the block layout structure of #C21 Views-2 Block.
The block layout structure also has sections set to display in the admin menu, so let's organise the layout structure of#C21 Views-2 Block.
Header
- Navigation menu for English content // Content > Menu created with blocks
Main content
- Page title // Article
- Main page content // Article
- Breadcrumbs // Block created by the Easy_Breadcrumb module
- Related articles block // Related articles block created in Views
Second sidebar
- Right-hand menu // Content > Menu created with blocks
Footer
- Footer for English content // Menu created in Content > Blocks
The above is the structure.
The basic usage of the block layout is as follows
- Blocks: The blocks to be placed, etc.
- Categories: The types of entities, such as content types and systems
- Regions: The sections where they are to be placed
- Operations: Settings such as display conditions
The above four items are set. The page layout of the content is configured by selecting the region where the entity to be placed, such as a block, is to be placed and setting the display conditions.
Select the section you want to add a block to and place the block.
To set the navigation in the header
Header > Place a block > Select from the list of blocks that appears > Place the block
The settings screen will appear.
Block Main menu Setting
Block description
Main menu
Title: Enter the label name.
Internal name: b5subtheme_main_menu / Edit
This field supports tokens. Display available tokens.
Show title: Show / Hide setting
Restrictions on viewing
Response Code:(active tab)
Language: No restrictions
Response status: No restrictions
Page: No restrictions
Role: No restrictions
Content type : No restrictionsThe blocks specified in the above settings screen are placed in the specified regions of the block layout.
The settings for the blocks are made by specifying which regions they are placed in and which pages display the blocks specified for the regions.
The specified conditions are selected from the following six conditions:
Restrictions on viewing
- Response Code
- Language
- Response status
- Page
- Role
- Content type
(multiple combinations are possible)
For example, if you have a menu that is only for English pages, you can choose ‘English’ as the language, and the English menu will only be displayed on English pages.
Let's take a look at the settings for#C21 Views-2 Block.
- Header. / Main menu for English
- Body. / Page title, main page content, breadcrumbs, related articles
- Side Menu 2. / Side menu for English
- Footer. / Footer menu for English
The menus for the Japanese pages are placed in four regions.
Header > Navigation menu for English content
This will add a navigation menu block called ‘Menu 2’.
- Region: Header
- Block to be placed: Menu 2
- Display conditions: All English pages
Header Setting
Block description
Menu 2
Title
[ Main 2 ] Machine name: b5subtheme_menu2
This field supports tokens. Browse available tokens.
Display title // Select with checkbox --- Do not select because it is a menu
Restriction on viewing
Response Code : (active tab)
[Enter the specified value -- 4xx ]
-- Specify response codes. Enter one per line. This only works for 4xx response codes.
-- Reverse the condition
// Select by Apache status
Language : English
# Select language
-- English // Select English
-- Japanese
// Select the language you want to force. If you select none, all languages will be available.
Response status : No restriction
-- Success (200)
-- Access denied (403)
-- Page not found (404)
// The block will be displayed on pages with a matching response status. If nothing is checked, the block will be displayed on all pages. Other response statuses will not be used.
Page: Restrict to specific pages
# Page
List: Display on pages in the list
List: Do not display on pages in the list
// Specify the conditions for displaying or not displaying by URL.
Role : No restrictions
# If the user has the following roles
-- Anonymous user
-- Authenticated user
-- Content editor
-- Administrator
// Specify display by permission.
Content type : No restrictions
-- Article
-- Contact form
-- Creation article
-- En Creation
-- En Life Style
-- Life Style article
-- Basic page
-- Photo gallery
// Specify display by content type.
Vocabulary
-- Article
-- Shop info
-- Store
-- Tag
-- Tag
-- Article content
# Invert conditions
// Specify display by term. // Can be switched on and off.
Region
> Header
Please select the region in which to display this block.
Save block / Remove blockThe navigation menu displayed in the header is the same for all sites, but as it is an English menu, it is set to be displayed on all English pages. Similarly, the Japanese menu is displayed on all Japanese pages.
The settings here are Region: Header > English menu: Main menu block > Language: English.
Body. / Sets the blocks to display in the main article text.
Main content >
- Page title // System / Provided by default.
- Main page content // System / Provided by default.
- Breadcrumbs // Block from the additional module easy_breadcrumb
- Related posts block // Related posts block created in the view
Place the blocks above. The settings for each block are the same as those for the Main menu block above, so we will omit a general explanation of each condition.
The title block is provided by default in the system. Its main purpose is to set whether or not to display the title. This site uses the default setting for displaying the title, so we have not made any settings here. In the future, when we create full-screen pages, we will need to hide the title, so we will make the settings then.
Body. Title Setting
Block description
Page title
Title
[ Page title ] Machine name: b5subtheme_page_title
Display title --- This is a menu, so it is not selected
View restrictions
Response Code -- No settings
Language : No restrictions
Response status : No restrictions
Page : No restrictions
Role : No restrictions
Content type : No restrictions
Vocabulary -- No settings
Region
> Main content
Please select the region in which you want to display this block.
Save block / Delete blockThe main page content blocks are provided by default in the system. The main purpose is to set whether to display or not display articles and pages. This site uses the default settings here, so we have not made any settings here. As this is a setting related to displaying articles and pages as a whole, the default is the basic setting, and we think that this is a function that is used when setting to hide some content types depending on the purpose.
Body. Main Page Content Setting
Block description
Main page content
Title
[ Main page content ] Internal system name: b5subtheme_content
Display title --- This is a menu, so it is not selected
View restrictions
Response Code -- No settings
Language : No restrictions
Response status : No restrictions
Page : No restrictions
Role : No restrictions
Content type : No restrictions
Vocabulary -- No settings
Region
> Main content
Please select the region in which you want to display this block.
Save block / Delete blockBreadcrumb: The breadcrumb list is provided by default in the Bootstrap 5 theme. As it is placed between the header and body, it is displayed at the top of the page. I wanted to place the breadcrumbs at the bottom of the page, so I didn't use the breadcrumbs content block provided with the theme, but used the Easy_Breadcrumb module instead, and placed the block generated by this module at the bottom of the main content in the block layout.
The Easy_Breadcrumb module is also a simple but excellent module, so if I get the chance, I'd like to write an article summarising how to set it up and how to use it.
As it is placed on all pages by default, there is no specification for the page to be displayed.
Body. Breadcrumb Setting
Block description
Breadcrumbs
Title
[ Breadcrumbs ] Machine name: b5subtheme_content
Show title --- This is a menu, so it is not selected
View restrictions
Response Code -- No settings
Language : No restrictions
Response status : No restrictions
Page : No restrictions
Role : No restrictions
Content type : No restrictions
Vocabulary -- No settings
Region
> Main content
Please select the region in which you want to display this block.
Save block / Delete blockThis block is the related articles block created using the view function in the previous article. Select the main content in the block layout region and position the block so that it is displayed at the bottom of the page.
- The display conditions are set to display on English articles, so the language is set to English
- The page to display on is set to the block of related articles related to Creation articles, so the content type is set to : Creation articles
- The number of articles to display is set to 3, which is the number of articles set in the view.
The above settings have been made.
What makes this block different from the others is that it was created using Views, so it has no title, and instead uses an internal system name to specify the block. The internal name is in the form b5subtheme_views_block__creation_bottom_block_1, with b5subtheme_views_block up to the theme's Views block, and the rest of the name being the name of the block for the related article that was created.
By setting up this block, you can display related articles within the Drupal and AWS articles in /en-creation.
Body. Related articles Setting
Block description
Creation-Bottom_block
Item for each block
> 3 (default setting)
// As this is a block created in a view, the settings for the view are displayed.
Display title --- As this is a menu, it is not selected
Restriction on viewing
Response Code -- No settings
Language : English // As this is a block related to an English article, it is displayed only on English articles
Response status : No restrictions
Page : No restrictions
Role : No restrictions
Content type: Creation article // Specified here because it is a related article to the Creation article
Vocabulary -- No settings
System internal name
> b5subtheme_views_block__creation_bottom_block_1
A name unique to this block instance. Only single-byte alphanumeric characters and underscores can be used.
Region
> Main content
Select the region in which to display this block.
Save block / Delete blockRight side menu. / This sets the block of the side menu that is displayed on the right side.
This site uses four different types of side menu.
- Japanese / Basic page / Creation / Sidebar with yellow background
- Japanese / Life Style / Sidebar with blue background
- English / Basic page / Creation / Sidebar with yellow background
- English / Life Style / Sidebar with blue background
As this setting is for the /creation page,
3.English /Basic Page / Creation / Yellow background sidebar is used. *The same settings are used for the other side menus.
Right side menu Setting
Block description
Side Bar 01
Title
Side Bar 01 : Machine name: b5subtheme_sidebar01
Display title --- This is a menu, so it is not selected
View restrictions
Response Code -- No settings
Language : English // This is a English-language article, so it is only displayed on English articles
Response status : No restrictions
Page : Restricted to specific articles
-- /lifestyle/*
-- /creation/*
# Hidden on all pages in the list
Role: No restrictions
Content type: No restrictions
Vocabulary: No settings
Region
> Second sidebar
Please select the region where you want to display this block.
Save block / Delete blockThere are four types of side menu, and there are multiple candidate pages that can be displayed. The selection criteria are whether the language and lifestyle are available, so this time we will display the basic English page and the Creation article, and set the Life Style article and Japanese article to be hidden.
Language: English // This is a related article in English, so it will only be displayed on English articles
- Language: English // This will only display on English articles because the block is related to English articles
- Page: Select a specific article to limit.
-- /lifestyle/*
-- /creation/*
# This will be hidden on the page with the URL in the list.
If you include the wildcard /* , all articles under /lifestyle will be hidden.
Footer menu./ Set the footer block to be displayed at the bottom of the page.
- This site has both Japanese and English content, so we use two different footer menus.
- Japanese / Footer block with links to Japanese content.
- English / Footer block where links are to English content
This time, we will configure the footer block to be displayed for English content.
Footer menu Setting
Block description
Footer01
Title
Footer01: Machine name: b5subtheme_footer01
Display title --- This is a menu, so it is not selected
View restrictions
Response Code -- No settings
Language : Japanese // This is a English article related to the block, so it is only displayed on English articles
Response status : No restrictions
Page : No restrictions
Role : No restrictions
Content type : No restrictions
Vocabulary -- No settings
Region
> Footer
Please select the region where you want to display this block.
Save block / Delete blockUsing the block layout function, you can set up blocks to be placed in the header, body, left-hand side menu and footer.
By setting up block layout, you can create a page structure similar to that of the article #C21 Views-2 Block page.
Header
- Main navigation // English page navigation
Body
- Title // Article title #C21 Views-2 Block
- Article // #C21 Views-2 Block article body
- Breadcrumbs // Displayed on all pages
- Related articles // Block related to the English /creation page
Right-hand side menu
- Right-hand navigation // English page side menu
Footer
- Footer // English page footer
The block layout settings function allows you to specify which blocks you want to display in each region provided by the theme, and to arrange them by specifying the desired page, language, content type, URL and other conditions.
This is a feature that allows you to experience the high degree of freedom in configuration that is both an advantage and an interesting aspect of Drupal. The way you think about specifying conditions is a bit like a puzzle, and in some cases, even if you change the conditions, the results will be displayed in the same way, but if other factors are involved, the conditions will be specified naturally, and the conditions will be specified. The block layout is also a feature that determines the final display items for the website, so it is also a feature that can be used as a starting point for thinking about the site structure.
Once you understand block layout, you will be able to think about the rough blueprint of the site structure, the composition of content types, and how to structure the components such as articles, views and taxonomies. This will enable you to build a website with a specific end result in mind, not just by creating individual pages, but also by imagining the distribution of functions within the site and the path that users will take through it.
The difficulty of writing articles in Drupal is that the site itself cannot be built without making settings that span multiple functions. Even if you install the core program and leave it in its default state, the website will still be configured, but I don't think anyone uses it as it is.
In order to use Drupal to build a website with a layout and design that can be changed according to your objectives, you need to have a certain level of understanding of Drupal concepts and rules, so I am writing articles to explain these concepts. I'm writing articles that list the items I think are at least worth understanding, but due to my own lack of ability, they are all poorly organised and difficult to understand. I'm thinking of putting the articles I've written together and writing more concise, practical articles.
Drupal website creation
I've written articles about the various functions for building websites with Drupal, such as content types, taxonomy, and views, but the content is scattered about and difficult to understand, so I'll try to summarise it once.
