Opsi navigasi untuk SharePoint Online

Penting: Artikel ini adalah terjemahan mesin, lihat penafian. Temukan versi bahasa Inggris artikel di sini sebagai rujukan Anda.

Artikel ini menjelaskan cara untuk meningkatkan waktu muat halaman untuk SharePoint Online dengan menggunakan navigasi struktural dan navigasi digerakkan oleh pencarian.

Navigasi global dan kueri yang diperlukan untuk menyusun navigasi struktural bisa membuat halaman Anda memuat lebih lambat dalam SharePoint Online. Ini adalah karena tiap kueri ini mengirim permintaan lain untuk SQL server. Untuk setiap situs dan subsitus yang Anda miliki, lebih banyak permintaan yang dibuat untuk SQL server. Masalah ini juga mempengaruhi halaman master. Ini berarti bahwa navigasi global juga terpengaruh.

Beberapa situs SharePoint mengharuskan struktur yang kompleks dan besar. Menggunakan navigasi struktural luar kotak, yang menggunakan konten oleh kueri, dapat mengakibatkan waktu muat halaman lambat karena beberapa situs lapisan. Setiap lapisan subsitus juga membuat kueri yang lain.

Ada dua opsi navigasi di luar kotak utama di SharePoint serta ketiga, pendekatan kustom yang dipicu pencarian. Setiap opsi memiliki kelebihan dan kelemahan seperti yang diuraikan dalam tabel berikut ini.

Navigasi struktural

Navigasi terkelola

Navigasi digerakkan oleh pencarian

Profesional:

  • Mudah untuk mengonfigurasi

  • Pemangkasan keamanan

  • Secara otomatis saat pembaruan situs ditambahkan

Profesional:

  • Mudah untuk mempertahankan

Profesional:

  • Pemangkasan keamanan

  • Secara otomatis saat pembaruan situs ditambahkan

  • Fast memuat struktur navigasi waktu dan secara lokal singgahan

Cons:

  • Bisa melakukan buruk dengan struktur situs kompleks

Cons:

  • Tidak secara otomatis diperbarui agar mencerminkan struktur situs

Cons:

  • Tidak dapat dengan mudah urutan situs

  • Memerlukan kustomisasi halaman master (teknis keahlian yang diperlukan)

Jika Anda memiliki situs dengan banyak subsitus dan Anda menggunakan navigasi struktural, mungkin memperlambat halaman Anda memuat secara signifikan. Opsi yang paling sesuai untuk situs Anda akan bergantung pada kebutuhan situs dan kemampuan Anda teknis. Jika Anda merasa nyaman menggunakan halaman master kustom dan memiliki kapabilitas beberapa di dalam organisasi untuk mempertahankan perubahan yang mungkin terjadi di halaman master default untuk SharePoint Online, lalu opsi yang digerakkan oleh pencarian akan menghasilkan pengalaman pengguna yang terbaik. Jika Anda ingin sederhana tengah antara luar kotak navigasi struktural dan pencarian, lalu navigasi terkelola adalah pilihan yang sangat baik. Opsi navigasi terkelola yang dapat dilakukan melalui konfigurasi, tidak melibatkan kode kustomisasi file, dan itu secara signifikan lebih cepat dari luar kotak navigasi struktural.

Pendekatan lain adalah untuk menyusun ulang situs yang sudah ada dan mengurangi jumlah item navigasi dan subsitus yang diperlukan. Ini adalah karena navigasi struktural menjalankan baik selama struktur situs dan navigasi tidak terlalu rumit.

Artikel ini membandingkan berbagai pendekatan di contoh kumpulan situs. Contoh kumpulan situs memiliki subsitus 11 dan setiap sub situs memiliki subsitus setidaknya empat tambahan.

Cuplikan layar memperlihatkan situs dan subsitus

Menggunakan navigasi terstruktur di SharePoint Online

