Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ru): Update astro-syntax.mdx translation #7187

Merged
merged 2 commits into from
Mar 5, 2024
Merged

i18n(ru): Update astro-syntax.mdx translation #7187

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
966954c
i18n(ru): Update astro-syntax.mdx translation
mearashadowfax Mar 4, 2024
17a9b0c
Merge branch 'main' into update-syntax-translation
yanthomasdev Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 38 additions & 45 deletions src/content/docs/ru/basics/astro-syntax.mdx
View file
Open in desktop
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-подобные комментарии.
:::
Loading