[{"data":1,"prerenderedAt":891},["ShallowReactive",2],{"navigation_docs":3,"-advanced-topics-drupal-javascript":233,"-advanced-topics-drupal-javascript-surround":887},[4,27,77,127,161,219],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119,123],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Drupal JavaScript","\u002Fadvanced-topics\u002Fdrupal-javascript","3.advanced-topics\u002F62.drupal-javascript",{"title":116,"path":117,"stem":118},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":120,"path":121,"stem":122},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":124,"path":125,"stem":126},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":128,"icon":129,"path":130,"stem":131,"children":132,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[133,137,141,145,149,153,157],{"title":134,"path":135,"stem":136},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":138,"path":139,"stem":140},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":142,"path":143,"stem":144},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":146,"path":147,"stem":148},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":150,"path":151,"stem":152},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":154,"path":155,"stem":156},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":158,"path":159,"stem":160},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":162,"icon":163,"path":164,"stem":165,"children":166,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[167,171,175,179,183,187,191,195,199,203,207,211,215],{"title":168,"path":169,"stem":170},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":172,"path":173,"stem":174},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":176,"path":177,"stem":178},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":180,"path":181,"stem":182},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":184,"path":185,"stem":186},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":188,"path":189,"stem":190},"Drupal JS libraries","\u002Fnuxt\u002Fdrupal-libraries","5.nuxt\u002F37.drupal-libraries",{"title":192,"path":193,"stem":194},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":196,"path":197,"stem":198},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":200,"path":201,"stem":202},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":204,"path":205,"stem":206},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":208,"path":209,"stem":210},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":212,"path":213,"stem":214},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":216,"path":217,"stem":218},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":220,"icon":221,"path":222,"stem":223,"children":224,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[225,229],{"title":226,"path":227,"stem":228},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":230,"path":231,"stem":232},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":234,"title":112,"body":235,"description":370,"extension":881,"links":882,"meta":883,"navigation":884,"path":113,"seo":885,"stem":114,"__hash__":886},"docs\u002F3.advanced-topics\u002F62.drupal-javascript.md",{"type":236,"value":237,"toc":872},"minimark",[238,243,264,268,272,291,361,364,754,758,761,809,812,817,827,831,843,847,868],[239,240,242],"h2",{"id":241},"overview","Overview",[244,245,246,247,251,252,259,260,263],"p",{},"Drupal attaches JavaScript libraries to the render arrays it builds - form ",[248,249,250],"code",{},"#states",", autocomplete, module behaviours. In a decoupled setup only the rendered markup travels to the frontend, so those attachments would be lost on the way out. To avoid that, the ",[253,254,258],"a",{"href":255,"rel":256},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcustom_elements",[257],"nofollow","Custom Elements"," module emits every attached library as a ",[248,261,262],{},"\u003Cdrupal-library-*>"," custom element next to the markup, such that a frontend can load the JavaScript and run the Drupal behaviours.",[265,266,267],"note",{},"Library elements are emitted by Custom Elements 3.x, in releases after 3.4.1.",[239,269,271],{"id":270},"how-does-it-work","How does it work?",[244,273,274,275,278,279,282,283,286,287,290],{},"Whenever Drupal converts a render array into a custom element - a ",[253,276,277],{"href":109},"Drupal form",", a fallback-rendered ",[253,280,281],{"href":121},"block",", a ",[253,284,285],{"href":71},"Canvas"," component tree - the libraries that bubbled up into the render array's ",[248,288,289],{},"#attached"," are turned into custom elements:",[292,293,294,298,301,332,351,358],"ul",{},[295,296,297],"li",{},"Library dependencies are resolved into load order by Drupal, so the frontend can load the files sequentially without knowing anything about Drupal's library graph.",[295,299,300],{},"One element is emitted per library that carries JavaScript, in that order, as a sibling preceding the markup in the same slot. Libraries contributing only CSS or settings are skipped.",[295,302,303,304,307,308,311,312,315,316,319,320,323,324,327,328,331],{},"The element name is the library name, lower-cased and with ",[248,305,306],{},"\u002F",", ",[248,309,310],{},"."," and ",[248,313,314],{},"_"," replaced by ",[248,317,318],{},"-",": ",[248,321,322],{},"core\u002Fdrupal.states"," becomes ",[248,325,326],{},"drupal-library-core-drupal-states",". The verbatim library name stays available in the ",[248,329,330],{},"library"," prop.",[295,333,334,335,338,339,342,343,346,347,350],{},"Each element carries its library's JavaScript files in the ",[248,336,337],{},"js"," prop, as ",[248,340,341],{},"url"," (root-relative, with a cache-busting version query - or absolute for external assets) plus the ",[248,344,345],{},"attributes"," Drupal would put on the ",[248,348,349],{},"\u003Cscript>"," tag.",[295,352,353,354,357],{},"The merged ",[248,355,356],{},"drupalSettings"," are added to the first library element, JSON-encoded as a string so that setting keys reach the frontend verbatim.",[295,359,360],{},"Stylesheets are not emitted: the decoupled frontend brings its own styles.",[244,362,363],{},"Example of a form response carrying two libraries:",[365,366,371],"pre",{"className":367,"code":368,"language":369,"meta":370,"style":370},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"element\": \"drupal-form-example-form\",\n  \"slots\": {\n    \"default\": [\n      {\n        \"element\": \"drupal-library-core-drupal\",\n        \"props\": {\n          \"library\": \"core\u002Fdrupal\",\n          \"js\": [{ \"url\": \"\u002Fcore\u002Fmisc\u002Fdrupal.js?v=11.3.13\", \"attributes\": [] }],\n          \"drupalSettings\": \"{\\\"ajaxTrustedUrl\\\":{\\\"form_action_p_4kMHZg\\\":true}}\"\n        }\n      },\n      {\n        \"element\": \"drupal-library-core-drupal-states\",\n        \"props\": {\n          \"library\": \"core\u002Fdrupal.states\",\n          \"js\": [{ \"url\": \"\u002Fcore\u002Fmisc\u002Fstates.js?v=11.3.13\", \"attributes\": [] }]\n        }\n      },\n      \"\u003Cform class=\\\"example-form\\\">...\u003C\u002Fform>\"\n    ]\n  }\n}\n","json","",[248,372,373,382,410,425,442,448,470,484,506,553,594,600,606,611,630,643,662,705,710,715,736,742,748],{"__ignoreMap":370},[374,375,378],"span",{"class":376,"line":377},"line",1,[374,379,381],{"class":380},"sMK4o","{\n",[374,383,385,388,392,395,398,401,405,407],{"class":376,"line":384},2,[374,386,387],{"class":380},"  \"",[374,389,391],{"class":390},"spNyl","element",[374,393,394],{"class":380},"\"",[374,396,397],{"class":380},":",[374,399,400],{"class":380}," \"",[374,402,404],{"class":403},"sfazB","drupal-form-example-form",[374,406,394],{"class":380},[374,408,409],{"class":380},",\n",[374,411,413,415,418,420,422],{"class":376,"line":412},3,[374,414,387],{"class":380},[374,416,417],{"class":390},"slots",[374,419,394],{"class":380},[374,421,397],{"class":380},[374,423,424],{"class":380}," {\n",[374,426,428,431,435,437,439],{"class":376,"line":427},4,[374,429,430],{"class":380},"    \"",[374,432,434],{"class":433},"sBMFI","default",[374,436,394],{"class":380},[374,438,397],{"class":380},[374,440,441],{"class":380}," [\n",[374,443,445],{"class":376,"line":444},5,[374,446,447],{"class":380},"      {\n",[374,449,451,454,457,459,461,463,466,468],{"class":376,"line":450},6,[374,452,453],{"class":380},"        \"",[374,455,391],{"class":456},"sbssI",[374,458,394],{"class":380},[374,460,397],{"class":380},[374,462,400],{"class":380},[374,464,465],{"class":403},"drupal-library-core-drupal",[374,467,394],{"class":380},[374,469,409],{"class":380},[374,471,473,475,478,480,482],{"class":376,"line":472},7,[374,474,453],{"class":380},[374,476,477],{"class":456},"props",[374,479,394],{"class":380},[374,481,397],{"class":380},[374,483,424],{"class":380},[374,485,487,490,493,495,497,499,502,504],{"class":376,"line":486},8,[374,488,489],{"class":380},"          \"",[374,491,330],{"class":492},"swJcz",[374,494,394],{"class":380},[374,496,397],{"class":380},[374,498,400],{"class":380},[374,500,501],{"class":403},"core\u002Fdrupal",[374,503,394],{"class":380},[374,505,409],{"class":380},[374,507,509,511,513,515,517,520,522,525,527,529,531,534,536,539,541,543,545,547,550],{"class":376,"line":508},9,[374,510,489],{"class":380},[374,512,337],{"class":492},[374,514,394],{"class":380},[374,516,397],{"class":380},[374,518,519],{"class":380}," [{",[374,521,400],{"class":380},[374,523,341],{"class":524},"su27w",[374,526,394],{"class":380},[374,528,397],{"class":380},[374,530,400],{"class":380},[374,532,533],{"class":403},"\u002Fcore\u002Fmisc\u002Fdrupal.js?v=11.3.13",[374,535,394],{"class":380},[374,537,538],{"class":380},",",[374,540,400],{"class":380},[374,542,345],{"class":524},[374,544,394],{"class":380},[374,546,397],{"class":380},[374,548,549],{"class":380}," []",[374,551,552],{"class":380}," }],\n",[374,554,556,558,560,562,564,566,569,573,576,578,581,583,586,588,591],{"class":376,"line":555},10,[374,557,489],{"class":380},[374,559,356],{"class":492},[374,561,394],{"class":380},[374,563,397],{"class":380},[374,565,400],{"class":380},[374,567,568],{"class":403},"{",[374,570,572],{"class":571},"sTEyZ","\\\"",[374,574,575],{"class":403},"ajaxTrustedUrl",[374,577,572],{"class":571},[374,579,580],{"class":403},":{",[374,582,572],{"class":571},[374,584,585],{"class":403},"form_action_p_4kMHZg",[374,587,572],{"class":571},[374,589,590],{"class":403},":true}}",[374,592,593],{"class":380},"\"\n",[374,595,597],{"class":376,"line":596},11,[374,598,599],{"class":380},"        }\n",[374,601,603],{"class":376,"line":602},12,[374,604,605],{"class":380},"      },\n",[374,607,609],{"class":376,"line":608},13,[374,610,447],{"class":380},[374,612,614,616,618,620,622,624,626,628],{"class":376,"line":613},14,[374,615,453],{"class":380},[374,617,391],{"class":456},[374,619,394],{"class":380},[374,621,397],{"class":380},[374,623,400],{"class":380},[374,625,326],{"class":403},[374,627,394],{"class":380},[374,629,409],{"class":380},[374,631,633,635,637,639,641],{"class":376,"line":632},15,[374,634,453],{"class":380},[374,636,477],{"class":456},[374,638,394],{"class":380},[374,640,397],{"class":380},[374,642,424],{"class":380},[374,644,646,648,650,652,654,656,658,660],{"class":376,"line":645},16,[374,647,489],{"class":380},[374,649,330],{"class":492},[374,651,394],{"class":380},[374,653,397],{"class":380},[374,655,400],{"class":380},[374,657,322],{"class":403},[374,659,394],{"class":380},[374,661,409],{"class":380},[374,663,665,667,669,671,673,675,677,679,681,683,685,688,690,692,694,696,698,700,702],{"class":376,"line":664},17,[374,666,489],{"class":380},[374,668,337],{"class":492},[374,670,394],{"class":380},[374,672,397],{"class":380},[374,674,519],{"class":380},[374,676,400],{"class":380},[374,678,341],{"class":524},[374,680,394],{"class":380},[374,682,397],{"class":380},[374,684,400],{"class":380},[374,686,687],{"class":403},"\u002Fcore\u002Fmisc\u002Fstates.js?v=11.3.13",[374,689,394],{"class":380},[374,691,538],{"class":380},[374,693,400],{"class":380},[374,695,345],{"class":524},[374,697,394],{"class":380},[374,699,397],{"class":380},[374,701,549],{"class":380},[374,703,704],{"class":380}," }]\n",[374,706,708],{"class":376,"line":707},18,[374,709,599],{"class":380},[374,711,713],{"class":376,"line":712},19,[374,714,605],{"class":380},[374,716,718,721,724,726,729,731,734],{"class":376,"line":717},20,[374,719,720],{"class":380},"      \"",[374,722,723],{"class":403},"\u003Cform class=",[374,725,572],{"class":571},[374,727,728],{"class":403},"example-form",[374,730,572],{"class":571},[374,732,733],{"class":403},">...\u003C\u002Fform>",[374,735,593],{"class":380},[374,737,739],{"class":376,"line":738},21,[374,740,741],{"class":380},"    ]\n",[374,743,745],{"class":376,"line":744},22,[374,746,747],{"class":380},"  }\n",[374,749,751],{"class":376,"line":750},23,[374,752,753],{"class":380},"}\n",[239,755,757],{"id":756},"frontend-support","Frontend support",[244,759,760],{},"Library elements are ordinary custom elements, so a frontend renders them like any other element. The component doing so should:",[762,763,764,767,773,779,782,799,806],"ol",{},[295,765,766],{},"Render no markup of its own - the element is a load instruction, not content.",[295,768,769,770,772],{},"Resolve the ",[248,771,337],{}," URLs against the Drupal base URL, since they are root-relative.",[295,774,775,776,778],{},"Add them as ",[248,777,349],{}," tags in the given order and keep execution order, so that dependencies run before dependents.",[295,780,781],{},"Load every URL only once per page, since libraries may share files.",[295,783,784,785,787,788,791,792,794,795,798],{},"Merge ",[248,786,356],{}," into ",[248,789,790],{},"window.drupalSettings"," before any script runs. A decoupled page has no settings ",[248,793,349],{}," for Drupal's own ",[248,796,797],{},"drupalSettingsLoader.js"," to read, so the frontend takes that over.",[295,800,801,802,805],{},"Call ",[248,803,804],{},"Drupal.attachBehaviors(document.body, window.drupalSettings)"," once the scripts have loaded, so the behaviours attach to the server-rendered markup.",[295,807,808],{},"Skip a file that fails to load with a warning instead of aborting: some Drupal \"JavaScript\" is generated per request and may legitimately be unavailable in a decoupled context.",[244,810,811],{},"This is a client-side concern only - there is nothing to do while server-side rendering the page.",[813,814,816],"h3",{"id":815},"example-nuxt","Example: Nuxt",[244,818,819,820,823,824,826],{},"The Nuxt connector module ships a ",[248,821,822],{},"loadLibrary()"," composable doing all of the above, paired with a renderless default component that applies to every library element. See ",[253,825,188],{"href":189}," for the Nuxt-specific documentation.",[239,828,830],{"id":829},"overriding-or-skipping-a-library","Overriding or skipping a library",[244,832,833,834,836,837,839,840,842],{},"Since every library gets a custom element of its own, a frontend can take over a single library by providing a component for that element name, e.g. ",[248,835,326],{}," for ",[248,838,322],{},". On a frontend with a default-component fallback (like ",[253,841,162],{"href":181},"), that component takes precedence over the generic one, so the library's JavaScript is never loaded. That way a library can be replaced by a native frontend implementation, or skipped entirely by rendering nothing.",[239,844,846],{"id":845},"limitations","Limitations",[292,848,849,856,862],{},[295,850,851,855],{},[852,853,854],"strong",{},"No CSS",": libraries whose behaviour relies on Drupal core CSS (dialog, off-canvas) work, but are unstyled until the frontend provides its own styles.",[295,857,858,861],{},[852,859,860],{},"JavaScript-enabled behaviours only",": everything Drupal does server-side stays server-side; this only restores what Drupal would have run in the browser.",[295,863,864,865,867],{},"Only ",[248,866,250],{},"-style behaviours are verified end-to-end so far. Ajax- and dialog-based libraries are expected to need more work in a decoupled context, since they rely on Drupal's own page URLs and response formats.",[869,870,871],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .su27w, html code.shiki .su27w{--shiki-light:#916B53;--shiki-default:#916B53;--shiki-dark:#916B53}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":370,"searchDepth":384,"depth":384,"links":873},[874,875,876,879,880],{"id":241,"depth":384,"text":242},{"id":270,"depth":384,"text":271},{"id":756,"depth":384,"text":757,"children":877},[878],{"id":815,"depth":412,"text":816},{"id":829,"depth":384,"text":830},{"id":845,"depth":384,"text":846},"md",null,{},true,{"title":112,"description":370},"eVCVhGoGYoa9zDvnNWqZ9MM-zfyYrYxGSxb4gC5J2Z8",[888,889],{"title":108,"path":109,"stem":110,"description":370,"children":-1},{"title":116,"path":117,"stem":118,"description":890,"children":-1},"Drupal CMS supports site templates: pre-configured starting points that combine Drupal recipes, a theme, design elements, and default content into a fully functional website ready to use from day one. See the Drupal blog post on site templates for the broader vision.",1786631277992]