Ini adalah navigasi di luar kotak digunakan secara default dan solusi yang paling mudah dan sesuai dalam keadaan. Kecuali ada struktur yang kompleks beberapa subsitus atau banyak tingkat subsitus, navigasi struktural melakukan baik. Keuntungan utama pendekatan ini adalah bahwa pemangkasan keamanan, otomatis diperbarui saat situs baru ditambahkan dan tidak memerlukan kustomisasi halaman master. Pengguna non teknis bisa juga dapat menambahkan item, menyembunyikan item dan mengelola navigasi dari halaman pengaturan.

Mengaktifkan navigasi terstruktur di SharePoint Online

Untuk menggambarkan bagaimana kinerja dalam Solusi SharePoint Online standar dengan navigasi struktural dan memperlihatkan subsites opsi diaktifkan. Di bawah ini adalah cuplikan layar pengaturan ditemukan pada halaman Pengaturan situs > navigasi.

Cuplikan layar memperlihatkan subsitus

Menganalisis navigasi struktural kinerja di SharePoint Online

Untuk menganalisis kinerja halaman SharePoint menggunakan tab jaringan alat pengembang F12 di Internet Explorer.

Cuplikan layar memperlihatkan alat F12 dev tab Jaringan

Pada tab jaringan , klik pada halaman .aspx yang sedang dimuat dan kemudian klik tab detail .

Cuplikan layar memperlihatkan tab rincian

Klik Header respons.

Cuplikan layar tab Rincian

SharePoint mengembalikan beberapa informasi diagnostik yang berguna dalam header respons tersebut. Salah satu yang paling berguna adalah SPRequestDuration    yang merupakan nilai dalam milidetik dari berapa lama permintaan mengambil proses di server.

Di layar berikut ini cuplikan memperlihatkan subsitus tidak dicentang untuk navigasi struktural. Ini berarti bahwa ada hanya link kumpulan situs di navigasi global:

Cuplikan layar memperlihatkan waktu muat sebagai durasi permintaan

Tombol SPRequestDuration    memiliki nilai 245 milidetik. Ini menunjukkan waktu yang dibutuhkan untuk mengembalikan permintaan. Karena tidak hanya satu item navigasi pada situs, ini adalah benchmark bagus untuk bagaimana SharePoint Online melakukan tanpa berat navigasi. Cuplikan layar berikutnya memperlihatkan cara menambahkan subsitus yang mempengaruhi tombol ini.

Cuplikan layar memperlihatkan durasi permintaan 2502 mdtk

Menambahkan subsitus yang meningkat waktu yang diperlukan untuk mengembalikan permintaan halaman.

Keuntungan menggunakan navigasi terstruktur reguler adalah bahwa Anda bisa dengan mudah mengatur urutan, Sembunyikan situs, menambahkan halaman, hasilnya pemangkasan keamanan, dan Anda tidak menyimpang dari didukung halaman master yang digunakan dalam SharePoint Online. Jika Anda struktur situs Anda dengan hati-hati dan meminimalkan jumlah subsitus dalam kumpulan situs Anda lalu navigasi struktural melakukan baik.

Menggunakan navigasi terkelola dan metadata terkelola di SharePoint Online

Navigasi terkelola adalah lain di luar kotak opsi yang bisa Anda gunakan untuk membuat ulang sama seperti fungsi navigasi struktural.

Keuntungan menggunakan metadata terkelola adalah bahwa lebih cepat untuk mengambil data daripada menggunakan konten oleh kueri untuk menyusun navigasi situs. Meskipun jauh lebih cepat ada cara untuk keamanan trim hasil begitu jika pengguna tidak memiliki akses ke situs tertentu, link akan masih memperlihatkan tapi akan mengakibatkan pesan kesalahan.

Bagaimana cara menerapkan navigasi terkelola dan hasil   

Ada beberapa artikel TechNet tentang detail navigasi terkelola, misalnya, lihat gambaran umum navigasi terkelola di SharePoint Server 2013.

Untuk menerapkan navigasi terkelola, Anda harus memiliki izin administrator menyimpan istilah. Dengan menyetel istilah dengan URL yang sesuai dengan struktur kumpulan situs, navigasi terkelola bisa digunakan untuk mengganti navigasi struktural. Misalnya:

Cuplikan layar contoh Subsitus1

