Files
jekyll/docs/datafiles/index.html
jekyllbot d11d4f7c3a Deploy docs from 6da6739952
Y.D.X.: Update WDM (0.1.1 → 0.2.0) in the Windows docs (#9897)

Merge pull request 9897
2025-12-21 20:48:58 +00:00

538 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
<link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" />
<link rel="alternate" type="application/atom+xml" title="Recent commits to Jekylls master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
<link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/css/screen.css" as="style">
<link rel="stylesheet" href="/css/screen.css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Data Files | Jekyll • Simple, blog-aware, static sites</title>
<meta name="generator" content="Jekyll v4.4.1" />
<meta property="og:title" content="Data Files" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="In addition to the built-in variables available from Jekyll, you can specify your own custom data that can be accessed via the Liquid templating system." />
<meta property="og:description" content="In addition to the built-in variables available from Jekyll, you can specify your own custom data that can be accessed via the Liquid templating system." />
<link rel="canonical" href="https://jekyllrb.com/docs/datafiles/" />
<meta property="og:url" content="https://jekyllrb.com/docs/datafiles/" />
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
<meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-12-21T12:48:54-08:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" />
<meta property="twitter:title" content="Data Files" />
<meta name="twitter:site" content="@jekyllrb" />
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-12-21T12:48:54-08:00","datePublished":"2025-12-21T12:48:54-08:00","description":"In addition to the built-in variables available from Jekyll, you can specify your own custom data that can be accessed via the Liquid templating system.","headline":"Data Files","image":"https://jekyllrb.com/img/jekyll-og.png","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/docs/datafiles/"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"url":"https://jekyllrb.com/docs/datafiles/"}</script>
<!-- End Jekyll SEO tag -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="wrap"><header>
<div class="flexbox">
<div class="center-on-mobiles">
<h1>
<a href="/" class="logo">
<span class="sr-only">Jekyll</span>
<img src="/img/logo-2x.png" width="140" height="65" alt="Jekyll Logo">
</a>
</h1>
</div>
<nav class="main-nav hide-on-mobiles">
<ul>
<li><a href="/">Home</a></li>
<li class="current"><a href="/docs/">Docs</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="/showcase/">Showcase</a></li>
<li><a href="/news/">News</a></li>
</ul>
</nav>
<div class="search hide-on-mobiles">
<input type="text" id="docsearch-input" placeholder="Search the docs…" aria-label="Search"></div>
<div class="meta hide-on-mobiles">
<ul>
<li><a href="https://github.com/jekyll/jekyll/releases/tag/v4.4.1">v4.4.1</a></li>
<li><a href="https://github.com/jekyll/jekyll">GitHub</a></li>
</ul>
</div>
</div>
<nav class="mobile-nav show-on-mobiles">
<ul>
<li><a href="/">Home</a></li>
<li class="current" aria-current="page" ><a href="/docs/">Docs</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="/news/">News</a></li>
<li><a href="https://github.com/jekyll/jekyll" target="_blank" rel="noopener">GitHub</a></li>
</ul></nav>
</header>
<section class="docs">
<div class="grid">
<div class="docs-nav-mobile unit whole show-on-mobiles">
<select id="doc-nav" onchange="navigateToUrl(this)" aria-label="Select a page from the documentation">
<option value="">Navigate the docs…</option>
<optgroup label="Getting Started">
<option value="/docs/">Quickstart</option>
<option value="/docs/installation/">Installation</option>
<option value="/docs/ruby-101/">Ruby 101</option>
<option value="/docs/community/">Community</option>
<option value="/docs/step-by-step/01-setup/">Step by Step Tutorial</option>
</optgroup>
<optgroup label="Build">
<option value="/docs/usage/">Command Line Usage</option>
<option value="/docs/configuration/">Configuration</option>
<option value="/docs/rendering-process/">Rendering Process</option>
</optgroup>
<optgroup label="Content">
<option value="/docs/pages/">Pages</option>
<option value="/docs/posts/">Posts</option>
<option value="/docs/front-matter/">Front Matter</option>
<option value="/docs/collections/">Collections</option>
<option value="/docs/datafiles/">Data Files</option>
<option value="/docs/assets/">Assets</option>
<option value="/docs/static-files/">Static Files</option>
</optgroup>
<optgroup label="Site Structure">
<option value="/docs/structure/">Directory Structure</option>
<option value="/docs/liquid/">Liquid</option>
<option value="/docs/variables/">Variables</option>
<option value="/docs/includes/">Includes</option>
<option value="/docs/layouts/">Layouts</option>
<option value="/docs/permalinks/">Permalinks</option>
<option value="/docs/themes/">Themes</option>
<option value="/docs/pagination/">Pagination</option>
</optgroup>
<optgroup label="Guides">
<option value="/docs/plugins/">Plugins</option>
<option value="/docs/migrations/">Blog Migrations</option>
<option value="/docs/upgrading/">Upgrading</option>
<option value="/docs/deployment/">Deployment</option>
</optgroup>
</select>
</div>
<div class="unit four-fifths">
<article>
<div class="improve right hide-on-mobiles">
<a data-proofer-ignore href="https://github.com/jekyll/jekyll/edit/master/docs/_docs/datafiles.md">
<i class="fa fa-pencil"></i> &nbsp;Improve this page
</a>
</div>
<h1>Data Files</h1>
<p>In addition to the <a href="/docs/variables/">built-in variables</a> available from Jekyll,
you can specify your own custom data that can be accessed via the <a href="https://github.com/Shopify/liquid/wiki/Liquid-for-Designers">Liquid
templating system</a>.</p>
<p>Jekyll supports loading data from <a href="https://yaml.org">YAML</a>, <a href="https://www.json.org/json-en.html">JSON</a>, <a href="https://en.wikipedia.org/wiki/Comma-separated_values">CSV</a>, and <a href="https://en.wikipedia.org/wiki/Tab-separated_values">TSV</a> files located in the <code class="language-plaintext highlighter-rouge">_data</code> directory.
Note that CSV and TSV files <em>must</em> contain a header row.</p>
<p>This powerful feature allows you to avoid repetition in your templates and to
set site specific options without changing <code class="language-plaintext highlighter-rouge">_config.yml</code>.</p>
<p>Plugins/themes can also leverage Data Files to set configuration variables.</p>
<h2 id="the-data-folder">The Data Folder</h2>
<p>The <code class="language-plaintext highlighter-rouge">_data</code> folder is where you can store additional data for Jekyll to use when
generating your site. These files must be YAML, JSON, TSV or CSV files (using either
the <code class="language-plaintext highlighter-rouge">.yml</code>, <code class="language-plaintext highlighter-rouge">.yaml</code>, <code class="language-plaintext highlighter-rouge">.json</code>, <code class="language-plaintext highlighter-rouge">.tsv</code>, or <code class="language-plaintext highlighter-rouge">.csv</code> extension), and they will be
accessible via <code class="language-plaintext highlighter-rouge">site.data</code>.</p>
<h2 id="example-list-of-members">Example: List of members</h2>
<p>Here is a basic example of using Data Files to avoid copy-pasting large chunks
of code in your Jekyll templates:</p>
<p>In <code class="language-plaintext highlighter-rouge">_data/members.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Eric Mill</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">konklone</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Parker Moore</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">parkr</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Liu Fengyun</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">liufengyun</span>
</code></pre></div></div>
<p>Or <code class="language-plaintext highlighter-rouge">_data/members.csv</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>name,github
Eric Mill,konklone
Parker Moore,parkr
Liu Fengyun,liufengyun
</code></pre></div></div>
<p>This data can be accessed via <code class="language-plaintext highlighter-rouge">site.data.members</code> (notice that the files <em>basename</em> determines the variable name and
therefore one should avoid having data files with the same basename but different extensions, in the same directory).</p>
<p>You can now render the list of members in a template:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ul&gt;
<span class="cp">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">member</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">members</span><span class="w"> </span><span class="cp">%}</span>
&lt;li&gt;
&lt;a href="https://github.com/<span class="cp">{{</span><span class="w"> </span><span class="nv">member</span><span class="p">.</span><span class="nv">github</span><span class="w"> </span><span class="cp">}}</span>"&gt;
<span class="cp">{{</span><span class="w"> </span><span class="nv">member</span><span class="p">.</span><span class="nv">name</span><span class="w"> </span><span class="cp">}}</span>
&lt;/a&gt;
&lt;/li&gt;
<span class="cp">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="cp">%}</span>
&lt;/ul&gt;
</code></pre></div></div>
<h2 id="subfolders">Subfolders</h2>
<p>Data files can also be placed in sub-folders of the <code class="language-plaintext highlighter-rouge">_data</code> folder. Each folder
level will be added to a variables namespace. The example below shows how
GitHub organizations could be defined separately in a file under the <code class="language-plaintext highlighter-rouge">orgs</code>
folder:</p>
<p>In <code class="language-plaintext highlighter-rouge">_data/orgs/jekyll.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">username</span><span class="pi">:</span> <span class="s">jekyll</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">Jekyll</span>
<span class="na">members</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Tom Preston-Werner</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">mojombo</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Parker Moore</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">parkr</span>
</code></pre></div></div>
<p>In <code class="language-plaintext highlighter-rouge">_data/orgs/doeorg.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">username</span><span class="pi">:</span> <span class="s">doeorg</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">Doe Org</span>
<span class="na">members</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">John Doe</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">jdoe</span>
</code></pre></div></div>
<p>The organizations can then be accessed via <code class="language-plaintext highlighter-rouge">site.data.orgs</code>, followed by the
file name:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ul&gt;
<span class="cp">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">org_hash</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">orgs</span><span class="w"> </span><span class="cp">%}</span>
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">org</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">org_hash</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="w"> </span><span class="cp">%}</span>
&lt;li&gt;
&lt;a href="https://github.com/<span class="cp">{{</span><span class="w"> </span><span class="nv">org</span><span class="p">.</span><span class="nv">username</span><span class="w"> </span><span class="cp">}}</span>"&gt;
<span class="cp">{{</span><span class="w"> </span><span class="nv">org</span><span class="p">.</span><span class="nv">name</span><span class="w"> </span><span class="cp">}}</span>
&lt;/a&gt;
(<span class="cp">{{</span><span class="w"> </span><span class="nv">org</span><span class="p">.</span><span class="nv">members</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">size</span><span class="w"> </span><span class="cp">}}</span> members)
&lt;/li&gt;
<span class="cp">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="cp">%}</span>
&lt;/ul&gt;
</code></pre></div></div>
<h2 id="example-accessing-a-specific-author">Example: Accessing a specific author</h2>
<p>Pages and posts can also access a specific data item. The example below shows how to access a specific item:</p>
<p><code class="language-plaintext highlighter-rouge">_data/people.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">dave</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">David Smith</span>
<span class="na">twitter</span><span class="pi">:</span> <span class="s">DavidSilvaSmith</span>
</code></pre></div></div>
<p>The author can then be specified as a page variable in a posts front matter:</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
title: sample post
author: dave
---
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">author</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">people</span><span class="p">[</span><span class="nv">page</span><span class="p">.</span><span class="nv">author</span><span class="p">]</span><span class="w"> </span><span class="cp">%}</span>
&lt;a rel="author"
href="https://twitter.com/<span class="cp">{{</span><span class="w"> </span><span class="nv">author</span><span class="p">.</span><span class="nv">twitter</span><span class="w"> </span><span class="cp">}}</span>"
title="<span class="cp">{{</span><span class="w"> </span><span class="nv">author</span><span class="p">.</span><span class="nv">name</span><span class="w"> </span><span class="cp">}}</span>"&gt;
<span class="cp">{{</span><span class="w"> </span><span class="nv">author</span><span class="p">.</span><span class="nv">name</span><span class="w"> </span><span class="cp">}}</span>
&lt;/a&gt;
</code></pre></div></div>
<p>For information on how to build robust navigation for your site (especially if you have a documentation website or another type of Jekyll site with a lot of pages to organize), see <a href="/tutorials/navigation/">Navigation</a>.</p>
<h2 id="csvtsv-parse-options">CSV/TSV Parse Options</h2>
<p>The way Ruby parses CSV and TSV files can be customized with the <code class="language-plaintext highlighter-rouge">csv_reader</code> and <code class="language-plaintext highlighter-rouge">tsv_reader</code>
configuration options. Each configuration key exposes the same options:</p>
<p><code class="language-plaintext highlighter-rouge">converters</code>: What <a href="https://ruby-doc.org/stdlib-2.5.0/libdoc/csv/rdoc/CSV.html#Converters">CSV converters</a> should be
used when parsing the file. Available options are <code class="language-plaintext highlighter-rouge">integer</code>, <code class="language-plaintext highlighter-rouge">float</code>, <code class="language-plaintext highlighter-rouge">numeric</code>, <code class="language-plaintext highlighter-rouge">date</code>, <code class="language-plaintext highlighter-rouge">date_time</code> and
<code class="language-plaintext highlighter-rouge">all</code>. By default, this list is empty.
<code class="language-plaintext highlighter-rouge">encoding</code>: What encoding the files are in. Defaults to the site <code class="language-plaintext highlighter-rouge">encoding</code> configuration option.
<code class="language-plaintext highlighter-rouge">headers</code>: Boolean field for whether to parse the first line of the file as headers. When <code class="language-plaintext highlighter-rouge">false</code>, it treats the
first row as data. Defaults to <code class="language-plaintext highlighter-rouge">true</code>.</p>
<p>Examples:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">csv_reader</span><span class="pi">:</span>
<span class="na">converters</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">numeric</span>
<span class="pi">-</span> <span class="s">datetime</span>
<span class="na">headers</span><span class="pi">:</span> <span class="kc">true</span>
<span class="na">encoding</span><span class="pi">:</span> <span class="s">utf-8</span>
<span class="na">tsv_reader</span><span class="pi">:</span>
<span class="na">converters</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">all</span>
<span class="na">headers</span><span class="pi">:</span> <span class="kc">false</span>
</code></pre></div></div>
</article>
</div>
<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>Getting Started</h4>
<ul>
<li><a href="/docs/">
Quickstart
</a>
</li>
<li><a href="/docs/installation/">
Installation
</a>
</li>
<li><a href="/docs/ruby-101/">
Ruby 101
</a>
</li>
<li><a href="/docs/community/">
Community
</a>
</li>
<li><a href="/docs/step-by-step/01-setup/">
Step by Step Tutorial
</a>
</li>
</ul>
<h4>Build</h4>
<ul>
<li><a href="/docs/usage/">
Command Line Usage
</a>
</li>
<li><a href="/docs/configuration/">
Configuration
</a>
</li>
<li><a href="/docs/rendering-process/">
Rendering Process
</a>
</li>
</ul>
<h4>Content</h4>
<ul>
<li><a href="/docs/pages/">
Pages
</a>
</li>
<li><a href="/docs/posts/">
Posts
</a>
</li>
<li><a href="/docs/front-matter/">
Front Matter
</a>
</li>
<li><a href="/docs/collections/">
Collections
</a>
</li>
<li class="current"><a href="/docs/datafiles/">
Data Files
</a>
</li>
<li><a href="/docs/assets/">
Assets
</a>
</li>
<li><a href="/docs/static-files/">
Static Files
</a>
</li>
</ul>
<h4>Site Structure</h4>
<ul>
<li><a href="/docs/structure/">
Directory Structure
</a>
</li>
<li><a href="/docs/liquid/">
Liquid
</a>
</li>
<li><a href="/docs/variables/">
Variables
</a>
</li>
<li><a href="/docs/includes/">
Includes
</a>
</li>
<li><a href="/docs/layouts/">
Layouts
</a>
</li>
<li><a href="/docs/permalinks/">
Permalinks
</a>
</li>
<li><a href="/docs/themes/">
Themes
</a>
</li>
<li><a href="/docs/pagination/">
Pagination
</a>
</li>
</ul>
<h4>Guides</h4>
<ul>
<li><a href="/docs/plugins/">
Plugins
</a>
</li>
<li><a href="/docs/migrations/">
Blog Migrations
</a>
</li>
<li><a href="/docs/upgrading/">
Upgrading
</a>
</li>
<li><a href="/docs/deployment/">
Deployment
</a>
</li>
</ul>
</aside>
</div>
<div class="clear"></div>
</div>
</section>
<footer>
<div class="grid">
<div class="unit two-thirds center-on-mobiles">
<p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p>
<p>The contents of this website are <br />&copy;&nbsp;2025 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
</div>
<div class="unit one-third align-right center-on-mobiles">
<p>
Proudly hosted by
<a href="https://github.com">
<img src="/img/footer-logo.png" width="100" height="30" alt="GitHub • Social coding">
</a>
</p>
<p>
Jekyll is funded thanks to its <a href="https://github.com/jekyll/jekyll#sponsors">sponsors!</a>
</p>
</div>
</div>
</footer>
<script>
/* Creates an anchor element with the given ID and link for the permalink*/
const anchorForId = (id) => {
const anchor = document.createElement("a");
anchor.className = "header-link";
anchor.href = `#${id}`;
anchor.innerHTML = `<span class="sr-only">Permalink</span><i class="fa fa-link" aria-hidden="true"></i>`;
anchor.title = "Permalink";
return anchor;
};
/* Finds all headers of the specified level within the given element, and adds a permalink to each header*/
const linkifyAnchors = (level, containingElement) => {
const headers = Array.from(containingElement.getElementsByTagName(`h${level}`));
headers.forEach((header) => {
if (header.id) {
header.appendChild(anchorForId(header.id));
}
});
};
/* Executes the function when the document is ready */
document.onreadystatechange = () => {
if (document.readyState === "complete") {
const contentBlock = document.getElementsByClassName("docs")[0]
?? document.getElementsByClassName("news")[0];
if (!contentBlock) { return; }
for (let level = 1; level <= 6; level++) {
linkifyAnchors(level, contentBlock);
}
}
};
</script>
<!-- Google Analytics (https://www.google.com/analytics) -->
<script>
!function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){
(j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k),
L=e.getElementsByTagName(k)[0],l.src='https://www.google-analytics.com/analytics.js',
L.parentNode.insertBefore(l,L)}(window,document,'script','ga');
ga('create', 'UA-50755011-1', 'jekyllrb.com');
ga('send', 'pageview');
</script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script> docsearch({
apiKey: '50fe39c839958dfad797000f33e2ec17',
indexName: 'jekyllrb',
inputSelector: '#docsearch-input',
enhancedSearchInput: true,
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
const navigateToUrl = (select) => {
const url = select.value;
url && (window.location.href = url);
};
</script>
</body>
</html>