#C24 Short break

I've been putting together a series of articles on the concepts and rules for building websites with Drupal, as well as understanding the functions, but I'm a little stuck because I can't seem to get the articles to turn out the way I want, so I thought I'd try to summarise the current state of the site as a change of pace.

Introduction.

The current status of the site is as follows.

  1. DrupalCore update
  2. Addition and update of modules
  3. The English pages are coming together as the site is made multilingual.
  4. We are using the site search function provided as standard in Drupal Core on a trial basis.

Since 20 November, I have been receiving notifications about updates to the Drupal core, so I update it every time I receive a notification. The updates are security patches and bug fixes. I also received updates for the modules I was using, so I updated them. I set up Google Search Console and Google Analytics so that I could check the access status of the site.

As I mentioned in my previous article #C17, I was building an English website using the multilingualisation function, and it is almost complete. It is a form where the Japanese site and the English site are mixed within a single site.

I thought it would not be necessary for the time being because there are not many articles yet, but I added a site search function as a trial. I am using the search function that comes standard with Drupal Core.

1.Drupal Core Up Date.

I received an update notification, so I updated to the latest version each time.

10.3.10 - 22 November 2024 // 10.3 patch (bug fix) Update completed on 22 November

10.3.9 - 20 November 2024 // 10.x series security release Update completed on 20 November

10.3.8 - 12 November 2024 // 10.3 patch (bug fix) Last updated on 12 November

10.3.7 - 7 November 2024 // 10.3 patch (bug fixes) Last updated

Drupal core 10.3.7 > > > Drupal core 10.3.10 has been updated.

Composer Up Date.

The update will be carried out using Composer, as before. Please follow the Bitnami manual and perform the following steps

  1. Put the site in maintenance mode to perform the update
  2. Create backups of the .htaccess, settings.php and robots.txt files
  3. Change the working directory to the Drupal application
  4. Upgrade the application using Composer and drush
  5. Update the database and clear the cache
  6. Check that the application has been updated successfully
  7. Restore the backups of the files
  8. Put the site back into production mode after the update has been completed
  • Creates backups of the .htaccess, settings.php and robots.txt files.

    $ cp /opt/bitnami/drupal/.htaccess /home/bitnami/.htaccess.backup
    $ cp /opt/bitnami/drupal/sites/default/settings.php /home/bitnami/settings.php.backup
    $ cp /opt/bitnami/drupal/robots.txt /home/bitnami/robots.txt.backup

  • Change the working directory to the Drupal application.

    $ cd /opt/bitnami/drupal/

  • Upgrade your application with Composer and drush by executing the following commands.

    $ drush cache:rebuild
    [success] Cache rebuild complete.
    $ sudo composer update "drupal/core-*" --with-all-dependencies

  • Up Date Start

    Do not run Composer as root/super user! See https://getcomposer.org/root for details
    Continue as root/super user [yes]? yes
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 0 installs, 26 updates, 0 removals
    - Upgrading drupal/core (10.3.9 => 10.3.10)
    - Upgrading drupal/core-composer-scaffold (10.3.9 => 10.3.10)
  • ~ Omitted ~

    Generating autoload files
    Hardening vendor directory with .htaccess and web.config files.
    45 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    Cleaning installed packages.
    No security vulnerability advisories found.
    $
  • Up Date Complete

  • Update DB and clear cache

    $ drush updatedb
    [success] No pending updates.
    $ drush cache:rebuild
    [success] Cache rebuild complete.

  • Confirm that the application has been updated successfully.

    $ drush core:status
    Drupal version   : 10.3.10
    Site URI         : http://default
    DB driver        : mysql
    DB hostname      : 127.0.0.1
    ~ Omitted ~
    Drupal root      : /opt/bitnami/drupal
    Site path        : sites/default
    Files, Public    : sites/default/files
    Files, Temp      : /tmp
  • Drupal version: Successfully updated to 10.3.10.

  • Restores backups of .htaccess and robots.txt files.

    $ cp /home/bitnami/.htaccess.backup /opt/bitnami/drupal/.htaccess
    $ cp /home/bitnami/robots.txt.backup /opt/bitnami/drupal/robots.txt