Contoh berikut menunjukkan kinerja navigasi kompleks menggunakan navigasi terkelola.

Cuplikan layar contoh SPRequestDuration

Menggunakan navigasi terkelola secara konsisten meningkatkan kinerja dibandingkan dengan konten dengan kueri navigasi struktural pendekatan.

Menggunakan digerakkan oleh pencarian scripting pihak klien

Menggunakan pencarian Anda dapat memanfaatkan indeks yang dibangun di latar belakang menggunakan pendataan berkelanjutan. Ini berarti ada kueri konten tanpa berat. Hasil pencarian yang diambil dari indeks pencarian dan hasil pemangkasan keamanan. Ini lebih cepat daripada menggunakan kueri konten reguler. Menggunakan pencarian untuk navigasi terstruktur, terutama jika Anda memiliki struktur situs kompleks, akan mempercepat halaman yang memuat waktu jauh. Keuntungan utama ini melalui navigasi terkelola adalah bahwa Anda mendapatkan manfaat dari pemangkasan keamanan.

Pendekatan ini melibatkan membuat halaman master kustom dan mengganti kode di luar kotak navigasi dengan kustom HTML. Ikuti prosedur ini untuk mengganti kode navigasi di file seattle.html.

Dalam contoh ini, Anda akan membuka seattle.html file dan mengganti semua elemen id = "DeltaTopNavigation" dengan kode HTML kustom.

