Office
Přihlásit se

Možnosti navigace pro službu SharePoint Online

Tento článek popisuje, jak zlepšit načítáním stránek Sharepointu online pomocí spravovanou navigaci nebo vyhledávací navigaci.

Poznámka:  Snažíme se pro vás co nejrychleji zajistit aktuální obsah nápovědy ve vašem jazyce. Tato stránka byla přeložena automaticky a může obsahovat gramatické chyby nebo nepřesnosti. Naším cílem je to, aby pro vás byl její obsah užitečný. Mohli byste nám prosím dát ve spodní části této stránky vědět, jestli vám informace v článku pomohly? Pokud byste se rádi podívali na jeho anglickou verzi, najdete ji tady .

Globální navigace a dotazů potřebné k vytvoření navigační struktury můžete vytvářet stránky načíst další pomalu v Sharepointu Online. Je to proto těmito dotazy odešle jiné požadavek na SQL server. Pro každý webů a podřízených webech, které máte více požadavků jsou určené pro SQL server. Tento problém se týká taky stránek předlohy. To znamená, že globální navigace je také vliv na.

Některé weby služby SharePoint vyžaduje velkých a složitých struktury. Použití navigační struktury mimo pole, která používá obsah dotazu, můžete mít za následek načítáním stránek pomalé kvůli více vrstev webu. Jednotlivé vrstvy podřízených webů můžete vytvořit taky další dotaz.

Dvěma způsoby hlavního navigačního mimo pole v SharePoint i třetí, vlastní, vyhledávací přístup. Jednotlivé možnosti má výhody a nevýhody podle pokynů v následující tabulce.

Navigační struktury

Spravovanou navigaci

Vyhledávací navigace

V oblasti IT:

  • Snadné konfiguraci

  • Oříznutí zabezpečení

  • Automaticky aktualizuje při přidání webů

V oblasti IT:

  • Snadná

V oblasti IT:

  • Oříznutí zabezpečení

  • Automaticky aktualizuje při přidání webů

  • Rychlé načítání času a místní mezipaměti navigační struktury

Nevýhody:

  • Špatně provádět s struktura složité webu

Nevýhody:

  • Nejsou automaticky aktualizován tak, aby odrážely struktura webu

Nevýhody:

  • Žádné možnosti snadno pořadí weby

  • Vyžaduje přizpůsobení stránky předlohy (technická dovedností povinné)

Pokud máte web, kde je spousta podřízených webů a používáte navigační struktury, může být zpomaluje stránku výrazně načte. Požadovanou nejvhodnější možnost pro web závisí na vašim požadavkům na webu a na technické funkce. Pokud se vám pomocí kustomizovanou stránku předlohy a máte několik možností v organizaci zachovat změny, které může dojít v výchozí stránku předlohy Sharepointu Online, možnost Vyhledávací vytvoří nejlepší možnosti uživatelů. Pokud budete potřebovat jednoduché základu uprostřed mezi navigační struktury mimo pole a hledání, je spravovanou navigaci vynikajícím možnost. Možnost spravovanou navigaci můžete udržovat pomocí konfigurace nezahrnuje soubory přizpůsobení kódu a je výrazně vyšší než navigační struktury mimo pole.

Další možností je restrukturalizace existující web a sníží počet navigační položky a podřízených webů povinné. Důvodem je navigační struktury provádí dobře, dokud není příliš složité strukturu webů a navigace.

Tento článek porovnává různých postupů v kolekci webů příklad. V kolekci webů příklad má 11 podřízených webů a každý podřízený web aspoň čtyři další podřízené weby.

Screenshot showing sites and sub sites

Použití navigační struktury v Sharepointu Online

