this is local task

app/composer.json

@@ -29,6 +29,7 @@
     "drupal/font_awesome": "^1.4",
     "drupal/fontawesome": "^2.23",
     "drupal/fontawesome_menu_icons": "^1.9",
+    "drupal/jquery_ui_tabs": "^1.1",
     "drupal/media_library_block": "^1.0",
     "drupal/media_library_form_element": "^2.0",
     "drupal/metatag": "^1.19",

app/composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "1b24d35c84763c2fdcf7e4fca5e5d99e",
+    "content-hash": "e9a9771504018aa49812e463441864e1",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -3382,6 +3382,59 @@
                 "source": "https://git.drupalcode.org/project/jquery_ui_slider"
             }
         },
+        {
+            "name": "drupal/jquery_ui_tabs",
+            "version": "1.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jquery_ui_tabs.git",
+                "reference": "8.x-1.1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jquery_ui_tabs-8.x-1.1.zip",
+                "reference": "8.x-1.1",
+                "shasum": "511ffb8258f60e7e180bed1f7447203423e58da3"
+            },
+            "require": {
+                "drupal/core": "^8 || ^9",
+                "drupal/jquery_ui": "*"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.1",
+                    "datestamp": "1590102797",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "bnjmnm",
+                    "homepage": "https://www.drupal.org/user/2369194"
+                },
+                {
+                    "name": "lauriii",
+                    "homepage": "https://www.drupal.org/user/1078742"
+                },
+                {
+                    "name": "zrpnr",
+                    "homepage": "https://www.drupal.org/user/1448368"
+                }
+            ],
+            "description": "Provides jQuery UI Tabs library.",
+            "homepage": "https://www.drupal.org/project/jquery_ui_tabs",
+            "support": {
+                "source": "https://git.drupalcode.org/project/jquery_ui_tabs"
+            }
+        },
         {
             "name": "drupal/jquery_ui_touch_punch",
             "version": "1.0.0",
@@ -7241,6 +7294,7 @@
                     "type": "tidelift"
                 }
             ],
