custom-templates.mdx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. ---
  2. title: "Custom templates"
  3. description: "Override HTML templates, static files, and inject custom content"
  4. icon: "paintbrush"
  5. ---
  6. Gogs allows you to customize the appearance and behavior of your instance by overriding HTML templates, replacing static files, and injecting custom content. All customizations are placed under the `custom/` directory and survive code updates.
  7. <Warning>
  8. Be careful when overriding templates and static files, as changes to the upstream Gogs codebase may break your customizations in future releases. Keep track of what you have overridden.
  9. </Warning>
  10. ## Override HTML templates
  11. You can replace any HTML template (including email templates) by placing a customized version under the `custom/templates/` directory.
  12. <Steps>
  13. <Step title="Find the original template">
  14. Locate the template file you want to customize in the `templates/` directory of the Gogs source code. For example, to customize the home page, find `templates/home.tmpl`.
  15. </Step>
  16. <Step title="Copy and edit">
  17. Copy the content of the template file and save your edited version to the corresponding path under `custom/templates/`. For example:
  18. ```
  19. custom/templates/home.tmpl
  20. ```
  21. </Step>
  22. <Step title="Restart Gogs">
  23. Edits to custom HTML templates **require restarting Gogs** to take effect.
  24. </Step>
  25. </Steps>
  26. <Warning>
  27. Override for email templates is disabled when `[server] LOAD_ASSETS_FROM_DISK = true` is set in your configuration. If you are using this setting, email template overrides will not be applied.
  28. </Warning>
  29. ## Override static files
  30. You can replace static files (CSS, JavaScript, images, etc.) by placing customized versions under the `custom/public/` directory.
  31. For example, to override the site favicon, place your version at:
  32. ```
  33. custom/public/img/favicon.png
  34. ```
  35. <Tip>
  36. Edits to custom static files **do not** require restarting Gogs. Changes take effect immediately.
  37. </Tip>
  38. ## Inject custom content
  39. You can inject custom HTML into the head or footer of every page without touching the main repository source code. This is useful for adding analytics code, custom stylesheets, or other static resources.
  40. This approach is **recommended whenever possible** because it has the minimum impact on templates and is less likely to break during upgrades.
  41. The injection points are:
  42. | File | Location | Purpose |
  43. |---|---|---|
  44. | `custom/templates/inject/head.tmpl` | Inside `<head>` | Add stylesheets, meta tags, analytics scripts |
  45. | `custom/templates/inject/footer.tmpl` | Before `</body>` | Add scripts, tracking code, custom footer content |
  46. ### Example: custom CSS file
  47. The following example shows how to include a custom CSS file in your Gogs instance:
  48. <Steps>
  49. <Step title="Create the CSS file">
  50. Create a file named `custom.css` under the `custom/public/css/` directory:
  51. ```
  52. custom/public/css/custom.css
  53. ```
  54. </Step>
  55. <Step title="Add your CSS rules">
  56. Write your CSS rules in the file. For example:
  57. ```css
  58. /* custom/public/css/custom.css */
  59. .dashboard .news .news-item .header {
  60. color: #333;
  61. }
  62. footer {
  63. background-color: #f5f5f5;
  64. }
  65. ```
  66. </Step>
  67. <Step title="Link the stylesheet">
  68. Edit the file `custom/templates/inject/head.tmpl` and add a link to your CSS file:
  69. ```html
  70. <link rel="stylesheet" href="/css/custom.css">
  71. ```
  72. </Step>
  73. <Step title="Restart Gogs">
  74. Restart Gogs to load the new `head.tmpl` injection template. After the initial restart, future edits to the custom CSS file **do not** require restarting Gogs.
  75. </Step>
  76. </Steps>