To je mimo pole navigace pro ve výchozím nastavení a řešení jednoduchých a odpovídající ve většině případů. Pokud není složité struktuře několik podřízených webů nebo počet úrovní podřízených webů, provede dobře navigační struktury. Hlavních výhod tento přístup je, že je oříznutí zabezpečení, automaticky aktualizuje při přidávání nové weby a nevyžaduje všechny přizpůsobení stránky předlohy. Netechnických uživatele můžete taky snadno přidat položky skrýt položky a správa navigace na stránce nastavení.

Zapnutí navigační struktury v Sharepointu Online

Znázorňující, jak výkonu ve standardní řešení Sharepointu Online se navigační struktury a zobrazit podřízené weby možnost Zapnuto. Tady je snímek obrazovky nastavení na stránce Nastavení webu > Navigace.

Screenshot showing subsites

Analýza výkonu navigační struktury v Sharepointu Online

K analýze výkonu na stránce Sharepointu karta síťové nástroje vývojář F12 v aplikaci Internet Explorer.

Screenshot showing F12 dev tools Network tab

Na kartě síť klikněte na stránce .aspx, která se načítá a potom klikněte na kartu Podrobnosti.

Screenshot showing the details tab

Klikněte na Hlavičky odpovědí.

Screenshot of Details tab

SharePoint vrátí některá užitečná diagnostické informace v záhlavích jeho odpověď. Jednou z nejužitečnější je SPRequestDuration    , což je hodnota v milisekundách doby žádost přijal ke zpracování na serveru.

Na následující obrazovce snímek Zobrazit podřízené weby je zrušené zaškrtnutí políčka pro navigační struktury. To znamená, že je v globální navigaci jenom odkaz kolekce webů:

Screenshot showing load times as request duration

Klíč SPRequestDuration    má hodnotu 245 milisekund. Představuje doba trvání vrátíte žádost. Vzhledem k tomu, že existuje pouze jednu položku navigace na webu, je dobré srovnávacích pro jak SharePoint Online provede bez hodně navigace. Další snímek obrazovky ukazuje, přidání v podřízené vliv bude mít tento klíč.

Screenshot showing a request duration of 2502 ms

Přidání podřízených webů podstatně zvýšil časové náročnosti se vrátíte požadavek na stránku.

Výhody používání běžná strukturovaných navigace je, že můžete snadno uspořádání pořadí, skrýt weby, přidat stránky, jsou výsledky jiné oříznutí zabezpečení a nejsou přesahující podporované stránek předlohy v Sharepointu Online. Pokud pečlivě strukturalizaci webu a minimalizovat podřízených webů v kolekci webů navigační struktury provede dobře.

Použití spravovanou navigaci a spravovaná metadata v Sharepointu Online

Spravovanou navigaci způsobem jiné mimo pole využívající znovu vytvořit stejný druh funkce jako navigační struktury.

Výhodou používání spravovaných metadat je se rychleji k načtení dat než obsahu pomocí dotazu k vytvoření navigaci na webu. Ačkoli je, že rychleji nejde žádným způsobem oříznutí zabezpečení výsledky tak pokud uživatel nemá přístup na daném webu na odkaz pořád zobrazí, ale vede k chybová zpráva.

Jak implementovat spravovanou navigaci a výsledky   

Existuje několik články na webu TechNet podrobností o spravovanou navigaci, například najdete v tématu Přehled spravovanou navigaci na SharePoint serveru 2013.

Abyste mohli implementovat spravovanou navigaci, musíte mít termínů ukládat oprávnění správce. Nastavením slov s adresy URL, které odpovídají struktura kolekce webů spravovanou navigaci slouží k nahrazení navigační struktury. Příklad:

Screenshot of Subsite1 example

Následující příklad ukazuje výkonu složité navigace pomocí spravovanou navigaci.

Screenshot of SPRequestDuration example

Konzistentní používání spravovanou navigaci zlepšuje výkon porovnáním dotazu navigační struktury přístup k obsahu.

Pomocí vyhledávací skriptování na straně klienta