Drupal Core has now been updated from 10.3.7 to 10.3.10.

Since we started using Lightsail to run Drupal, we have updated Drupal Core from 10.3.3 > > > 10.3.10.

2-1.Module Up Date.
  1. Captcha (2.0.6 => 2.0.7)
  2. Easy breadcrumb (2.0.8 => 2.0.9)

I also received a notification to update the module I was using, so I'll update that too. Normally, you can update modules from the Admin Console, but in my environment, an error occurred due to permission settings, so I'll use Composer to update it.。

  • To update a module using Composer, enter

$ composer update drupal/(module name) --with-all-dependencies

Captcha Up Date.

This is an update for the Captcha module, which is used to use Google reCaptcha.

  • Up Date Start

    $ sudo composer update drupal/captcha --with-all-dependencies
    -----
    Do not run Composer as root/super user! See https://getcomposer.org/root for details
    Continue as root/super user [yes]? yes
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 0 installs, 1 update, 0 removals
    - Upgrading drupal/captcha (2.0.6 => 2.0.7)
    Writing lock file
    Installing dependencies from lock file (including require-dev)
    Package operations: 0 installs, 1 update, 0 removals
    - Downloading drupal/captcha (2.0.7)
    - Upgrading drupal/captcha (2.0.6 => 2.0.7): Extracting archive
    Generating autoload files
    Hardening vendor directory with .htaccess and web.config files.
    45 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    Cleaning installed packages.
    No security vulnerability advisories found.
    -----
  • Up Date Complete

  • Update DB and clear cache

    $ drush updatedb
    [success] No pending updates.
    $ drush cache:rebuild
    [success] Cache rebuild complete.

  • Checking the UP Date

    $ drush pm:list
     --------------------- ---------------------------------- ---------- ----------
      Package               Name                               Status     Version
     --------------------- ---------------------------------- ---------- ----------
      Core                  Actions UI (action)              Disabled   10.3.10
      Core                  Announcements                    Enabled    10.3.10
      ~~~ Omitted ~~~
      Spam control          CAPTCHA (captcha)                Enabled    2.0.7
      Spam control          Image CAPTCHA                    Enabled    2.0.7
                            (image_captcha)

Captcha (2.0.6 => 2.0.7) update has been completed.

Easy breadcrumb Up Date.

We will update the module Easy breadcrumb, which is used for the breadcrumb list.

  • Up Date Start

    $ sudo composer update drupal/easy_breadcrumb --with-all-dependencies
    -----
    Do not run Composer as root/super user! See https://getcomposer.org/root for details
    Continue as root/super user [yes]? yes
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 0 installs, 10 updates, 0 removals
    - Upgrading drupal/easy_breadcrumb (2.0.8 => 2.0.9)
    - Upgrading symfony/dependency-injection (v6.4.15 => v6.4.16)
      ~~~ Omitted ~~~
    Writing lock file
    Installing dependencies from lock file (including require-dev)
    Package operations: 0 installs, 10 updates, 0 removals
    - Downloading symfony/deprecation-contracts (v3.5.1)
      ~~~ Omitted ~~~
    - Downloading symfony/dependency-injection (v6.4.16)
    - Downloading drupal/easy_breadcrumb (2.0.9)
    - Upgrading symfony/deprecation-contracts (v3.5.0 => v3.5.1): Extracting archive
      ~~~ Omitted ~~~
    - Upgrading drupal/easy_breadcrumb (2.0.8 => 2.0.9): Extracting archive
      Cleaning: symfony/validator
      Cleaning: symfony/routing
      Cleaning: symfony/http-foundation
      Cleaning: symfony/http-kernel
      Cleaning: symfony/dependency-injection
    Generating autoload files
    Hardening vendor directory with .htaccess and web.config files.
    45 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    Cleaning installed packages.
    No security vulnerability advisories found.
    -----
  • Up Date Complete

  • Update DB and clear cache

    $ drush updatedb
    [success] No pending updates.
    $ drush cache:rebuild
    [success] Cache rebuild complete.

  • Checking the UP Date

    $ drush pm:list
     --------------------- ---------------------------------- ---------- ----------
      Package               Name                               Status     Version
     --------------------- ---------------------------------- ---------- ----------
      Core                  Actions UI (action)                Disabled   10.3.10
      Core                  Announcements                      Enabled    10.3.10
      ~~~ Omitted ~~~
      Navigation         Easy Breadcrumb                       Enabled    2.0.9
                            (easy_breadcrumb)

