Hugo’s data/ directory holds structured data that isn’t a page: navigation menus, author profiles, pricing tables, anything your templates read through .Site.Data. These are plain YAML, JSON or TOML files with no frontmatter and no body, which makes them a poor fit for the entry editor and a good fit for a form.
Choose Data in the sidebar to browse the whole directory, nested folders and all. There’s nothing to configure: every .yaml, .yml, .json and .toml file under data/ shows up (or under <base_path>/data/ if you’ve set a base path). Files are listed by name with a format badge, folders are listed above them, and the breadcrumbs start at Data so you can get back out of a nested folder. An amber dot marks a file with unsaved changes.
Editing#
Opening a file gives you two modes, switched with the Visual and Raw buttons in the header.
Visual mode#
Emet has no schema for data files, so it infers a widget from each value:
| Value | Widget |
|---|---|
| String up to 120 characters, no line breaks | Text input |
| Longer or multi-line string | Textarea |
| Number | Number input |
| Boolean | Toggle |
| Array | List with Add item and a remove button per item |
| Object | Nested group with its own Add field |
Each field shows a readable label with the real key in brackets, and a trash icon to remove it. Add field at the bottom adds a new string key at the top level; nested objects have their own. A new list item takes the shape of the first item in the list, so adding to a list of objects gives you an empty object.
That’s enough for most data files. For anything the inference gets wrong (a number you’d rather keep as a string, say), use raw mode.
Raw mode#
A CodeMirror editor with line numbers, folding, bracket matching, search and replace (Ctrl+F) and undo. YAML and JSON get syntax highlighting; TOML files currently get YAML highlighting, which is close enough to be useful and far enough to look slightly odd.
The text is parsed on every keystroke. While it doesn’t parse, the error shows in the bar above the editor and you can’t switch back to visual mode until it’s fixed; as soon as it does, the parsed data becomes what gets saved.
Switching modes#
Going from visual to raw serialises the data in the file’s format, which means comments and hand formatting in the original file are gone as soon as you’ve been through visual mode. If a data file has comments you care about, do your editing in raw mode and don’t switch.
Saving#
Ctrl+S or the Save button commits the file with the message Update <filename>. Discard reloads it from the repository, and closing a file with unsaved changes asks first. Data files have no draft state and no dates: a saved change is live on the next build.
Note that this editor doesn’t do the conflict handling the entry editor does. If the file changed on the branch since you opened it, your save fails with an error; Discard loads the current version and you can reapply your change.
Creating files and folders#
The + button creates a file in the folder you’re in. You give it a name (letters, digits, hyphens and underscores) and pick YAML, JSON or TOML; the extension is added for you (.yaml for YAML), the file starts as an empty object and opens in the editor. Emet checks the name isn’t taken first.
The folder button creates a subfolder. You type a name and Emet slugifies it into a folder name you can edit; because Git can’t store an empty directory, it commits a .gitkeep placeholder into it, which the list hides. You can do this even when data/ doesn’t exist yet.
Deleting#
The trash icon on a file asks for confirmation and then removes it. On GitHub-hosted sites a single delete is queued and pushed by the sync service within half a minute. The trash icon on a folder works only while the folder is empty apart from its .gitkeep; a folder with files in it is refused.