Pomocí pole Hledat můžete využít indexy, které jsou sestaveny v pozadí pomocí souvislého procházení. To znamená, že nejsou žádné hodně obsahu dotazy. Výsledky hledání jsou doplněné z indexu vyhledávání a výsledky jsou oříznutí zabezpečení. Toto je rychlejší než použití běžná obsahu dotazů. Pomocí pole Hledat navigační struktury, zejména v případě, že máte strukturu složité webu bude zrychlit načítání čas značně stránky. V hlavním výhodou přes spravovanou navigaci je využívat oříznutí zabezpečení.

Tento postup, musíte vytvořit vlastní stránku předlohy a nahrazení kódu mimo pole navigace vlastní kód HTML. Tento postup nahrazení kódu navigace v seattle.html soubor.

V tomto příkladu se otevřít soubor seattle.html a nahradit celý prvek id = "DeltaTopNavigation" s vlastní kód HTML.

Příklad: Nahrazení kódu mimo pole navigace na stránce předlohy

  1. Přejděte na stránce Nastavení webu.

  2. Otevření Galerie stránek předlohy kliknutím na Stránky předlohy.

  3. Tady můžete procházet knihovnu a stáhněte si soubor seattle.master.

  4. Upravte kód v textovém editoru a odstranění bloku kódu v následujícím snímku obrazovky.

    Screenshot of DeltaTopNavigation code to delete
  5. Odebrání kód mezi < SharePoint:AjaxDelta id = "DeltaTopNavigation" > a < \SharePoint:AjaxDelta > značky a nahraďte jej následující fragment kódu:

    <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 level1">
                    <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 }">
                   
                     <!-- ko if: children.length > 0-->
                        <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
                            <span class="menu-item-text" data-bind="text: item.Title">
                            </span>
                        </span>
                    <!-- /ko -->
                    <!-- ko if: children.length == 0-->   
                        <span aria-haspopup="true" class="ms-navedit-flyoutArrow dynamic-children">
                            <span class="menu-item-text" data-bind="text: item.Title">
                            </span>
                        </span>
                    <!-- /ko -->   
                    </a>
                   
                    <!-- ko if: children.length > 0-->                                                       
                    <ul id="menu"  data-bind="foreach: children;" class="dynamic  level2" >
                        <li class="dynamic level2">
                            <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline  ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
             
              <!-- ko if: children.length > 0-->
              <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
               <span class="menu-item-text" data-bind="text: item.Title">
               </span>
              </span>
               <!-- /ko -->
              <!-- ko if: children.length == 0-->
              <span aria-haspopup="true" class="ms-navedit-flyoutArrow dynamic-children">
               <span class="menu-item-text" data-bind="text: item.Title">
               </span>
              </span>                 
              <!-- /ko -->   
                            </a>
              <!-- ko if: children.length > 0-->
             <ul id="menu" data-bind="foreach: children;" class="dynamic level3" >
              <li class="dynamic level3">
               <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>
               <!-- /ko -->
                        </li>
                    </ul>
                    <!-- /ko -->
                </li>
            </ul>
        </div>
    </div>
  6. Nahrazení adresu URL v zatížení obrázek značky na začátku, s odkazem na obrázek načítání ve vaší kolekci webů. Po provedení změn, přejmenování souboru a pak ho nahrajte do Galerie stránek předlohy. Tím se vytvoří nový soubor .master.

  7. Tento kód HTML je základní značky, které se zobrazí ve výsledcích hledání vrácených kód v JavaScriptu. Je třeba upravit následující kód změňte hodnotu var root = “site collection URL , jak je ukázáno v následujícím fragment kódu:

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

    Celý soubor JavaScript vypadá takto:

    //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.level1") .mouseover(function () {
              var pozici = $(this).position();
              $, (this).find("ul.level2").css ({šířka: 100, vlevo: position.left + 10, top: 50});

    })
       .mouseout(Function () {
         $, (this).find("ul.level2").css ({vlevo:-99999, začátek: 0});

        });

         $("li.level2") .mouseover(function () {
              var pozici = $(this).position();
              Console.log(JSON.stringify(position));
              $, (this).find("ul.level3").css ({šířka: 100, vlevo: position.left + 95, top: position.top});        

    })
       .mouseout(Function () {
         $, (this).find("ul.level3").css ({vlevo:-99999, začátek: 0});
        });

    } _spBodyOnLoadFunctionNames.push("InitCustomNav");

    Shrnutí uvedeného kódu nad ve funkci $(document).ready jQuery existuje objekt viewModel vytvořili a potom loadNavigationNodes() pracovat na tento objekt je místo toho možnost. Tato funkce buď načte již vytvořené navigační hierarchii uložené v místním úložišti HTML5 prohlížeče klienta nebo volání funkce queryRemoteInterface().

    QueryRemoteInterface() vytvoří žádost o použití funkce getRequest() s parametrem dotazu ve skriptu dříve definované a potom vrátí data ze serveru. Tato data jsou v podstatě maticových všechny weby v kolekci webů tvaru objektů přenos dat s různé vlastnosti. Tato data se pak analyzovat na dříve definované SPO.Models.NavigationNode objekty, které umožňuje vytvářet pozorovatelným vlastnosti pro použití Knockout.js datové vazby hodnoty do formátu HTML, která byla definována dříve. Objekty jsou vložte do pole výsledků. Toto pole je analyzovat do JSON pomocí pád a uložené v úložišti místním prohlížeči Lepší výkon načtení budoucí stránky.

  8. Potom výsledky přiřazené pole self.nodes a hierarchie integrované mimo objektů pomocí linq.js přiřazení výstup maticových self.heirarchy. Toto pole je objekt, který je svázán s HTML. Důvodem je ve funkci toggleView() předáním vlastní objektu funkci ko.applyBinding() . To potom způsobí, že pole hierarchie vázat následující kód HTML:

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

    Nakonec obslužné rutiny pro mouseenter a mouseexit se přidají do nejvyšší úrovně navigace zpracovávání rozevíracích nabídkách podřízený web, který probíhá ve funkci addEventsToElements() .

    Výsledky navigace jsou uvedeny v následující kopie obrazovky:

    Screenshot of navigation results

    V našem příkladu složité navigace nové stránky zatížení bez místní mezipaměti zobrazuje čas strávený na serveru má byla snížit z navigační struktury srovnávacích získáte výsledek podobný jako spravovanou navigaci přístup.

    Screenshot of SPRequestDuration 301

    Jednou z hlavních výhod tento přístup je, že pomocí místní úložiště HTML5 navigace je uložená místně pro uživatele při příštím načtení stránky.