+            "abandoned": "symfony/error-handler",
             "time": "2022-04-12T15:19:55+00:00"
         },
         {

app/docroot/modules/custom/localtask/localtask.info.yml

+name: Local task
+type: module
+core_version_requirement: ^8.8 || ^9
+package: Custom

app/docroot/modules/custom/localtask/localtask.links.task.yml

+localtask.tab.swapi:
+  route_name: localtask.tab.swapi
+  title: Swapi tab
+  base_route: entity.node.canonical
+  weight: 100

app/docroot/modules/custom/localtask/localtask.module

+<?php

app/docroot/modules/custom/localtask/localtask.routing.yml

+localtask.tab.swapi:
+  path: '/node/{node}/swapi'
+  defaults:
+    _controller: '\Drupal\localtask\Controller\DrupalLocalTask::swapi'
+  requirements:
+    _custom_access: '\Drupal\localtask\Controller\DrupalLocalTask::access'
+  options:
+    parameters:
+      node:
+        type: 'entity:node'

app/docroot/modules/custom/localtask/src/Controller/DrupalLocalTask.php

+<?php
+namespace Drupal\localtask\Controller;
+use Drupal\Core\Access\AccessResult;
+use Drupal\Core\Session\AccountInterface;
+use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
+use Drupal\node\NodeInterface;
+
+class DrupalLocalTask {
+
+  public function getResult($url)
+  {
+    try{
+      // Отправка GET-запроса
+      $request = \Drupal::httpClient()->get($url);
+      // Ответ GET-запроса
+      $response = $request->getBody()->getContents();
+      $result = $response;
+    }
+
+    catch (Exception $e) {
+      // Generic exception handling if something else gets thrown.
+      \Drupal::logger('widget')->error($e->getMessage());
+    }
+    return $result;
+  }
+
+public function swapi($node){
+  $perms = array_keys(\Drupal::service('user.permissions')->getPermissions());
+  $type = $node->getType();
+  $id = $node->get('field_swapi_id')->value;
+  $conc = 'https://swapi.dev/api/'.$type.'/'.$id.'/';
+  $request = $this->getResult($conc);
+  return [
+    '#markup' => $request,
+  ];
+}
+  /**
+   * Checks access for a specific request.
+   *
+   * @param \Drupal\Core\Session\AccountInterface $account
+   *   Run access checks for this account.
+   *
+   * @return \Drupal\Core\Access\AccessResultInterface
+   *   The access result.
+   */
+public function access(\Drupal\node\NodeInterface $node , AccountInterface $account){
+  $type = $node->getType();
+  $perm = 'edit own '. $type .' content';
+  return AccessResult::allowedIf($account->hasPermission($perm));
+}
+}

app/docroot/themes/custom/mytheme/js/script.js

+Drupal.behaviors.myblock = {
+  attach: function (context, settings) {
+    // Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
+    jQuery( "#tabs" ).tabs();
+  }
+};

app/docroot/themes/custom/mytheme/js/script1.js

+Drupal.behaviors.myblock1 = {
+  attach: function (context, settings) {
+    // Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
+    jQuery( "#tabs" ).tabs();
+    jQuery('a[href="#tabs-2"]').click();
+  }
+};

app/docroot/themes/custom/mytheme/mytheme.info.yml

 type: theme
-base theme: bootstrap
+base theme: seven
 core: 8.x
 core_version_requirement: ^8 || ^9
-
 name: 'mytheme'
 description: 'A Drupal Bootstrap 3 based sub-theme.'
 package: 'Bootstrap'
-
-regions:
-  header: 'Top Bar'
-  highlighted: 'Highlighted'
-  content: 'Content'
-  footer: 'Footer'
+libraries:
+  - mytheme/mylibrary

app/docroot/themes/custom/mytheme/mytheme.libraries.yml

+mylibrary:
+  version: 1.x
+  js:
+    js/script.js: {}
+  dependencies:
+    - core/jquery
+    - jquery_ui_tabs/tabs
+test:
+  version: 1.x
+  js:
+    js/script1.js: { }
+  dependencies:
+    - core/jquery
+    - jquery_ui_tabs/tabs

app/docroot/themes/custom/mytheme/mytheme.theme

+<?php
+
+
+use Drupal\Core\Cache\CacheableMetadata;
+
+function mytheme_preprocess_node__people__full(&$variables)
+{
+  $variables['#cache'] =  ([
+      'contexts' => ['url.query_args'],
+  ]);
+  $param = \Drupal::request()->query;
+  $key = $param->get('tab');
+
+  $variables['test'] = false;
+    if ($key == 'films'){
+      $variables['#attached']['library'][] = 'mytheme/test';
+  }
+  $variables['name'] = $variables['elements']['#node']->get('field_name')->value;
+  $variables['height'] = $variables['elements']['#node']->get('field_height')->value;
+  $variables['mass'] = $variables['elements']['#node']->get('field_mass')->value;
+  $variables['hair_color'] = $variables['elements']['#node']->get('field_hair_color')->value;
+  $variables['skin_color'] = $variables['elements']['#node']->get('field_skin_color')->value;
+  $variables['eye_color'] = $variables['elements']['#node']->get('field_eye_color')->value;
+  $variables['birth_year'] = $variables['elements']['#node']->get('field_birth_year')->value;
+  $variables['gender'] = $variables['elements']['#node']->get('field_gender')->value;
+
+ $homeworld_array =  $variables['elements']['#node']->field_homeworld->referencedEntities();
+ foreach ($homeworld_array as $key => $value){
+   $value = $value->getTitle();
+ }
+  $variables['homeworld'] = $value;
+  $films_array =  $variables['elements']['#node']->field_films->referencedEntities();
+  foreach ($films_array as $key => $value){
+    $value_films[] = $value->getTitle();
+  }
+  $variables['films'] = $value_films;
+}

app/docroot/themes/custom/mytheme/templates/node--people--full.html.twig

+<div id="tabs" class="ui-tabs">
+
+  <ul>
+    <li><a href="#tabs-1">Общая информация</a></li>
+    <li><a href="#tabs-2">Фильмы</a></li>
+  </ul>
+
+    <div id="tabs-1">
+
+    <p> Имя: {{ name }} </p>
+    <p>  Рост: {{ height }}  </p>
+    <p> Масса: {{ mass }}  </p>
+    <p> Цвет волос: {{ hair_color }}  </p>
+    <p> Цвет кожи: {{ skin_color }}  </p>
+    <p> Цвет глаз: {{ eye_color }}  </p>
+    <p> Дата рождения: {{ birth_year }}  </p>
+    <p> Пол: {{ gender }}  </p>
+    <p> Родная планета: {{ homeworld }}  </p>
+
+  </div>
+  <div id="tabs-2">
+    Фильмы:
+    {% for film in films %}
+    <p> {{ film }}  </p>
+    {% endfor %}
+  </div>
+</div>