Update for Easy breadcrumb (2.0.8 => 2.0.9) has been completed.

2-2.Adding modules.

We will install two modules to register with Google Search Console and Google Analytics. Both Google Search Console and Google Analytics are services that analyse access.

Google Search Console analyses access from Google searches. The main analysis content is the ranking and display frequency of search keywords, and the number of clicks. You can obtain information on the target users, such as language, region, and device type.

Google search results are displayed by a system in which pages are registered in Google's index. Google uses bots to crawl websites around the world, and when a website is published, these Google bots visit the site and perform a default inspection. If the site passes the inspection, the site and its pages are registered in Google's index.

By letting Google know the structure of your site in advance, Google will be able to understand the structure of your site more easily, making the review process more efficient and speeding up the indexing process. In order to let Google know the structure of your pages, you need to place XML data on your site that describes the page structure, known as a sitemap.

  • To use Google Search Console with Drupal, make the following settings.
  1. The ID for Google Search Console (google-site-verification=43 digits) is placed in the DNS TXT record.
  2. The XML file used to notify Google of the site structure is placed using the Simple XML Sitemap module.

While the access analysis in Google Search Console is limited to the results of Google searches, Google Analytics analyses not only access from search results, but also access from users who have visited the site, including repeat visitors. By analysing the source of access, such as region, language, search and other, and analysing the actions of users within the site, such as page views and sessions, it is possible to conduct a conditional analysis of the behavioural trends of users within the site.

  • The following settings are made for Google Analytics.
  1. To install the Google Analytics identification ID (ID starting with G-) on your site, use the Google Tag module.

The modules to be newly installed this time are as follows.

  1. Simple XML Sitemap 2024/11  Current version 4.2.2
  2. Google Tag 2024/11  Current version 2.0.6

As for Google Search Console and Google Analytics, the article would be too long if I included the Google settings, etc., so I'm thinking of summarising the usage and setting methods in a separate article.

  • To install a new module using Composer, use the following command.

$ composer require 'drupal/(module name):^(version)'

Adding Simple XML Sitemap.

Install the Simple XML Sitemap module, which places XML that notifies Google of the site structure.

  • Installation start

    $ sudo composer require 'drupal/simple_sitemap:^4.2'
    -----
    Do not run Composer as root/super user! See https://getcomposer.org/root for details
    Continue as root/super user [yes]? yes
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 1 installs, 0 update, 0 removals
    - Locking drupal/simple_sitemap (4.2.2)
    ~~~ There is no installation log because the terminal does not keep a log ~~~
    Generating autoload files
    Hardening vendor directory with .htaccess and web.config files.
    45 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    Cleaning installed packages.
    No security vulnerability advisories found.
    -----
  • Installation complete

  • Update DB and clear cache

    $ drush updatedb
    [success] No pending updates.
    $ drush cache:rebuild
    [success] Cache rebuild complete.

  • Confirming the addition of a module

    $ drush pm:list
     --------------------- ---------------------------------- ---------- ----------
      Package               Name                               Status     Version
     --------------------- ---------------------------------- ---------- ----------
      Core                  Actions UI (action)                Disabled   10.3.10
      Core                  Announcements                      Enabled    10.3.10
      ~~~ Omitted ~~~
      SEO                   Simple XML Sitemap (Search         Disabled   4.2.2
                            engines)
                            (simple_sitemap_engines)
      SEO                   Simple XML Sitemap (Views)         Disabled   4.2.2
                            (simple_sitemap_views)
      SEO                   Simple XML Sitemap                 Enabled    4.2.2
                            (simple_sitemap)

Simple XML Sitemap (4.2.2) has been successfully installed.

Adding Google Tag.

