Aracılığıyla paylaş


Web için Visual Studio Code kodu 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çerik, HTML, CSS, Liquid ve JavaScript'i düzenlemenize olanak tanır:

Meta veriler İçerik
Gelişmiş formları (çok adımlı formlar) JavaScript
Temel formlar JavaScript
İçerik Kod 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 ekleyip düzenleyemez ve dosya eklerini görüntüleyemez/indiremezsiniz.

Web için Visual Studio Code, tamamen tarayıcınızda çalışan ücretsiz, sıfır yüklemeli bir Microsoft Visual Studio Code deneyimi sağlayarak site koduna göz atmanızı ve basit kod değişikliklerini hızlı ve güvenli bir şekilde yapmanızı sağlar. Daha fazla bilgi: Web deneyimi için Visual Studio Code.

Ö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.

Web için Visual Studio Code kullanarak Power Pages sitesi düzenleme demosu

Not

  • Web için ilk kez Visual Studio Code yüklemesi, bu özellik için gerekli uzantıları yükleyeceği için biraz zaman alabilir.
  • Dosya Oluşturma, Silme ve Yeniden Adlandırma işlemleri desteklenmez.
  • Bu özellik Power Platform Araçları web uzantısını kullanır. Web uzantıları tarayıcı korumalı alanı tarafından kısıtlanır ve normal uzantılarla karşılaştırıldığında sınırlamalar vardır.
    • Power Platform CLI desteklenmez.
    • Power Platform Araçları web uzantısı özellikleri, Power Pages kod düzenleme deneyimiyle sınırlıdır.
    • Bu özellik Kamu Topluluk Bulutu (GCC), Kamu Topluluk Bulutu (GCC High) ve Savunma Bakanlığı'nda (DoD) kullanılamaz. 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

Edit açılan menüsünden Power Pages Edit site code seçeneğini seçerek web için Visual Studio Code 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 design studio'yu açtığınızda Sayfalar menüsünde1 ve ekranın sağ üst köşesinde2Edit code seçeneğini görürsünüz.

Kodu Sayfalar çalışma alanından düzenleme.

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.

Kodu Sayfalar başlığından düzenleme.

Stil çalışma alanında ö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.

Kodu Özel CSS'den düzenleme.

Power Pages Eylemler görünümü

Dosya Gezgini'nin alt kısmından erişilebilen Power Pages Actions görünümü, Power Pages siteleri doğrudan düzenleyicide yönetmenizi sağlar. Geliştiricilerin ortak görevleri düzenleyici içinden hızlı bir şekilde gerçekleştirmesini sağlayarak Power Pages tasarım stüdyosuna geçme gereksinimini azaltır.

Kullanılabilir Eylemler

  • Önizleme sitesi
    Bu eylem yapılandırma önbelleğini temizler ve siteyi VS Code'da açar. Geliştiricilerin bağlamı Power Pages design studio'ya geçirmesine gerek kalmadan site kodundaki değişiklikleri önizlemesine ve testine olanak tanır.

  • Power Pages Design Studio'da aç
    Kod değişiklikleri yaptıktan sonra bu eylemi kullanarak Power Pages design studio'ya gidin. Bu, kod düzenleyicisinde düzenlenemeyen kimlik doğrulama sağlayıcılarını, web rollerini ve diğer site ayarlarını yapılandırmak için kullanışlıdır.

  • VS Code Desktop'ta aç
    VS Code Desktop yüklüyse, bu eylem siteyi masaüstü uygulamasında açar. Ayrıca bir site indirme işlemini tetikleyerek kodun yerel olarak ve düzenleme için hazır olduğundan emin olur.

VS Code'de Power Pages İşlemleri görünümü.

Çakışma bildirimini Birleştir

Diğer geliştiricilerle işbirliği yapıyorsanız, aynı kaynak kodu üzerinde çalışacağı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.

Kodda birleştirme çakışması.

En son içeriği gözden geçirebilir ve kodu birleştirebilir ya da üzerine yazabilir ya da değişiklikleri atabilirsiniz.

Öğretici: Web için Visual Studio Code kullanarak site kodunu düzenleme

Bu öğreticide, Web için Visual Studio Code kullanarak site kodunu düzenleme adımlarını adım adım inceleyebilirsiniz.

1. Adım: Web için Visual Studio Code kullanarak site kodunu düzenleme

  1. Sitenizi Power Pages design studio

  2. Sağ üst köşede Kodu düzenle'yi seçin

    Tasarım stüdyosundan Visual Studio Code'u açma

  3. Onay iletişim kutusundan Open Visual Studio Code seçin.

  4. Ortam kimlik bilgilerinizi kullanarak Visual Studio Code oturum açın.

  5. 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

  1. 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.

    Web dosyalarını gösteren başlıksız bir çalışma alanı için Gezgin menüsü.

  2. İlgili meta veri dosyalarında değişiklikler yapın ve değişiklikleri kaydetmek için CTRL + S tuşlarına basın.

  3. 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.

    Arayüz, kullanıcının Visual Studio Code'da yapılan değişiklikleri tasarım stüdyosuyla senkronize etmek için Senkronizasyon düğmesini seçmesine olanak tanır.

  4. Power Pages sitesinde değişiklikleri görmek için Preview öğesini seçin.

Web veya Visual Studio Code Masaüstü için Visual Studio Code kullanma

Kullanıcılar, dış araçları kullanmaya gerek kalmadan Web için Visual Studio Code kullanarak sayfa düzenlemelerinde yapılan değişiklikleri düzenleyebilir, hatalarını ayıklayabilir ve önizleyebilir. Visual Studio Code Desktop, tüm site meta verilerini düzenlemek ve GitHub, çerçeveler ve sürekli tümleştirme/sürekli geliştirme (CI/CD) işlemleriyle tümleştirmek için diğer 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ır 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ır
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ır Evet
Gelişmiş CPU ve depolamaya bağlı iş akışı - ReactJS veya diğer çerçeve derleme aracı desteği Hayır Evet
GitHub tümleştirmesi, kod gönderme, çekme, çakışmaları yönetme ve birleştirme gibi özelliklerle. Hayır Evet

Portal Yönetimi uygulamasında kodu düzenleme

Not

  • Web'de web sitelerini düzenlemek için Visual Studio Code kullanılması Kamu Topluluk Bulutu (GCC), Kamu Topluluk Bulutu (GCC High) ve Savunma Bakanlığı'nda (DoD) desteklenmez. Bu bölgelerdeki kullanıcılar, değişikliklerini yapmak için Portal Yönetimi uygulamasını kullanabilir.

Bölge WebVisual Studio Code desteklemiyorsa> komut çubuğunda kod düzenleyicisi simgesinin / seçildiğinde Portal Management uygulaması açılır.

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 Kopyala (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ı form adımını 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 sekmesinde Kaynağı Düzenle'yi seçin.

Kaydı kaydedin ve kodunuzu test etmek için web sitenizin önizlemesine bakın.

Ayrıca bkz.