21 lines
11 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-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Nezha Theme Development Environment | Nezha Monitoring</title>
<meta name="description" content="Nezha Monitoring is a lightweight O&M tool">
<link rel="stylesheet" href="/assets/style.17a88c2e.css">
<link rel="modulepreload" href="/assets/app.c59cf861.js">
<link rel="modulepreload" href="/assets/en_US_developer_theme.md.269a5170.lean.js">
<meta name="twitter:title" content="Nezha Theme Development Environment | Nezha Monitoring">
<meta property="og:title" content="Nezha Theme Development Environment | Nezha Monitoring">
</head>
<body>
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/en_US/" aria-label="Nezha Monitoring, back to home" data-v-675d8756 data-v-cc01ef16><!----> Nezha Monitoring</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/en_US/" data-v-b8818f8c>User Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/en_US/developer/index" data-v-b8818f8c>Development Manual <!----></a></div></div><!--]--><div class="item" data-v-eab3edfe><div class="nav-dropdown-link" data-v-eab3edfe data-v-56bf3a3f><button class="button" data-v-56bf3a3f><span class="button-text" data-v-56bf3a3f>Languages</span><span class="right button-arrow" data-v-56bf3a3f></span></button><ul class="dialog" data-v-56bf3a3f><!--[--><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/developer/theme.html" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>简体中文</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item active" href="/en_US/developer/theme.html" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>English</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/nezhahq/nezhahq.github.io" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/en_US/" data-v-b8818f8c>User Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/en_US/developer/index" data-v-b8818f8c>Development Manual <!----></a></div></div><!--]--><div class="item" data-v-eab3edfe><div class="nav-dropdown-link" data-v-eab3edfe data-v-56bf3a3f><button class="button" data-v-56bf3a3f><span class="button-text" data-v-56bf3a3f>Languages</span><span class="right button-arrow" data-v-56bf3a3f></span></button><ul class="dialog" data-v-56bf3a3f><!--[--><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item" href="/developer/theme.html" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>简体中文</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f><div class="nav-dropdown-link-item" data-v-56bf3a3f data-v-bbc27490><a class="item active" href="/en_US/developer/theme.html" data-v-bbc27490><span class="arrow" data-v-bbc27490></span><span class="text" data-v-bbc27490>English</span><span class="icon" data-v-bbc27490><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/nezhahq/nezhahq.github.io" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Development Manual</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/en_US/developer/theme">Create a new theme</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#nezha-theme-development-environment">Nezha Theme Development Environment</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#how-to-use">How to use</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#faq">FAQ</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/en_US/developer/l10n">l10n</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h2 id="nezha-theme-development-environment" tabindex="-1">Nezha Theme Development Environment <a class="header-anchor" href="#nezha-theme-development-environment" aria-hidden="true">#</a></h2><p>Nezha Monitoring provides a theme development environment that you can use to create new Nezha Monitoring themes</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Please note: This development environment only supports <code>dashboard v0.13.16</code> and newer versions.</p></div><h2 id="how-to-use" tabindex="-1">How to use <a class="header-anchor" href="#how-to-use" aria-hidden="true">#</a></h2><ol><li>Clone <a href="https://github.com/nezhahq/skeleton-custom-theme" target="_blank" rel="noopener noreferrer">this repository</a> to local</li><li>Modify the Oauth2 configuration in <code>data/config.yaml</code>The callback connection can be filled with <code>http://localhost</code></li><li>Run <code>docker-compose up</code></li><li>Start development</li><li>Once the theme has been created, you can place <code>theme-custom</code> in <code>/opt/nezha/dashboard/theme-custom</code> on the server</li></ol><h2 id="faq" tabindex="-1">FAQ <a class="header-anchor" href="#faq" aria-hidden="true">#</a></h2><ul><li>If you can&#39;t use port <code>80</code>, change the configuration in <code>docker-compose.yaml</code>.</li></ul></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/nezhahq/nezhahq.github.io/edit/main/docs/en_US/developer/theme.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><!----></div><div class="next" data-v-38ede35f><a class="link" href="/en_US/developer/l10n" data-v-38ede35f><span class="text" data-v-38ede35f>l10n</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"developer_index.md\":\"73745970\",\"developer_l10n.md\":\"84df007d\",\"developer_theme.md\":\"10393f71\",\"en_us_developer_index.md\":\"df68d0e0\",\"en_us_developer_l10n.md\":\"ccda64e7\",\"en_us_developer_theme.md\":\"269a5170\",\"en_us_guide_agent.md\":\"405e94e9\",\"en_us_guide_agentq.md\":\"094fcb6f\",\"en_us_guide_api.md\":\"fde8c0a6\",\"en_us_guide_dashboard.md\":\"1a8d2812\",\"en_us_guide_dashboardq.md\":\"ac04f4d0\",\"en_us_guide_loginq.md\":\"0379f96c\",\"en_us_guide_notifications.md\":\"f2f143b0\",\"en_us_guide_q2.md\":\"bbad7ab9\",\"en_us_guide_q3.md\":\"37e5f372\",\"en_us_guide_q4.md\":\"72447cee\",\"en_us_guide_q5.md\":\"4bd8b06a\",\"en_us_guide_servers.md\":\"f083b70a\",\"en_us_guide_services.md\":\"c8ca2548\",\"en_us_guide_settings.md\":\"25501edb\",\"en_us_guide_tasks.md\":\"5bd4651e\",\"en_us_index.md\":\"3aaf4a98\",\"guide_agent.md\":\"24835087\",\"guide_agentq.md\":\"ebc08c07\",\"guide_api.md\":\"d9d6bcb1\",\"guide_dashboard.md\":\"9b2394f1\",\"guide_dashboardq.md\":\"484015d6\",\"guide_loginq.md\":\"4107977d\",\"guide_notifications.md\":\"b7a587bd\",\"guide_q1.md\":\"eae9ada6\",\"guide_q2.md\":\"8c395f8c\",\"guide_q3.md\":\"393bb3f1\",\"guide_q4.md\":\"f2a6e087\",\"guide_q5.md\":\"efdadad4\",\"guide_servers.md\":\"236b045e\",\"guide_services.md\":\"218f0dfd\",\"guide_settings.md\":\"3535b319\",\"guide_tasks.md\":\"c3d40967\",\"index.md\":\"b088365b\"}")</script>
<script type="module" async src="/assets/app.c59cf861.js"></script>
</body>
</html>