update: 2023-03-26

README.md

@@ -14,9 +14,9 @@
 1. 生产环境下不再输出 `gin-gonic/gin` 包日志。
 1. 首页的搜索框支持实时搜索书签。
 1. 添加一个可选的返回顶部按钮。
-1. 添加支持使用 [Simple Icons](https://simpleicons.org/) 图标，格式为 `si` 前缀 + [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md)，如：`siGitHub`。(*注：在 [Flare](https://github.com/soulteary/flare) v0.4.0 后便会添加此功能。*)
-1. 调整为水平排列书签。(*v0.4.0-20230316*)
+1. 添加支持使用 [Simple Icons](https://simpleicons.org/)(v8.8.0) 图标，格式为 `si` 前缀 + [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md)，如：`siGitHub`。(*注：在 [Flare](https://github.com/soulteary/flare) v0.4.0 后便会添加此功能。*)
 1. 添加可选的侧边栏功能。(*v0.4.0-20230316*)
+1. 调整为可选水平(默认)或垂直排列书签。(*v0.4.0-20230326*)
 1. 调整基础样式，以优化在移动端下的使用体验。
 
 ## 其他改动
@@ -29,7 +29,7 @@
     - 修复在没有分类时书签显示异常的问题。
     - 修复子页面下设置按钮显示异常的问题。(*v0.4.0-20230314*)
     - 修复子页面下的按钮无法通过设置隐藏的问题。(*v0.4.0-20230314*)
-    - 更新 [Material Design Icons](https://materialdesignicons.com/) 图标至 v7.1.96 版本。
+    - 更新 [Material Design Icons](https://materialdesignicons.com/) 图标至 v7.2.96 版本。
 
 ## 程序截图
 
@@ -52,7 +52,12 @@ Docker Hub 镜像：[giterhub/flare](https://hub.docker.com/r/giterhub/flare)，
 docker pull giterhub/flare:latest
 
 # run
-docker run -p 5005:5005 -d --name flare --mount type=bind,source=/flare/app,target=/app -e FLARE_LOG_LEVEL=ERROR giterhub/flare:latest
+docker run -d \
+    --name flare \
+    -p 5005:5005 \
+    --mount type=bind,source=$PWD/flare/app,target=/app \
+    -e FLARE_LOG_LEVEL=ERROR \
+    giterhub/flare:latest
 ```
 
 其他环境变量及使用方法可以参考：[docker-flare](https://github.com/soulteary/docker-flare)。

embed/assets/css/home/bookmarks.css

@@ -16,12 +16,20 @@
   float: none;
 }
 
+#container-bookmakrs.use-vertical-bookmarks .bookmark-group-container {
+  width: 16.66%;
+}
+
 #container-bookmakrs .bookmark-group-container .bookmark-list li {
   float: left;
   width: 16.66%;
   padding: 1px;
 }
 
+#container-bookmakrs.use-vertical-bookmarks .bookmark-group-container .bookmark-list li {
+  width: 100%;
+}
+
 #container-bookmakrs .bookmark-group-container h3 {
   white-space: nowrap;
   overflow: hidden;
@@ -76,22 +84,50 @@
   #container-bookmakrs .bookmark-group-container .bookmark-list li {
     width: 20%;
   }
+
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container {
+    width: 20%;
+  }
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container .bookmark-list li {
+    width: 100%;
+  }
 }
 
 @media (max-width: 1200px) {
   #container-bookmakrs .bookmark-group-container .bookmark-list li {
     width: 25%;
   }
+
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container {
+    width: 25%;
+  }
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container .bookmark-list li {
+    width: 100%;
+  }
 }
 
 @media (max-width: 992px) {
   #container-bookmakrs .bookmark-group-container .bookmark-list li {
     width: 33.33%;
   }
+
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container {
+    width: 33.33%;
+  }
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container .bookmark-list li {
+    width: 100%;
+  }
 }
 
 @media (max-width: 768px) {
   #container-bookmakrs .bookmark-group-container .bookmark-list li {
     width: 50%;
   }
+
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container {
+    width: 50%;
+  }
+  #container-bookmakrs.use-vertical-bookmarks .bookmark-group-container .bookmark-list li {
+    width: 100%;
+  }
 }

embed/assets/vendor/home-assets/sidebar.js

@@ -32,7 +32,7 @@
         ev.preventDefault();
         const categoryTitle = document.querySelector(`[data-set-category="${id}"]`);
         if (categoryTitle) {
-          const offsetTop = categoryTitle.offsetTop;
+          const offsetTop = categoryTitle.offsetTop - 8;
           doc.scrollTo({
             top: offsetTop,
             behavior: 'smooth',

embed/templates/home.html

@@ -98,10 +98,17 @@ <h2><a href="{{.ApplicationsURI}}">应用</a></h2>
       {{ end }}
 
       {{ if .OptionShowBookmarks }}
-      <div class="plugin-container clearfix" id="container-bookmakrs">
-        <h2><a href="{{.BookmarksURI}}">书签</a></h2>
-        {{.Bookmarks}}
-      </div>
+        {{ if .OptionVerticalBookmarks }}
+        <div class="plugin-container use-vertical-bookmarks clearfix" id="container-bookmakrs">
+          <h2><a href="{{.BookmarksURI}}">书签</a></h2>
+          {{.Bookmarks}}
+        </div>
+        {{ else }}
+        <div class="plugin-container clearfix" id="container-bookmakrs">
+          <h2><a href="{{.BookmarksURI}}">书签</a></h2>
+          {{.Bookmarks}}
+        </div>
+        {{ end }}
       {{ end }}
 
       <div class="toolbar-container">

embed/templates/settings-appearance.html

@@ -175,6 +175,21 @@ <h2>模块设置</h2>
             {{ end }}
         </div>
 
+        <div class="form-group">
+            <label for="settings-vertical-bookmarks">垂直排列书签</label>
+            {{ if .OptionVerticalBookmarks }}
+            <select name="vertical-bookmarks" id="settings-vertical-bookmarks">
+                <option value="1" selected>是</option>
+                <option value="0">否</option>
+            </select>
+            {{ else }}
+            <select name="vertical-bookmarks" id="settings-vertical-bookmarks">
+                <option value="0" selected>否</option>
+                <option value="1">是</option>
+            </select>
+            {{ end }}
+        </div>
+
         <div class="form-group">
             <label for="settings-hide-settings-button">隐藏首页设置按钮</label>
             {{ if .OptionHideSettingsButton }}

internal/data/config.go

@@ -36,6 +36,8 @@ ShowApps: true
 ShowBookmarks: true
 # 展示书签分类侧边栏
 ShowSidebar: true
+# 垂直排列书签
+VerticalBookmarks: false
 # 隐藏界面中的设置按钮
 HideSettingButton: false
 # 隐藏界面中的帮助按钮

internal/data/settings.go

@@ -57,6 +57,7 @@ func UpdateAppearance(update FlareModel.Application) bool {
 	options.ShowApps = update.ShowApps
 	options.ShowBookmarks = update.ShowBookmarks
 	options.ShowSidebar = update.ShowSidebar
+	options.VerticalBookmarks = update.VerticalBookmarks
 	options.HideSettingsButton = update.HideSettingsButton
 	options.HideHelpButton = update.HideHelpButton
 	options.HideTopButton = update.HideTopButton

internal/model/application.go

@@ -14,6 +14,7 @@ type Application struct {
 	ShowApps                bool   `yaml:"ShowApps"`
 	ShowBookmarks           bool   `yaml:"ShowBookmarks"`
 	ShowSidebar             bool   `yaml:"ShowSidebar"`
+	VerticalBookmarks       bool   `yaml:"VerticalBookmarks"`
 	HideSettingsButton      bool   `yaml:"HideSettingButton"`
 	HideHelpButton          bool   `yaml:"HideHelpButton"`
 	HideTopButton           bool   `yaml:"HideTopButton"`

internal/pages/home/home.go

@@ -144,6 +144,7 @@ func renderHelp(c *gin.Context) {
 			"OptionShowApps":           true,
 			"OptionShowBookmarks":      false,
 			"OptionShowSidebar":        false,
+			"OptionVerticalBookmarks":  false,
 			"OptionHideSettingsButton": options.HideSettingsButton,
 			"OptionHideHelpButton":     options.HideHelpButton,
 			"OptionHideTopButton":      options.HideTopButton,
@@ -246,6 +247,7 @@ func pageBookmark(c *gin.Context) {
 			"OptionOpenBookmarkNewTab": options.OpenBookmarkNewTab,
 			"OptionShowBookmarks":      options.ShowBookmarks,
 			"OptionShowSidebar":        options.ShowSidebar,
+			"OptionVerticalBookmarks":  options.VerticalBookmarks,
 			"OptionHideSettingsButton": options.HideSettingsButton,
 			"OptionHideHelpButton":     options.HideHelpButton,
 			"OptionHideTopButton":      options.HideTopButton,
@@ -359,6 +361,7 @@ func render(c *gin.Context) {
 			"OptionShowApps":           options.ShowApps,
 			"OptionShowBookmarks":      options.ShowBookmarks,
 			"OptionShowSidebar":        options.ShowSidebar,
+			"OptionVerticalBookmarks":  options.VerticalBookmarks,
 			"OptionHideSettingsButton": options.HideSettingsButton,
 			"OptionHideHelpButton":     options.HideHelpButton,
 			"OptionHideTopButton":      options.HideTopButton,