{"id":19074759,"url":"https://github.com/hugoblox/create-shortcode","last_synced_at":"2025-02-22T04:41:37.284Z","repository":{"id":106310731,"uuid":"316569901","full_name":"HugoBlox/create-shortcode","owner":"HugoBlox","description":"Create and share your own shortcodes for the Hugo Static Website Generator","archived":false,"fork":false,"pushed_at":"2020-11-27T21:36:10.000Z","size":4,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-02T17:49:20.297Z","etag":null,"topics":["hugo","hugo-module","hugo-site","hugo-theme","hugo-theme-component"],"latest_commit_sha":null,"homepage":"https://hugoblox.com/templates/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HugoBlox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-11-27T18:07:24.000Z","updated_at":"2023-11-26T17:03:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"1938fdf6-191d-4aae-9bf2-b83e80d5a310","html_url":"https://github.com/HugoBlox/create-shortcode","commit_stats":null,"previous_names":["hugoblox/create-shortcode"],"tags_count":0,"template":true,"template_full_name":"HugoBlox/create-blox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoBlox%2Fcreate-shortcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoBlox%2Fcreate-shortcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoBlox%2Fcreate-shortcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoBlox%2Fcreate-shortcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HugoBlox","download_url":"https://codeload.github.com/HugoBlox/create-shortcode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240127089,"owners_count":19751938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hugo","hugo-module","hugo-site","hugo-theme","hugo-theme-component"],"created_at":"2024-11-09T01:52:14.703Z","updated_at":"2025-02-22T04:41:37.266Z","avatar_url":"https://github.com/HugoBlox.png","language":"HTML","readme":"# Wowchemy Shortcode Starter Template\n\n**Looking to build and publish a [Wowchemy](https://wowchemy.com) shortcode that doesn’t exist yet?**\n\nUnsure if there's already a relevant shortcode? [Explore](https://wowchemy.com/docs/writing-markdown-latex/) the existing shortcodes.\n\n_[**Wowchemy**](https://wowchemy.com) makes it easy to create a beautiful website for free. Edit your site in Markdown, Jupyter, or RStudio, generate it with Hugo, and deploy with GitHub or Netlify. Customize anything on your site with widgets, themes, and language packs._\n\n## 👉 Core Concepts\n\n- Each Wowchemy shortcode consists of an HTML file\n- You may use [Go Templating](https://gohugo.io/templates/introduction/), [shortcode parameters](https://gohugo.io/content-management/shortcodes/), and [Bootstrap](https://getbootstrap.com/docs/4.5/layout/grid/) layouts to design the shortcode\n\n## 🧑‍🎨 Create a Shortcode\n\n1. Click the [_Use This Template_](https://github.com/wowchemy/wowchemy-shortcode-starter/generate) button on GitHub\n   1. Name your repository `wowchemy-shortcode-\u003cSHORTCODE-NAME\u003e` where `\u003cSHORTCODE-NAME\u003e` is an appropriate name for your shortcode\n1. Browse your new GitHub project, click the  `go.mod` file, and then the ✏️ pencil button to edit it\n   1. Replace the placeholder URL in `go.mod` with your new GitHub URL in the form `module github.com/\u003cUSERNAME\u003e/wowchemy-shortcode-\u003cSHORTCODE-NAME\u003e` where `\u003cUSERNAME\u003e` is your GitHub username and `\u003cSHORTCODE-NAME\u003e` is the name of the shortcode\n   1. Scroll to the bottom and click _Commit Changes_ to save\n1. Browse to the `layouts/shortcodes/` folder, click `my-shortcode.html`, and click the ✏️ pencil button to edit it\n   1. Rename `my-shortcode.html` in the text box to a unique ID in the form `github_\u003cUSERNAME\u003e_\u003cSHORTCODE-NAME\u003e.html`, again replacing `\u003cUSERNAME\u003e` with your GitHub username and `\u003cSHORTCODE-NAME\u003e` with your shortcode name\n   1. Scroll to the bottom and click _Commit Changes_ to save\n1. Edit the HTML for your new shortcode\n   - You may use [Go Templating](https://gohugo.io/templates/introduction/) and [Bootstrap](https://getbootstrap.com/docs/4.5/layout/grid/) layouts\n   - View the Hugo docs on [Shortcodes](https://gohugo.io/content-management/shortcodes/)\n   - You can access the shortcode content using `{{.Inner}}`\n   - Check out the [built-in shortcodes](https://github.com/wowchemy/wowchemy-hugo-modules/tree/master/wowchemy/layouts/shortcodes) for inspiration\n\n### Example\n\nSay your GitHub username is `pikachu` and you wish to create a shortcode named `pokemon`:\n\n1. We click _Use This Template_ and enter `wowchemy-shortcode-pokemon` as the project name\n1. We replace the first line of `go.mod` with `module github.com/pikachu/wowchemy-shortcode-pokemon`\n1. We browse to the `layouts/shortcodes/` folder, and rename `my-shortcode.html` to `github_pikachu_pokemon.html`\n1. We customize the HTML in `github_pikachu_pokemon.html`\n1. We add the shortcode to our site and share the shortcode with the community following the guide below\n\n## 🌈 Add the Shortcode to your Site\n\n1. Install your shortcode in your site by referencing it at the bottom of your `config/_defaults/config.toml`:\n   ```toml\n   # At the bottom of your `config.toml` is a Module section:\n   [module]\n\n     # Your existing modules will appear here.\n\n     # Add your shortcode's GitHub URL below.\n     # Replace \u003cUSERNAME\u003e and \u003cSHORTCODE-NAME\u003e with your GitHub username and shortcode name, respectively.\n     [[module.imports]]\n       path = \"github.com/\u003cUSERNAME\u003e/wowchemy-shortcode-\u003cSHORTCODE-NAME\u003e\"\n   ```\n1. Use your shortcode in page content. For example let's create `content/post/test-my-shortcode.md`:\n   ```markdown\n   ---\n   title: My shortcode\n   date: '2020-11-27'\n   ---\n\n   Check out my shortcode:\n\n   {{% github_pikachu_pokemon %}}Content to *process*.{{% /github_pikachu_pokemon %}}\n   ```\n\n## 📢 Share your Shortcode\n\nShare your shortcode with the community on [Discord](https://discord.gg/z8wNYzb) and [Twitter](https://twitter.com/intent/tweet?text=I%27m%20creating%20a%20beautiful%20website%20shortcode%20using%20the%20free%20%E2%9D%A4%EF%B8%8F%2C%20open%20source%20%40wowchemy%20Website%20Builder%20for%20%40GoHugoIO%20by%20%40GeorgeCushen%20%E2%9C%A8%20Have%20some%20feedback%3F%20Please%20comment%20%F0%9F%A4%97\u0026hashtags=MadeWithWowchemy\u0026url=https://wowchemy.com/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugoblox%2Fcreate-shortcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhugoblox%2Fcreate-shortcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugoblox%2Fcreate-shortcode/lists"}