We will install the Google Tag module, which sets up the Google Analytics identification ID (ID starting with G-) on the site.

  • Installation start

    $ sudo composer require 'drupal/google_tag:^2.0'
    -----
    Do not run Composer as root/super user! See https://getcomposer.org/root for details
    Continue as root/super user [yes]? yes
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 1 installs, 0 update, 0 removals
    - Locking drupal/google_tag (2.0.6)
    ~~~ There is no installation log because the terminal does not keep a log ~~~
    Generating autoload files
    Hardening vendor directory with .htaccess and web.config files.
    45 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    Cleaning installed packages.
    No security vulnerability advisories found.
    -----
  • Installation complete

  • Update DB and clear cache

    $ drush updatedb
    [success] No pending updates.
    $ drush cache:rebuild
    [success] Cache rebuild complete.

  • Confirming the addition of a module

    $ drush pm:list
     --------------------- ---------------------------------- ---------- ----------
      Package               Name                               Status     Version
     --------------------- ---------------------------------- ---------- ----------
      Core                  Actions UI (action)              Disabled   10.3.10
      Core                  Announcements                    Enabled    10.3.10
      ~~~ 中略 ~~~
      Other                Google Tag (google_tag)           Enabled    2.0.6

Google Tag (2.0.6) has been successfully installed.

3.Creating an English website.

The creation of the English page that I wrote about in the previous article, #C17 Short break, is almost complete.

Previous article


I am creating an English version of a website that I created in Japanese, with the idea of using the multilingualisation function that comes standard with Drupal.

Drupal's multilingual function does not automatically translate Japanese pages, but rather Drupal translates specified menus and fixed fields into English. You need to prepare your own translations for the articles, so I use DeepL to translate them and create them in the form of separate English articles, specifying English in the language settings.

The most important point is that the language directory is added after the domain in the URL for pages with language settings.

On my site, it would be

  1. Japanese https://inter-est01.com/ja/article01
  2. English https://inter-est01.com/en/article01

.

All pages that specify English as the language will be grouped together under /en. This will result in the English version of the site, with the menu and sidebar specified for English, and contact form fields displayed in English, etc.

We are currently working on translating the articles we have written so far on Drupal and Lifestyle, and sorting the taxonomy into English. We will summarise the actual work in a separate article.

This is a work in progress, but you can view it by selecting English from the Language menu on the top menu.


The translation function of Drupal is limited to the fields and descriptions that are provided by default for content types, blocks, etc., so the menu for articles written by myself and blocks created by myself are not translated, so I have prepared a separate English version to deal with this.

Prepared separately for the English version of the page

  1. For the article content type, we will prepare a separate version with the language selection set to English, and write the article in English.
  2. Prepare a separate page for the category list created in Views, as well as blocks for related articles and new articles, all with the language selection set to English
  3. Prepare a separate page for all vocabulary and terms created in Taxonomy, with the language selection set to English
  4. Prepare a separate page for all blocks such as menus and footers, with the language selection set to English, and with the content translated into English and the link destination set to an English page
  5. For the contact form, add English to the default language setting of Japanese and translate > Check that the descriptions of the form input fields and the submit button switch between languages > Instead of preparing a separate page, include the Japanese and English descriptions on the same page
  6. As the primary domain inter-est01.com is Japanese, which is the default language, include the Japanese and English descriptions in the same way as the contact form
  7. Create a Top page in Japanese and English, as specified in the conventional primary domain, and specify it as the Home link within the site from the language selection.
  8. The Home link in the breadcrumbs is linked to the primary domain, but the link from the English alias /en inter-est01.com/en does not work with the alias and is displayed with the node number, so change the notation name on the Easy breadcrumb page
  9. I have specified the translation of the site search, which I will explain in the next section, and have confirmed that the descriptions of the input fields and the search button switch between languages in the same way as the contact form, and as I am using the default Search, at the moment the search results display articles in both Japanese and English. I am currently considering how to display articles in only the specified language in the future.

This time, I used Drupal's multilingualisation function to create Japanese and English pages, and I am satisfied with the functionality and ease of use. The concept is simple, and because the selected languages are grouped together as aliases, by understanding the basics of /ja Japanese /en English, you can grasp the parts that Drupal translates and the parts that you translate yourself, and if you create the necessary translated pages, you can achieve multilingualisation of your site relatively easily.

