--- title: Tag description: Page tags. dependency: extension: - page ... This extension activates the tagging feature by utilizing the `kind` property on the page. This extension will also add several new routes such as `http://127.0.0.1/blog/tag/slug` on every page to allow users to list all pages in the current folder by a tag. ### Constant This extension will add a folder called `tag` in the `.\lot` folder, which will also automatically add a constant named `TAG`. ~~~ .php TAG ~~~ ### Method There are some methods added to the default [classes][link:../class]: #### Tags ~~~ .xmp.php Get::tags(string $folder = TAG, …, $sort = [1, 'id'], …): Anemon; ~~~ Function arguments are the same as function [`Get::pages()`][link:../class/get/pages], except the `$folder` parameter that uses `TAG` [constant][link:../constant] value by default, and the `$sort` parameter that uses `id` as the default sort key instead of `time`. #### From ~~~ .xmp.php From::tag($slug, $fail = false): int | $fail; ~~~ Get tag ID from the tag slug. #### To ~~~ .xmp.php To::tag($id, $fail = false): string | $fail; ~~~ Get tag slug from the tag ID. ### Working with Tags [Panel][link:panel] extension can help you to automate everything. But, if you have to, you can still make this extension work without the GUI feature. As the panel extension was created just to convert the generic files and folders interface into a rich graphical user interface. Just like the comparison between _Command Prompt_ appearance to the desktop _Windows_ appearance. Before we start, you need to understand how this extension works. #### Page Properties **First**, know that this extension will add `query` and `tags` properties to the page only if the page contains `kind` property that is not empty. ~~~ .php $page = [ … … 'kind' => [1, 2, 3], // [^1] 'query' => ['foo', 'bar', 'baz'], // [^2] 'tags' => [ // [^3] 'foo' => [ … … 'id' => 1, 'slug' => 'foo', 'url' => 'http://127.0.0.1/tag/foo' ], 'bar' => [ … … 'id' => 2, 'slug' => 'bar', 'url' => 'http://127.0.0.1/tag/bar' ], 'baz' => [ … … 'id' => 3, 'slug' => 'baz', 'url' => 'http://127.0.0.1/tag/baz' ] ] ]; // [^1]: These numbers will be used as the tag ID. // [^2]: These queries are generated automatically based on the available tags. // [^3]: These rich tags data are also generated based on the available tags. ~~~ #### File Structure **Second**, writing a tag file is no different than writing a page file. The only difference is that you must write the `id` property separately from the page. ~~~ .txt lot\ └── tag\ ├── bar\ │ └── id.data ├── baz\ │ └── id.data ├── foo\ │ └── id.data ├── bar.page ├── baz.page └── foo.page ~~~ #### File Content **Third**, make sure to specify a unique number for each `id.data` file. These numbers, then will be used to connect the tag file with the `kind` property on every page. Here’s an example of a tag file content: ~~~ .yaml --- title: Tag Name description: Short description about this tag. ... Long description about this tag. ~~~ #### Connections **Fourth**, to connect between tags with the current page, create a `kind.data` file in the corresponding folder, containing a list of tag’s ID written in a valid JSON format: ~~~ .txt lot\ └── page\ ├── test-page\ │ └── kind.data └── test-page.page ~~~ Example content of `kind.data` file: ~~~ .json [1,2,3] ~~~ You can actually insert the `kind` property on the page header, but this method is a [little inefficient][link:../../article/migration] in terms of performance: ~~~ .yaml --- title: Page Title description: Page description. author: Taufik Nurrohman type: Markdown kind: [1, 2, 3] ... Page content goes here. ~~~ #### Tags List ~~~ .php echo implode(', ', $page->query); ~~~ ~~~ .php $tags = []; foreach ((array) $page->tags as $v) { $tags[] = HTML::a($v->title, $v->url); } echo implode(', ', $tags); ~~~ - [link:../../snippet/list-tag] - [link:../../snippet/page-tag] --- ### Condition These page conditional statements are available: - `$site->has('tags')` → Return the `$page->kind` data from the current page. - `$site->is('tags')` → Return list of tag’s ID found in the current results. ### Class These HTML classes will be added to the `` element that has a `class` attribute: - `has-tags` → Will be added if current page has at least one tag. - `is-tags` → Will be added if there are pages to load in the tags page.