Редагувати код за допомогою Visual Studio Code for the Web (попередній перегляд)

[Ця тема є передрелізною документацією та може бути змінена.]

У дизайн-студії можна редагувати код сайту за допомогою Visual Studio Code для веб. Так ви можете змінювати статичний вміст, HTML, CSS, код Liquid і JavaScript для наступних метаданих веб-сайту:

Метадані Вміст
Розширені форми (багатокрокові форми) JavaScript
Основні форми JavaScript
Фрагменти контенту Увесь підтримуваний вміст, вміст фрагменту
Списки JavaScript
Веб-файли Перегляд і завантаження мультимедійних файлів. Редагування файлів з текстом (кодом).
Веб-сторінки Увесь підтримуваний вміст (для кожної мови), JavaScript і CSS
Веб-шаблони Увесь підтримуваний вміст

Нотатка

Ви не зможете створювати записи метаданих, а лише додавати та редагувати контент, код та переглядати та завантажувати вкладені файли.

Visual Studio Code for the Web пропонує безкоштовний досвід Microsoft Visual Studio Code без інсталяції, який працює повністю у вашому браузері, дозволяючи швидко та безпечно переглядати код сайту та вносити легкі зміни. Більше інформації: Visual Studio Code для веб-досвіду.

Important

  • Це функція попереднього перегляду.
  • Підготовчі функції призначені для невиробничого використання і можуть бути обмежені. Ці функції доступні до офіційного випуску, щоб клієнти могли ознайомитися з ними заздалегідь і залишити відгуки.

демо використання Visual Studio Code для вебу для редагування Power Pages site.

Нотатка

  • Перше завантаження Visual Studio Code для Web може зайняти деякий час, оскільки буде встановлено необхідні розширення для цієї функції.
  • Операції створення, видалення та перейменування файлів не підтримуються.
  • Ця функція використовує веб-розширення Power Platform Tools . Веб-розширення обмежені пісочницею браузера, тому мають обмеження порівняно зі звичайними розширеннями.

Функція редагування коду доступна в студії дизайну

Ви можете почати редагувати код свого сайту за допомогою Visual Studio Code for Web з головної сторінки Power Pages, вибравши опцію Edit код сайту у випадаючому меню Edit.

Також ви можете редагувати код у дизайн-студії з таких напрямків:

Розгляньмо процедуру редагування коду за допомогою цих областей.

Редагування коду веб-сторінки в робочій області Pages

Коли ви відкриваєте Power Pages дизайн-студію, у меню Сторінки видно опцію Edit code у меню сторінок1 і у верхньому правому куті екрану2.

Редагуйте код з робочої області «Сторінки».

Код шаблону заголовка з робочої області Pages

Виберіть Редагувати заголовок сайту, а тоді виберіть Редагувати код, щоб відкрити редактор коду.

Редагуйте код із заголовку сторінки.

Редагування користувацького CSS коду в робочій області стилізації

Перейдіть до робочої області «Стилі» і виберіть меню Редагувати код для наявного користувацького CSS, щоб відкрити редактор коду.

Редагування коду у користувацькому CSS.

Вигляд дій Power Pages

Вигляд Power Pages Actions, доступний внизу Провідника файлів, дозволяє керувати Power Pages сайтами безпосередньо в редакторі. Це зменшує потребу переходити до Power Pages design studio, дозволяючи розробникам швидко виконувати типові завдання зсередини редактора.

Доступні дії

  • Попередній перегляд сайту
    Ця дія очищає кеш конфігурації та відкриває сайт у VS Code. Він дозволяє розробникам переглядати та тестувати зміни в коді сайту без необхідності перемикати контекст у Power Pages design studio.

  • Відкрито у Power Pages дизайн-студії
    Після внесення змін у коді використайте цю дію, щоб перейти до дизайн-студії Power Pages. Це корисно для налаштування постачальників автентифікації, веб-ролей та інших параметрів сайту, які не можна редагувати в редакторі коду.

  • Відкрити в VS Code Desktop
    Якщо встановлено VS Code Desktop, ця дія відкриває сайт у десктопному додатку. Він також ініціює завантаження сайту, гарантуючи, що код доступний локально та готовий до редагування.

Power Pages Перегляд дій у VS Code.

Сповіщення про конфлікт злиття

Якщо ви співпрацюєте з іншими розробниками, можуть виникнути ситуації, коли ви працюватимете над одним і тим самим вихідним кодом. Якщо ви спробуєте зберегти зміни у застарілому файлі, з’явиться сповіщення, де буде запропоновано Порівняти або Перезаписати зміни.

Порівняння коду покаже поточний код поряд із вашим кодом, і ви зможете повернутися до наявних змін, прийняти кожну зміну окремо або застосувати ваші зміни, перезаписавши наявний вміст.