Contoh: Untuk mengganti kode di luar kotak navigasi di halaman master

  1. Navigasi ke halaman Pengaturan situs .

  2. Membuka galeri halaman master dengan mengklik Halaman Master.

  3. Dari sini, Anda bisa menavigasi pustaka dan mengunduh file seattle.master.

  4. Mengedit kode menggunakan editor teks dan Hapus blok kode dalam cuplikan layar berikut ini.

    Cuplikan layar kode DeltaTopNavigation untuk menghapus
  5. Menghapus kode antara < SharePoint:AjaxDelta id = "DeltaTopNavigation" > dan < \SharePoint:AjaxDelta > tag dan menggantinya dengan potongan berikut:

    <div id="loading">
      <!--Replace with path to loading image.-->
      <div style="background-image: url(''); height: 22px; width: 22px; ">
      </div>
    </div>
    <!-- Main Content-->
    <div id="navContainer" style="display:none">
        <div data-bind="foreach: hierarchy" class="noindex ms-core-listMenu-horizontalBox">
            <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
                <span class="menu-item-text" data-bind="text: item.Title">
                </span>
            </a>
            <ul id="menu" data-bind="foreach: $data.children" style="padding-left:20px">
                <li class="static dynamic-children">
                    <a class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
                        <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
                            <span class="menu-item-text" data-bind="text: item.Title">
                            </span>
                        </span>
                    </a>
                    <ul id="menu" data-bind="foreach: children; visible: children.length>0" class="dynamic" >
                        <li class="dynamic">
                            <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
                                <span class="menu-item-text" data-bind="text: item.Title">
                                </span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
  6. Mengganti URL di pemuatan gambar jangkar tag di awal, dengan link ke memuat gambar di kumpulan situs Anda. Setelah Anda membuat perubahan, mengganti nama file dan lalu Unggah ke Galeri halaman master. Ini menghasilkan file .master baru.

  7. HTML ini adalah markup dasar yang akan terisi dengan hasil pencarian yang dihasilkan dari kode JavaScript. Anda akan perlu mengedit kode berikut ini untuk mengubah nilai untuk var root = “site collection URL seperti yang ditunjukkan dalam potongan berikut ini:

    var root = “https://spperformance.sharepoint.com/sites/NavigationBySearch”;

    File JavaScript seluruh adalah sebagai berikut:

    //Models and Namespaces
    var SPOCustom = SPOCustom || {};
    SPOCustom.Models = SPOCustom.Models || {}
    SPOCustom.Models.NavigationNode = function () {
    
        this.Url = ko.observable("");
        this.Title = ko.observable("");
        this.Parent = ko.observable("");
    
    };
    
    var root = "https://spperformance.sharepoint.com/sites/NavigationBySearch";
    var baseUrl = root + "/_api/search/query?querytext=";
    var query = baseUrl + "'contentClass=\"STS_Web\"+path:" + root + "'&trimduplicates=false&rowlimit=300";
    
    var baseRequest = {
        url: "",
        type: ""
    };
    
    
    //Parses a local object from JSON search result.
    function getNavigationFromDto(dto) {
        var item = new SPOCustom.Models.NavigationNode();
        if (dto != undefined) {
    
            var webTemplate = getSearchResultsValue(dto.Cells.results, 'WebTemplate');
    
            if (webTemplate != "APP") {
                item.Title(getSearchResultsValue(dto.Cells.results, 'Title')); //Key = Title
                item.Url(getSearchResultsValue(dto.Cells.results, 'Path')); //Key = Path
                item.Parent(getSearchResultsValue(dto.Cells.results, 'ParentLink')); //Key = ParentLink
            }
    
        }
        return item;
    }
    
    function getSearchResultsValue(results, key) {
    
        for (i = 0; i < results.length; i++) {
            if (results[i].Key == key) {
                return results[i].Value;
            }
        }
        return null;
    }
    
    //Parse a local object from the serialized cache.
    function getNavigationFromCache(dto) {
        var item = new SPOCustom.Models.NavigationNode();
    
        if (dto != undefined) {
    
            item.Title(dto.Title);
            item.Url(dto.Url);
            item.Parent(dto.Parent);
        }
    
        return item;
    }
    
    /* create a new OData request for JSON response */
    function getRequest(endpoint) {
        var request = baseRequest;
        request.type = "GET";
        request.url = endpoint;
        request.headers = { ACCEPT: "application/json;odata=verbose" };
        return request;
    };
    
    /* Navigation Module*/
    function NavigationViewModel() {
        "use strict";
        var self = this;
        self.nodes = ko.observableArray([]);
        self.hierarchy = ko.observableArray([]);;
        self.loadNavigatioNodes = function () {
            //Check local storage for cached navigation datasource.
            var fromStorage = localStorage["nodesCache"];
            if (false) {
                var cachedNodes = JSON.parse(localStorage["nodesCache"]);
    
                if (cachedNodes && timeStamp) {
                    //Check for cache expiration. Currently set to 3 hrs.
                    var now = new Date();
                    var diff = now.getTime() - timeStamp;
                    if (Math.round(diff / (1000 * 60 * 60)) < 3) {
    
                        //return from cache.
                        var cacheResults = [];
                        $.each(cachedNodes, function (i, item) {
                            var nodeitem = getNavigationFromCache(item, true);
                            cacheResults.push(nodeitem);
                        });
    
                        self.buildHierarchy(cacheResults);
                        self.toggleView();
                        addEventsToElements();
                        return;
                    }
                }
            }
            //No cache hit, REST call required.
            self.queryRemoteInterface();
        };
    
        //Executes a REST call and builds the navigation hierarchy.
        self.queryRemoteInterface = function () {
            var oDataRequest = getRequest(query);
            $.ajax(oDataRequest).done(function (data) {
                var results = [];
                $.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function (i, item) {
    
                    if (i == 0) {
                        //Add root element.
                        var rootItem = new SPOCustom.Models.NavigationNode();
                        rootItem.Title("Root");
                        rootItem.Url(root);
                        rootItem.Parent(null);
                        results.push(rootItem);
                    }
                    var navItem = getNavigationFromDto(item);
                    results.push(navItem);
                });
                //Add to local cache
                localStorage["nodesCache"] = ko.toJSON(results);
    
                localStorage["nodesCachedAt"] = new Date().getTime();
                self.nodes(results);
                if (self.nodes().length > 0) {
                    var unsortedArray = self.nodes();
                    var sortedArray = unsortedArray.sort(self.sortObjectsInArray);
    
                    self.buildHierarchy(sortedArray);
                    self.toggleView();
                    addEventsToElements();
                }
            }).fail(function () {
                //Handle error here!!
                $("#loading").hide();
                $("#error").show();
            });
        };
        self.toggleView = function () {
            var navContainer = document.getElementById("navContainer");
            ko.applyBindings(self, navContainer);
            $("#loading").hide();
            $("#navContainer").show();
    
        };
        //Uses linq.js to build the navigation tree.
        self.buildHierarchy = function (enumerable) {
            self.hierarchy(Enumerable.From(enumerable).ByHierarchy(function (d) {
                return d.Parent() == null;
            }, function (parent, child) {
                if (parent.Url() == null || child.Parent() == null)
                    return false;
                return parent.Url().toUpperCase() == child.Parent().toUpperCase();
            }).ToArray());
    
            self.sortChildren(self.hierarchy()[0]);
        };
    
    
        self.sortChildren = function (parent) {
    
            // sjip processing if no children
            if (!parent || !parent.children || parent.children.length === 0) {
                return;
            }
    
            parent.children = parent.children.sort(self.sortObjectsInArray2);
    
            for (var i = 0; i < parent.children.length; i++) {
                var elem = parent.children[i];
    
                if (elem.children && elem.children.length > 0) {
                    self.sortChildren(elem);
                }
            }
        };
    
        // ByHierarchy method breaks the sorting in chrome and firefix 
        // we need to resort  as ascending
        self.sortObjectsInArray2 = function (a, b) {
            if (a.item.Title() > b.item.Title())
                return 1;
            if (a.item.Title() < b.item.Title())
                return -1;
            return 0;
        };
    
    
        self.sortObjectsInArray = function (a, b) {
            if (a.Title() > b.Title())
                return -1;
            if (a.Title() < b.Title())
                return 1;
            return 0;
        }
    }
    
    //Loads the navigation on load and binds the event handlers for mouse interaction.
    function InitCustomNav() {
        var viewModel = new NavigationViewModel();
        viewModel.loadNavigatioNodes();
    }
    
    function addEventsToElements() {
        //events.
        $("li.dynamic-children").mouseover(function () {
            var position = $(this).position();
            $(this).find("ul").css({ width: 125, left: position.left + 10, top: 50 });
    
        })
            .mouseout(function () {
                $(this).find("ul").css({ width: 0, left: -99999, top: 0 });
            });
    }
    
    _spBodyOnLoadFunctionNames.push("InitCustomNav");
    

    Untuk meringkas kode yang diperlihatkan di atas dalam fungsi $(document).ready jQuery ada objek viewModel dibuat dan lalu loadNavigationNodes() berfungsi pada objek yang disebut. Fungsi ini baik memuat hierarki navigasi sebelumnya bawaan yang disimpan dalam penyimpanan lokal HTML5 klien browser atau panggilan fungsi queryRemoteInterface().

    QueryRemoteInterface() menyusun permintaan menggunakan fungsi getRequest() dengan parameter kueri yang ditentukan sebelumnya dalam skrip dan lalu mengembalikan data dari server. Data ini adalah dasarnya array semua situs di kumpulan situs yang dinyatakan sebagai objek transfer data dengan berbagai properti. Data ini lalu diuraikan ke objek sebelumnya ditentukan SPO.Models.NavigationNode yang menggunakan Knockout.js untuk membuat diamati properti untuk digunakan dengan data mengikat nilai ke HTML yang kita tetapkan versi yang lebih lama. Objek lalu dimasukkan ke dalam array hasil. Array ini adalah diuraikan ke dalam JSON menggunakan Ko dan disimpan dalam penyimpanan browser lokal untuk meningkatkan kinerja pada pemuatan halaman masa mendatang.

  8. Berikutnya, hasil yang ditetapkan untuk self.nodes array dan hierarki yang dibuat dari objek yang menggunakan linq.js menetapkan output ke array self.heirarchy. Array ini adalah objek yang terikat ke HTML. Ini selesai dalam fungsi toggleView() melewati objek diri ke fungsi ko.applyBinding() . Ini lalu menyebabkan array hierarki yang terikat ke HTML berikut ini:

    <div data-bind=”foreach: hierarchy” class=”noindex ms-core-listMenu-horizontalBox”>

    Akhirnya, penangan acara untuk mouseenter dan mouseexit ditambahkan ke tingkat teratas navigasi untuk menangani menu turun bawah subsitus yang dilakukan pada fungsi addEventsToElements() .

    Hasil dari navigasi bisa dilihat di layar shot di bawah ini:

    Cuplikan layar hasil navigasi

    Dalam contoh kompleks navigasi halaman segar muat tanpa memperlihatkan penyinggahan lokal yang waktu di server telah dipotong ke bawah dari navigasi struktural benchmark untuk mendapatkan hasil yang sama seperti pendekatan navigasi terkelola.

    Cuplikan layar SPRequestDuration 301

    Satu keuntungan utama pendekatan ini adalah bahwa dengan menggunakan penyimpanan lokal HTML5, navigasi disimpan secara lokal untuk pengguna saat mereka memuat halaman.

