更换主题，修改makefile文件，可以支持画图

kendryte · May 24, 2024 · 1548ec1 · 1548ec1
1 parent 34470e7
commit 1548ec1
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 98 deletions.
diff --git a/Makefile b/Makefile
@@ -8,6 +8,7 @@ SPHINXBUILD   ?= sphinx-build
 SPHINXMULTIVERSION ?= sphinx-multiversion
 SOURCEDIR     = source
 BUILDDIR      = build
+WEB_DOCS_BUILDER_URL ?= https://ai.b-bug.org/~zhengshanshan/web-docs-builder
 
 # Put it first so that "make" without argument is like "make help".
 help:
@@ -19,8 +20,25 @@ help:
 
 # Catch-all target: route all unknown targets to Sphinx using the new
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
-%: Makefile
+%: Makefile $(SOURCEDIR)/_templates/versions.html $(SOURCEDIR)/_static/topbar.css $(SOURCEDIR)/_static/custom.css $(SOURCEDIR)/_static/init_mermaid.js
 	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
 
-mhtml:
+mhtml: Makefile $(SOURCEDIR)/_templates/versions.html $(SOURCEDIR)/_static/topbar.css $(SOURCEDIR)/_static/custom.css $(SOURCEDIR)/_static/init_mermaid.js
 	@$(SPHINXMULTIVERSION) "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+
+_templates:
+	mkdir -p $(SOURCEDIR)/_templates
+
+$(SOURCEDIR)/_templates/versions.html: 
+	wget $(WEB_DOCS_BUILDER_URL)/_templates/$(@F) -O $@
+
+$(SOURCEDIR)/_static/topbar.css:
+	wget $(WEB_DOCS_BUILDER_URL)/_static/$(@F) -O $@
+
+$(SOURCEDIR)/_static/custom.css:
+	wget $(WEB_DOCS_BUILDER_URL)/_static/$(@F) -O $@
+
+$(SOURCEDIR)/_static/init_mermaid.js:
+	wget $(WEB_DOCS_BUILDER_URL)/_static/$(@F) -O $@
+
+
diff --git a/source/_static/custom.css b/source/_static/custom.css
@@ -0,0 +1,70 @@
+nav.bd-links li>a:active, .logo__title:hover, nav.bd-links li>a:hover {
+  color:#4d8eef !important;
+  text-decoration: none;
+}
+body {
+  overflow-y: scroll !important;
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE 和 Edge */
+}
+/* 针对Webkit内核浏览器（如Chrome和Safari）隐藏滚动条 */
+body::-webkit-scrollbar {
+  width: 0 !important; /* 隐藏垂直滚动条 */
+  height: 0 !important; /* 隐藏水平滚动条 */
+}
+.bd-sidebar-primary {
+/* 使元素可滚动 */
+overflow-y: scroll; /* 垂直滚动条 */
+overflow-x: hidden; /* 隐藏水平滚动条，如果不需要的话 */
+
+/* 隐藏滚动条但保持滚动功能 */
+scrollbar-width: none; /* Firefox */
+-ms-overflow-style: none;  /* Internet Explorer 和 Edge */
+}
+
+/* 针对Webkit内核的浏览器（如Chrome、Safari）隐藏滚动条 */
+.bd-sidebar-primary::-webkit-scrollbar {
+display: none; /* 隐藏滚动条 */
+}
+.search-button-field:hover {
+  border:1px solid #4d8eef !important;
+}
+.toc-entry a.nav-link:active, .toc-entry a.nav-link:hover {
+color: #0d6efd;
+text-decoration: none;
+}
+.toc-entry a.nav-link.active:hover {
+color: #0d6efd !important;
+}
+.bd-sidebar-primary label.toctree-toggle {
+height: 20px;
+width: 20px;
+opacity: 0.8;
+}
+html[data-theme=dark], html[data-theme=light] {
+--pst-color-secondary: #0d6efd !important;
+}
+.navbar-brand:hover:hover, .navbar-brand:visited:hover:hover {
+text-decoration: none !important;
+}
+.bd-sidebar-primary label.toctree-toggle {
+height: 20px;
+width: 20px;
+}
+#pst-back-to-top {
+background-color: #0d6efd;
+}
+.form-control:focus, .form-control:focus-visible {
+outline: 1px solid #0d6efd;
+}
+.bd-search .search-button__kbd-shortcut {
+display: none;
+}
+.bd-search svg{
+position: absolute;
+left: -1000px;
+}
+.bd-search {
+padding-left: 0;
+border: none;
+}
diff --git a/source/_static/init_mermaid.js b/source/_static/init_mermaid.js
@@ -0,0 +1,3 @@
+document.addEventListener('DOMContentLoaded', function() {
+    mermaid.initialize({startOnLoad:true});
+});
diff --git a/source/_static/topbar.css b/source/_static/topbar.css
@@ -1,13 +1,18 @@
 /* Customize for top bar (testing and outdated docs)*/
 
