Skip to content

Commit

Permalink
i18n(ru): Update astro-syntax.mdx translation (#7187)
Browse files Browse the repository at this point in the history
Co-authored-by: Yan <[email protected]>
  • Loading branch information
mearashadowfax and yanthomasdev authored Mar 5, 2024
1 parent 8b7377f commit e6dc87a
Showing 1 changed file with 38 additions and 45 deletions.
83 changes: 38 additions & 45 deletions src/content/docs/ru/basics/astro-syntax.mdx
Original file line number Diff line number Diff line change
@@ -1,76 +1,72 @@
---
title: Синтаксис Astro
description: Введение в синтаксис .astro компонент.
description: Введение в синтаксис компонентов .astro.
i18nReady: true
---

**Если вы знаете HTML, то имеете уже достаточно знаний, для того, чтобы создать первый Astro компонент.**

Синтаксис компонент Astro расширяет синтаксис HTML. Синтаксис был [разработан таким образом, чтобы быть узнаваемым для тех, кто имеет опыт с HTML и JSX](#отличия-между-astro-и-jsx), добавляя поддержку встраивания компонент и JavaScript выражений.

Синтаксис компонентов Astro - это надмножество HTML. Синтаксис был [разработан так, чтобы показаться знакомым любому, кто имеет опыт написания HTML или JSX](#отличия-между-astro-и-jsx), и добавляет поддержку для встраивания компонентов и выражений JavaScript.

## JSX Выражения

Вы можете определить локальные JavaScript переменные внутри frontmatter части компонента внутри двойной конструкции (`---`). После этого, эти переменные можно использовать внутри HTML шаблона компонента, используя JSX выражения!
Вы можете определить локальные переменные JavaScript внутри скрипта компонента frontmatter между двумя блоками кода ( `---` ) компонента Astro. Затем вы можете вставить эти переменные в HTML-шаблон компонента, используя JSX выражения!

:::note[Динамичекие vs реактивные]
Используя этот подход, вы можете использовать **динамические** значения, которые расчитываются внутри frontmatter. Но после использования в шаблоне, эти значения не становятся **реактивными** и не будут изменены никогда. Astro компоненты - это шаблоны, которые исполняются единожды, в фазе рендеринга.
Используя этот подход, вы можете включать **динамические** значения, которые расчитываются внутри frontmatter. Но после включения эти значения не **реактивны** и никогда не изменятся. Компоненты Astro - это шаблоны, которые исполняются единожды, в фазе рендеринга.

Ниже представлены примеры [отличий между Astro и JSX](#отличия-между-astro-и-jsx).
:::

### Переменные

Локальные переменные могут использоваться в HTML с помощью фигурных скобок:
Локальные переменные можно добавить в HTML с помощью синтаксиса фигурных скобок:

```astro title="src/components/Variables.astro" "{name}"
---
const name = "Astro";
---
<div>
<h1>Привет, {name}!</h1> <!-- Вывод: <h1>Привет, Astro!</h1> -->
<h1>Hello {name}!</h1> <!-- Outputs <h1>Hello Astro!</h1> -->
</div>
```

### Динамические атрибуты

Локальные переменные можно использовать в фигурных скобках для того, чтобы установить свойства HTML элементов и других компонент:
Локальные переменные можно использовать в фигурных скобках для передачи значений атрибутов как элементам HTML, так и компонентам:

```astro title="src/components/DynamicAttributes.astro" "{name}" "${name}"
---
const name = "Astro";
---
<h1 class={name}>Атрибутные выражения поддерживаются</h1>
<h1 class={name}>Attribute expressions are supported</h1>
<MyComponent templateLiteralNameAttribute={`Значение-${name}`} />
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />
```

:::caution
Функции и объекты невозможно передать в виде атрибутов HTML элементов, так как они будут преобразованы в строки.
К примеру, нельзя установить обработчик событий для HTML элемента в Astro компоненте:
Атрибуты HTML будут преобразованы в строки, поэтому передать функции и объекты элементам HTML невозможно.
Например, вы не можете назначить обработчик события элементу HTML в компоненте Astro:

```astro
```astro title="dont-do-this.astro"
---
// dont-do-this.astro
function handleClick() {
console.log("Клик!");
function handleClick () {
console.log("button clicked!");
}
---
<!-- ❌ Работать не будет! ❌ -->
<button onClick={handleClick}>Ничего не произойдет при клике!</button>
<!-- ❌ Это не работает! ❌ -->
<button onClick={handleClick}>Nothing will happen when you click me!</button>
```

Вместо этого, для добавления обработчика событий используйте клиентский скрипт, как это делается в ванильном JavaScript:
Вместо этого используйте клиентский скрипт для добавления обработчика событий, как вы бы делали в обычном JavaScript:

```astro
```astro title="do-this-instead.astro"
---
// do-this-instead.astro
---
<button id="button">Click Me</button>
<!-- ✅ Сработает как ожидается! ✅ -->
<script>
function handleClick() {
console.log("Клик!");
function handleClick () {
console.log("button clicked!");
}
document.getElementById("button").addEventListener("click", handleClick);
</script>
Expand All @@ -79,11 +75,11 @@ function handleClick() {

### Динамический HTML

Локальные переменные могут использоваться для динамической генерации HTML элементов:
Локальные переменные можно использовать в JSX-подобных функциях для создания динамически генерируемых HTML-элементов:

```astro title="src/components/DynamicHtml.astro" "{item}"
---
const items = ["Пёс", "Кот", "Утконос"];
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
{items.map((item) => (
Expand All @@ -98,47 +94,47 @@ Astro поддерживает условное отображение HTML с
---
const visible = true;
---
{visible && <p>Покажи меня!</p>}
{visible && <p>Show me!</p>}
{visible ? <p>Покажи меня!</p> : <p>Или меня!</p>}
{visible ? <p>Show me!</p> : <p>Else show me!</p>}
```

### Динамические HTML теги

Вы так же можете использовать динамические теги, установив локальные переменные как имя HTML тега или ссылки на импорт компонента:
Вы также можете использовать динамические теги, установив переменную на имя HTML-тега или импорта компонента:

```astro title="src/components/DynamicTags.astro" /Element|(?<!My)Component/
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Привет!</Element> <!-- выведется как <div>Привет!</div> -->
<Component /> <!-- выведется как <MyComponent /> -->
<Element>Hello!</Element> <!-- отображается как <div>Hello!</div> -->
<Component /> <!-- отображается как <MyComponent /> -->
```

Как используются динамические теги:
При использовании динамических тегов:

- **Имя переменной должно быть с заглавной буквы.** К примеру, используйте `Element`, а не `element`. Иначе, Astro попытается отобразить имя этой переменной как HTML тег.
- **Имена переменных должны быть написаны с заглавной буквы.** Например, используйте `Element`, а не `element`. В противном случае Astro попытается отобразить имя переменной как HTML-тег.

- **Директивы для гидрации не поддерживаются.** При использовании [`client:*` директив гидрации](/ru/guides/framework-components/#hydrating-interactive-components), Astro необходимо знать какой компонент добавлять в production сборку, а подобный паттерн препятствует корректной работе сборщика.
- **Директивы для гидрации не поддерживаются.** При использовании [`client:*`директив гидрации](/ru/guides/framework-components/#hydrating-interactive-components), Astro необходимо знать, какие компоненты добавлять в production сборку, а подобный паттерн препятствует корректной работе сборщика.

### Фрагменты

Astro поддерживает использование как `<Fragment> </Fragment>`, так и краткой записи `<> </>`.

Фрагменты могут быть полезны в том случае, если нужно избежать излишних обёртков при добавлении [`set:*` directives](/ru/reference/directives-reference/#sethtml), как в следующем примере:
Фрагменты могут быть полезны, чтобы избежать оберточных элементов при добавлении [директив `set:*`](/ru/reference/directives-reference/#sethtml), как в следующем примере:

```astro title="src/components/SetHtml.astro" "Fragment"
---
const htmlString = '<p>HTML контент</p>';
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />
```

### Отличия между Astro и JSX

Синтаксис компонент Astro расширяет синтаксис HTML. Синтаксис был разработан таким образом, чтобы быть узнаваемым для тех, кто имеет опыт с HTML и JSX, но Astro синтаксис имеет несколько ключевых отличий от JSX.
Синтаксис компонентов Astro - это надмножество HTML. Он был разработан так, чтобы казаться знакомым любому, кто имеет опыт работы с HTML или JSX, но есть несколько ключевых различий между файлами `.astro` и JSX.

#### Атрибуты

Expand All @@ -149,9 +145,9 @@ const htmlString = '<p>HTML контент</p>';
<div class="box" data-value="3" />
```

#### Множественные корневые элементы
#### Множественные элементы

Шаблон Astro компонента может выводить множество корневых элементов без необходимости оборачивать их все в единственный элемент, например `div` или `<>`, как делается в JavaScript или JSX.
Шаблон Astro компонента может выводить множество элементов без необходимости оборачивать их все в единственный элемент, например `div` или `<>`, как делается в JavaScript или JSX.

```astro title="src/components/RootElements.astro"
---
Expand All @@ -163,7 +159,7 @@ const htmlString = '<p>HTML контент</p>';

#### Комментарии

В Astro вы можете использовать стандартные HTML или JavaScript-подобный синтаксисы.
В Astro вы можете использовать стандартный HTML или JavaScript-подобный синтаксисы.

```astro title="example.astro"
---
Expand All @@ -173,8 +169,5 @@ const htmlString = '<p>HTML контент</p>';
```

:::caution
HTML-подобные комментарии будут включены в DOM браузера, в отличии от JS комментариев, которые будут удалены. Для того, чтобы оставить TODO сообщения или другие пояснения для разработчиков, вы, скорее всего, пожелаете использовать JavaScript-подобные комментарии.
:::



HTML-подобные комментарии будут включены в DOM браузера, а комментарии в стиле JS будут пропущены. Чтобы оставлять сообщения TODO или другие пояснения, относящиеся только к разработке, вы можете использовать JavaScript-подобные комментарии.
:::

0 comments on commit e6dc87a

Please sign in to comment.