Kami mendapatkan peningkatan kinerja utama dari menggunakan pencarian API untuk navigasi struktural; Namun, butuh beberapa teknis kemampuan untuk menjalankan dan mengkustomisasi fungsionalitas ini. Dalam contoh penerapan, situs mengurutkan dengan cara yang sama seperti di luar kotak navigasi struktural; Urutan Alfabet. Jika Anda ingin menyimpang dari urutan ini, akan lebih rumit mengembangkan dan mempertahankan. Juga, pendekatan ini mengharuskan Anda untuk menyimpang dari halaman master yang didukung. Jika halaman master kustom tidak dipertahankan, situs Anda akan lewatkan pada pembaruan dan penyempurnaan yang Microsoft membuat halaman master.

Kode di atas memiliki dependensi berikut ini:

Versi saat ini LinqJS tidak berisi metode ByHierarchy yang digunakan dalam kode di atas dan akan berganti kode navigasi. Untuk memperbaiki ini, tambahkan metode berikut ke file Linq.js sebelum baris "Ratakan: function".

ByHierarchy: function(firstLevel, connectBy, orderBy, ascending, parent) {
     ascending = ascending == undefined ? true : ascending;
     var orderMethod = ascending == true ? 'OrderBy' : 'OrderByDescending';
     var source = this;
     firstLevel = Utils.CreateLambda(firstLevel);
     connectBy = Utils.CreateLambda(connectBy);
     orderBy = Utils.CreateLambda(orderBy);
    
     //Initiate or increase level
     var level = parent === undefined ? 1 : parent.level + 1;

    return new Enumerable(function() {
         var enumerator;
         var index = 0;

        var createLevel = function() {
                 var obj = {
                     item: enumerator.Current(),
                     level : level
                 };
                 obj.children = Enumerable.From(source).ByHierarchy(firstLevel, connectBy, orderBy, ascending, obj);
                 if (orderBy !== undefined) {
                     obj.children = obj.children[orderMethod](function(d) {
                         return orderBy(d.item); //unwrap the actual item for sort to work
                     });
                 }
                 obj.children = obj.children.ToArray();
                 Enumerable.From(obj.children).ForEach(function(child) {
                     child.getParent = function() {
                         return obj;
                     };
                 });
                 return obj;
             };

        return new IEnumerator(

        function() {
             enumerator = source.GetEnumerator();
         }, function() {
             while (enumerator.MoveNext()) {
                 var returnArr;
                 if (!parent) {
                     if (firstLevel(enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }

                } else {
                     if (connectBy(parent.item, enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }
                 }
             }
             return false;
         }, function() {
             Utils.Dispose(enumerator);
         })
     });
 },

Catatan: Penafian Terjemahan Mesin: Artikel ini telah diterjemahan oleh sistem komputer tanpa campur tangan manusia. Microsoft menawarkan terjemahan mesin ini untuk membantu pengguna yang bukan penutur bahasa Inggris agar dapat menikmati konten tentang produk, layanan, dan teknologi Microsoft. Karena artikel ini diterjemahkan oleh mesin, mungkin akan terdapat kesalahan kosa kata, sintaksis, atau tata bahasa.

Kembangkan keterampilan Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×