+:target {
+    scroll-margin-top: 50px;
+}
+
 .wy-nav-side
 {
-    margin-top: 47px !important;
+    min-height: calc(100% - 50px);
+    top: 50px;
 }
 
 .wy-nav-content-wrap
 {
-    margin-top: 47px !important;
+    margin-top: 50px !important;
 }
 
 /* The navigation bar */
@@ -24,16 +29,11 @@ nav.navbar {
 nav.navbar a {
     float: left;
     display: block;
-    color: #f2f2f2;
+    color: rgba(255,255,255,0.5);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
-}
-
-/* Change background on mouse-over */
-nav.navbar a:hover {
-    background: #ddd;
-    color: black;
+    text-wrap: nowrap;
 }
 
 .jn_container-view {
@@ -43,7 +43,7 @@ nav.navbar a:hover {
     position: fixed;
     left: 0;
     top: 0;
-    z-index: 1501
+    z-index: 1501;
 }
 
 .jn_menu-container {
@@ -60,20 +60,44 @@ nav.navbar a:hover {
     width: 157px;
     height: 28px;
     background: url(img/logo.2f7049e2.svg) no-repeat 100%;
-    background-size: auto 100%
+    background-size: auto 100%;
 }
 
 .jn_menu-container .menu-list {
     display: flex;
+    height: 100%;
     font-size: 16px;
-    color: hsla(0, 0%, 100%, .4);
-    margin-left: 125px
+    color: rgba(255,255,255,0.4);
+    margin-left: 78px;
+    max-width: 506px;
 }
 
-.jn_menu-container .menu-item {
-    margin-right: 40px;
+.menu-list .menu-item {
+    margin-right: 30px;
     height: 100%;
-    cursor: pointer
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 768px) {
+    .logo {
+        display: none;
+    }
+
+    .menu-list .menu-item {
+        margin-right: 0;
+    }
+
+    .jn_menu-container .menu-list {
+        margin-left: 0;
+        justify-content: space-around;
+        flex-grow: 1;
+    }
+
+    nav.navbar a {
+        padding: 3px;
+    }
 }
 
 .jn_menu-container .menu-item.active a {
@@ -85,7 +109,7 @@ nav.navbar a:hover {
 }
 
 .jn_menu-container .active,
-.jn_menu-container .menu-item:hover {
+.jn_menu-container .menu-item a:hover {
     color: #fff
 }
 
@@ -106,3 +130,48 @@ nav.navbar a:hover {
     display: block;
     cursor: pointer
 }
+
+.menu-doc a {
+    color: #f2f2f2 !important;
+}
+
+.model-list {
+    position: absolute;
+    top: 50px;
+    background: #0d0d0d;
+    display: none;
+    cursor: pointer;
+    flex-direction: column;
+}
+
+.menu-doc:hover > .model-list {
+    display: flex;
+    align-items: center;
+}
+
+.document-select {
+    padding: 10px !important;
+    color: #fff;
+    text-align: start !important;
+    text-wrap: wrap !important;
+}
+
+.document-select:hover {
+    background-color: #249ee8 !important;
+}
+
+.expanded-menu {
+    position: relative;
+}
+.expanded-menu-container {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    right: -120px;
+    width: 120px;
+    background-color: #0d0d0d;
+}
+.expanded-menu:hover .expanded-menu-container {
+    display: flex;
+}
diff --git a/source/_templates/_layout.html b/source/_templates/_layout.html