Web için Visual Studio Code ile kod düzenleme (önizleme)
[Bu konu, yayın öncesi belgesine dahildir ve değiştirilebilir.]
Tasarım stüdyosundan Web için Visual Studio Code kullanarak site kodunu düzenleyebilirsiniz. Bu özellik aşağıdaki Web sitesi meta verileri için statik içeriği, HTML, CSS, Liquid ve JavaScript 'i düzenlemenizi sağlar:
| Meta Veriler | İçerik |
|---|---|
| Gelişmiş formları (çok adımlı formlar) | JavaScript |
| Temel formlar | JavaScript |
| İçerik Parçacıkları | Tüm desteklenen içerik parçacığı içeriği |
| Listeler | JavaScript |
| Web Dosyaları | Medya dosyalarını görüntüleme ve karşıdan yükleme. Metin (kod) dosyalarını düzenleyin. |
| Web sayfaları | Tüm desteklenen içerik (dil başına), JavaScript ve CSS |
| Web şablonları | Desteklenen tüm içerik |
Not
Meta veri kayıtları oluşturamaz; yalnızca içerik, kod ve dosya eki görüntüle/karşıdan yükleme/indirme ekle ve Düzenle/Yükle'yi kullanabilirsiniz.
Web için Visual Studio Code, tamamen tarayıcınızda çalışan, site koduna göz atmanızı ve hafif kod değişikliklerini hızla ve güvenle yapmanıza olanak tanıyan ücretsiz ve sıfır kurulum gerektiren Microsoft Visual Studio Code deneyimi sunar. Daha fazla bilgi: Web için Visual Studio Code deneyimi.
Önemli
- Bu, bir önizleme özelliğidir.
- Önizleme özellikleri, üretimde kullanıma yönelik değildir ve sınırlı işlevselliğe sahip olabilir. Bu özellikler, müşterilerin erken erişim elde etmesi ve geri bildirim sağlaması amacıyla resmi sürümden önce kullanıma sunulur.
Not
- Web için Visual Studio Code'u ilk kez yüklemek biraz zaman alabilir. Bunun nedeni, bu özellik için gerekli uzantıların yüklenecek olmasıdır.
- Dosya Oluşturma, Silme ve Yeniden adlandırma işlemleri desteklenmez.
- Bu özellik, Power Platform Tools web uzantısı kullanır. Web uzantıları, tarayıcı korumalı alanı tarafından kısıtlanır ve bu nedenle normal uzantılara göre sınırlamaları vardır.
- Power PlatformCLI desteklenmez.
- Power Platform Tools web uzantısı özellikleri, Power Pages kod düzenleme deneyimiyle sınırlıdır.
- Bu özellik Government Community Cloud (GCC), Government Community Cloud (GCC High) ve Department of Defense (DoD) ile kullanılmaz. Bu bölgelerdeki kullanıcılar, kod düzenlemek için Portal Yönetimi uygulamasını kullanır. Daha fazla bilgi için Portal Yönetimi uygulamasında kodu düzenleme konusuna bakın.
Tasarım stüdyosunda kullanılabilir kodu düzenleme
Düzenle açılır menüsünden Site kodunu düzenle seçeneğini seçerek Power Pages giriş sayfasından Web için Visual Studio Code'u kullanarak sitenizin kodunu düzenlemeye başlayabilirsiniz.
Ayrıca tasarım stüdyosunda kodu aşağıdaki alanlardan da düzenleyebilirsiniz:
- Web sayfası kodunu Sayfalar çalışma alanından düzenleme
- Sayfa çalışma alanından başlık şablonu kodu
- Stil çalışma alanında özel CSS kodu düzenleme
- Birden çok adım formları için özel JavaScript kodunu düzenleme
- Basit formları için özel JavaScript kodunu düzenleme
- Listeler için özel JavaScript'i düzenleme
- İçerik parçacıklarını düzenle
- Web şablonlarını düzenle
- Web dosyalarını (görüntüle) görüntüleme ve karşıdan yükleme
- Metin tabanlı Web dosyalarını düzenleme (CSS, JavaScript, diğer)
Bu alanları kullanarak kodun nasıl düzenleneceğine bakalım.
Web sayfası kodunu Sayfalar çalışma alanından düzenleme
Power Pages tasarım stüdyosunu açtığınızda Sayfalar menüsünde1 ve ekranın sağ üst köşesinde2Kodu düzenle seçeneğini görürsünüz.
Sayfa çalışma alanından başlık şablonu kodu
Site başlığını düzenle'yi seçin ve ardından kod düzenleyicisi açmak için Kodu düzenle'yi seçin.
Stil çalışma alanından özel CSS kodu düzenleme
Stil çalışma alanına gidin ve kod düzenleyicisini açmak için kullanılabilir özel CSS Kodu düzenle menüsünü seçin.
Çakışma bildirimini Birleştir
Diğer geliştiricilerle işbirliği yapıyorsanız aynı kaynak kodu üzerinde çalıştığınız durumlar olabilir. Güncel olmayan bir dosyada yapılan değişiklikleri kaydetmeyi denediğinizde değişiklikleri karşılaştırma veya üzerine yazma bildirimini alırsınız.
Kodu karşılaştırma, kodunuzun yanı sıra geçerli kodu gösterir ve varolan değişikliklere geri dönebilmeniz için, her değişikliği bağımsız olarak kabul etmenizi veya varolan içeriğin üzerine yazılmasını sağlayacaktır.
En son içeriği gözden geçirebilir ve kodu birleştirebilir ya da üzerine yazabilir ya da değişiklikleri atabilirsiniz.
Öğretici: Site kodunu Web için Visual Studio Code kullanarak düzenleme
Bu eğitmende, Web için Visual Studio Code kullanarak site kodunu düzenleyerek gezmeniz gerekir.
Adım 1: Web için Visual Studio Code'u kullanarak site kodunu düzenleyin
Sitenizi Power Pages tasarım stüdyosunda açın
Sağ üst köşede Kodu düzenle'yi seçin
Onay iletişim kutusundan Visual Studio Code'u Aç'ı seçin.
Ortam kimlik bilgilerinizi kullanarak Visual Studio Code'da oturum açın.
Power Platform Tools web uzantısının başlatılmasını ve sol bölmede web sayfası kodunun yüklenmesini bekleyin.
Adım 2: içeriği ve kodu güncelleştirin
Ekranın sol tarafındaki gezgin, Web için görsel kod kullanılarak düzenlenebilecek ilgili web sitesi yapılandırma meta verilerini yükler.
İlgili meta veri dosyalarında değişiklikler yapın ve değişiklikleri kaydetmek için CTRL + S tuşlarına basın.
Tasarım stüdyosuna gidin ve geçerli tasarım stüdyosu oturumunuzdaki tüm güncelleştirmeleri çekmek için Eşitle'yi seçin.
Power Pages sitesindeki değişiklikleri görmek için Önizleme'yi seçin.
Web için Visual Studio Code veya Visual Studio Code Masaüstü kullanma
Kullanıcılar, Web için Visual Studio Code kullanarak harici araçlara gerek olmadan sayfa düzenlemelerindeki değişiklikleri düzenleyebilir, hata ayıklayabilir ve önizleyebilir. Visual Studio Code Masaüstü, tüm site meta verilerini düzenlemek ve GitHub ile tümleştirme, çerçeveler ve sürekli tümleştirme/sürekli geliştirme (CI/CD) işlemleri için başka gelişmiş özellikler sağlar.
| Özellik | Web için VS Code | VS Code Masaüstü |
|---|---|---|
| Yeni Web sitesi yapılandırması meta veri kayıtları oluştur | Hayı | Web sayfaları, sayfa şablonları, Web şablonları, içerik parçacıkları ve Web dosyalarıyla sınırlıdır. |
| Doğrudan site düzenleme | Evet | Hayı |
| Site meta verileri düzenleme | Web sayfalarını, içerik parçacıklarını, temel formları, çok adımlı formları, listeleri ve Web şablonlarını düzenlemeyle sınırlıdır. | Tüm Power Pages Meta veri yapılandırması |
| Site önizlemesi | Planlandı | Planlandı |
| Power Platform CLI desteği | Hayı | Evet |
| Gelişmiş CPU ve depolama sınırlı iş akışı - ReactJS ve diğer altyapı derleme aracı desteği | Hayı | Evet |
| Kod girişi, kod kullanma alma, çakışmaları yönetme ve birleştirme gibi özelliklerle GitHub tümleştirmesi. | Hayı | Evet |
Portal Yönetimi uygulamasında kodu düzenleme
Not
- WWeb sitelerini düzenlemek için Web için Visual Studio Code kullanmak Government Community Cloud (GCC), Government Community Cloud (GCC High) ve Department of Defense (DoD)'da desteklenmez. Bu bölgelerdeki kullanıcılar, değişikliklerini yapmak için Portal Yönetimi uygulamasını kullanabilirler.
Bölge, Web için Visual Studio Code'u desteklemiyorsa komut çubuğunda kod düzenleyici simgesini <> seçmek Portal Yönetimi uygulamasını açar.
Kodu düzenlemek için ilgili Web Sayfaları, Temel Formlar, Çoklu Adım Formları, Listeler veya Web Şablonları kayıtlarına gidin.
| Türü | Kod konumu |
|---|---|
| Web sayfası | Web sayfası kaydını seçin. Yerelleştirilmiş İçerik bölümünden web sayfası içerik kaydını seçin. Sayfa kopyası, Genel sekmesindeki Kopya (HTML) alanında düzenlenebilir.Özel JavaScript ve Özel CSS kodu Gelişmiş sekmesinden düzenlenebilir. |
| Temel form | Temel form kaydını seçin.Ek Ayarlar sekmesinde Özel JavaScript'i düzenleyin. |
| Çok adımlı form | Çok adımlı form kaydını seçin.Form Adımları sekmesinden çok adımlı formu seçin.Form Seçenekleri sekmesinde Özel JavaScript 'i düzenleyin. |
| List | Liste kaydını seçin.Seçenekler sekmesinde Özel JavaScript'i düzenleyin. |
| Web şablonu | Web şablonu kaydını seçin.Genel sekmesindeki Kaynak'ı düzenleyin. |
Kaydı kaydedin ve kodunuzu test etmek için web sitenizin önizlemesine bakın.