However, when you think about the management side of things, the number of articles and menu items will simply double, and the Admin console will become a mess with languages mixed up between those that have been specified for translation and those that haven't, making management more complicated.

My site doesn't use the default menu, so it's not a problem, but if you use the default menu, the page displayed when the menu title is clicked is specified to the primary domain, so the page cannot be changed by translation, so if you go back to the home page from the English page using the title menu, it will be in Japanese.

  1. inter-est01.com : Primary domain / Japanese
  2. inter-est01.com/ja : Display primary domain page / Japanese
  3. inter-est01.com/en : Display primary domain page Japanese
  4. The default for /ja and /en is the primary domain, but as it is an alias that is reserved in the program, the link destination cannot be changed.

I have dealt with this by including both Japanese and English content in the primary domain articles. I also considered redirecting using user agents and referrers, but this is not a recommended method, so I have dealt with it in this way.

When I made a Japanese-English site using WordPress before, I installed WordPress on separate subdomains and managed them separately to create a Japanese site and an English site, but considering flexibility and management, I think this approach would also be good for Drupal. Whether or not it can be achieved is a separate issue, but this is the result I felt after trying out Drupal's multilingual functions this time.

This is the main Japanese-language site.

Japanese.

This is a Japanese page. Since Japanese is selected as the basic language for Drupal, this is usually displayed.

This is the English website that we have created.

English.

This is an English page. English has been selected as the language in Drupal. The site has been made into an English site by translating the articles and selecting English as the language for the displayed menus, etc.

4.Add search function.

We have now added a site search function. As the site has only been open for a short time and there are not many articles or content, we thought it might not be necessary for the time being, but we wanted to try out the default search function, so you can now use the site search function, albeit in a trial version format.

The settings are simple, and you can search for content, help and users, and you can specify the minimum number of characters for search accuracy, alias settings and search ranking conditions.

The search results are displayed in a list tag, but this structure cannot be changed from the Admin console, so it is necessary to change the page structure of the template file. I myself do not understand TWIG or preprocess functions, so I need to learn about them.

Another option is to use the Search API module. The Search API module allows you to add view functionality to the search function, so you can freely set the design of the search results, and you can have multiple search functions that filter by different conditions.

There are several options, so we would like to organise and build the purpose of the search function.

Conclude.

I wrote this article to change my mood, but writing it turned out to be more troublesome than I thought... I'd like to write more specific and practical articles on how to use Drupal in the future, using the structure of this site that I'm building as a topic.

Local environment maintenance

As I haven't touched Drupal, which I have installed on my MacBook, since the site was moved to a public server, I'm going to try it out again for the first time in a while. I'll also update it as there have been a number of updates.

Post
2024-12-02
Contributor
S.Takeda
Article
Related articles.

This is a related article on Drupal and web development. Please take a look if you like.

#C06 Installing Lightsail and Drupal.

The installation is easy to complete, as the virtual server called Lightsail and the optimised Drupal are installed at the same time.

#C26 Civic Theme

This is an article about Civic Theme, which sparked my interest in Drupal and led me to build and publish a website.

#C16 Basics of creating page.

I've been writing a series of articles on the basic concepts of Drupal that are necessary for creating pages, but since it's become a lot of articles and it's hard to understand, I'm going to organise them.

Side Bar 01

I migrated my lifestyle blog, which I created using Word Press, to Drupal, and I am currently updating it by adding articles in Drupal.

This is a blog written by a beginner who is learning Drupal.

This article will explain how to build a website using Drupal.

  All Article.

  Drupal Article.

  Web site Article.

  Mac Article.

  AWS Article.

This article is about second-hand clothes and fashion.

  All Article.

  Old-Clothes Article.

  Fashion Article.

  Watch Article.

  Photo Article.

  Recommended Shops.

Core Drupal 10.4.0

Theme Bootstrap5 4.0.3

  Drupal

  bootstrap5

  Bootstrap

  Font Awesome

  Amazon Web Service

  Amazon Lightsail

  Bitnami

  Google reCAPTCHA