Конфлікти злиття у коді.

Ви зможете переглянути найновіший вміст і об’єднати чи перезаписати код, або скасувати зміни.

Навчальний матеріал: Редагувати код сайту за допомогою Visual Studio Code for the Web

У цьому навчальному посібнику ви проходите редагування коду сайту за допомогою Visual Studio Code for Web.

Крок 1: Редагувати код сайту за допомогою Visual Studio Code for the Web

  1. Відкрийте свій сайт у Power Pages design studio

  2. У верхньому правому куті виберіть Редагувати код

    Відкривається у Visual Studio Code році з дизайн-студії.

  3. Виберіть Open Visual Studio Code у діалогу підтвердження.

  4. Увійдіть у Visual Studio Code, використовуючи облікові дані вашого середовища.

  5. Зачекайте, поки веб-розширення Power Platform Tools ініціалізується, а код веб-сторінки відобразиться в області ліворуч.

Крок 2. Оновлення вмісту та коду

  1. Провідник у лівій частині екрана завантажує відповідні метадані конфігурації веб-сайтів, які можна редагувати за допомогою веб-програми Visual Studio Code.

    Меню провідника для робочої області без назви, де відображаються веб-файли.

  2. Внесіть зміни до відповідних файлів метаданих і натисніть клавіші Ctrl+S, щоб зберегти зміни.

  3. Перейдіть до студії дизайну та виберіть Синхронізувати, щоб отримати всі оновлення для поточного сеансу в студії дизайну.

    інтерфейс, що дозволяє користувачу вибрати кнопку Sync для синхронізації змін, внесених у Visual Studio Code, з design studio.

  4. Виберіть Preview щоб побачити зміни на сайті Power Pages.

Використання Visual Studio Code для вебу або Visual Studio Code Desktop

Користувачі можуть редагувати, налагоджувати та переглядати зміни у редагуванні сторінок за допомогою Visual Studio Code for the Web без використання зовнішніх інструментів. Visual Studio Code Desktop надає інші розширені функції для редагування всіх метаданих сайту та інтеграції з GitHub, фреймворками та процесами безперервної інтеграції/безперервної розробки (CI/CD).

Функція VS код для Інтернету VS Code Desktop
Створення нових записів метаданих конфігурації веб-сайту Ні Обмежено веб-сторінками, шаблонами сторінок, веб-шаблонами, фрагментами вмісту та веб-файлами.
Пряме редагування сайту Так Ні
Редагування метаданих сайту Обмежено редагуванням веб-сторінок, фрагментів вмісту, базових форм, багатокрокових форм, списків та веб-шаблонів. Конфігурація метаданих усіх Power Pages
Попередній перегляд сайту Заплановано Заплановано
Power Platform Підтримка інтерфейсу командного рядка Ні Так
Розширений робочий процес для процесора та сховища - підтримка ReactJS або інших інструментів для збірки фреймворків Ні Так
Інтеграція з GitHub з такими можливостями, як перевірка коду, виїзд, керування конфліктами та злиття. Ні Так

Редагування коду у програмі «Керування порталами»

Нотатка

  • Використання Visual Studio Code for the Web для редагування вебсайтів не підтримується в Government Community Cloud (GCC), Government Community Cloud (GCC High) та Міністерстві оборони (DoD). Користувачі в цих регіонах можуть використовувати додаток Portal Management для внесення змін.

Якщо регіон не підтримує Visual Studio Code для веб, вибір іконки редактора коду </> у командному рядку відкриває додаток Portal Management app.

Для редагування коду потрібно перейти до відповідних записів Веб-сторінок, Базових форм, Багатокрокових форм, Списків або Веб-шаблонів.

Тип Розташування коду
веб-сторінка Виберіть запис веб-сторінки.
Виберіть запис вмісту веб-сторінки в розділі «Локалізований контент ».
Копію сторінки можна редагувати в полі Копіювати (HTML) на вкладці Загальні .
Користувацький JavaScript і спеціальний CSS код можна редагувати на вкладці Додатково .
Базова форма Виберіть запис основної форми. Відредагуйте користувацький JavaScript на вкладці Додаткові налаштування .
Багатоетапна форма Виберіть запис багатокрокової форми.
Виберіть крок багатокрокової форми на вкладці Кроки форми . Відредагуйте користувацький JavaScript на вкладці «Параметри форми ».
Список Виберіть запис списку. Відредагуйте користувацький JavaScript на вкладці «Параметри ».
Веб-шаблон Виберіть запис веб-шаблону. Редагувати джерело на вкладці Загальні .

Збережіть запис і перегляньте свій веб-сайт, щоб протестувати код.

Див. також

  • Last updated on