Hlavní výkon získaných ze pomocí vyhledávání rozhraní API pro navigační struktury; však trvá některé technické možnost spustit a úprava tuto funkci. K provedení příkladu jsou uspořádány weby stejným způsobem jako navigační struktury mimo pole; abecedním pořadí. Pokud byste chtěli liší od tohoto pořadí, je složitější vývoj a údržba. Navíc tento postup vyžaduje liší od podporované stránek předlohy. Pokud není zachována kustomizovanou stránku předlohy, váš web bude zmeškaný out dále aktualizace a vylepšení společnost Microsoft neposkytuje do stránek předlohy.

Ve výše uvedeném kódu splnění následujících podmínek:

Aktuální verze LinqJS neobsahuje ByHierarchy metodou ve výše uvedeném kódu a přerušíte kódu navigace. Pokud to pokud chcete opravit, přidejte následující metodu k souboru Linq.js před řádek "Flatten: fungovat ()".

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);
         })
     });
 },
Rozšiřte své dovednosti s Office
Projít školení
Získejte nové funkce jako první
Připojte se k účastníkům programu Office Insiders

Byly tyto informace užitečné?

Děkujeme vám za zpětnou vazbu.

Děkujeme vám za váš názor. Vypadá to, že bude užitečné, když vás spojíme s některým z našich agentů z podpory Office.

×