feat(customPageSettings): 添加自定义页面内容

Author: walkthunder

src/baseTypes.ts

@@ -112,6 +112,9 @@ export interface InvioPluginSettings {
   logToDB?: boolean;
   skipSizeLargerThan?: number;
 
+  customFooter?: string;
+  customStyle?: string;
+
   /**
    * @deprecated
    */

src/exporter.ts

@@ -4,7 +4,7 @@ import { MarkdownView, Notice, TFile, TFolder } from 'obsidian';
 // modules that are part of the plugin
 import { InvioSettingTab } from './settings';
 import { Utils } from './utils/utils';
-import { HTMLGenerator } from './html-generation/html-generator';
+import { HTMLGenerator, ICustomPageSettings } from './html-generation/html-generator';
 import { Path } from './utils/path';
 import { ExportFile } from './html-generation/export-file';
 import { AssetHandler } from './html-generation/asset-handler';
@@ -21,7 +21,8 @@ export const exportFile = async (
     exportToPath: Path | undefined = undefined,
     rootPath: Path | undefined,
     view: StatsView,
-    remoteClient?: RemoteClient
+    remoteClient?: RemoteClient,
+    settings?: InvioPluginSettings
 ) : Promise<ExportFile | undefined> => {
     if(file.extension != "md")
     {
@@ -48,7 +49,8 @@ export const exportFile = async (
             const { s3BucketName: bucket, s3Endpoint: endpoint } = remoteClient.s3Config;
             remoteCOSDomain = `https://${bucket}.${endpoint}/`;
         }
-        await HTMLGenerator.generateWebpage(exportedFile, rootPath, view, remoteCOSDomain);
+        const customPageSettings: ICustomPageSettings = { footer: settings.customFooter, style: settings.customStyle };
+        await HTMLGenerator.generateWebpage(exportedFile, rootPath, view, remoteCOSDomain, customPageSettings);
     }
     catch (e)
     {
@@ -114,7 +116,7 @@ export const publishFiles = async (
         // RenderLog.progress(i++, path.length, "Exporting Docs", "Exporting: " + file.path, "var(--color-accent)");
         view?.info("Exporting: " + file.path);
 
-        const exportedFile = await exportFile(file, new Path(path), htmlFilePath, new Path(client.getUseHostSlug()), view, client);
+        const exportedFile = await exportFile(file, new Path(path), htmlFilePath, new Path(client.getUseHostSlug()), view, client, settings);
         if (exportedFile) {
             log.info('exported file downloads: ', exportedFile.downloads);
             externalFiles.push(...exportedFile.downloads.map((d: Downloadable) => {

src/html-generation/html-generator.ts

@@ -10,8 +10,11 @@ import { log } from "../moreOnLog";
 import { StatsView } from "src/statsView";
 import InvioPlugin from "src/main";
 import { Utils } from "src/utils/utils";
-import { WMS_FOOTER, WMS_FOOTER_STYLE } from './wms-footer';
 
+export interface ICustomPageSettings {
+	footer?: string;
+	style?: string;
+}
 const LogoSVGDefault = `<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg238067" height="768px" width="1024px" version="1.1" viewBox="0 0 100 100" class="svg-icon invio-sync-wait"><g fill-rule="evenodd" style="transform: scale3d(0.89, 0.99, 1.5);"><path d="M27 97.93A56.08 56.08 0 0 1 9.29 19.08 55.77 55.77 0 0 0 23.59 50l.07.07c.53.58 1.06 1.14 1.62 1.7s1.12 1.09 1.72 1.62L45.54 72a14.93 14.93 0 0 1 4.53 10.93v1.59a15.12 15.12 0 0 1-8 13.52A15.09 15.09 0 0 1 27 97.93z" style="fill: var(--icon-color);"></path><path d="M23.59 50a55.77 55.77 0 0 1-14.3-30.92A56.46 56.46 0 0 1 27 2.08 15.08 15.08 0 0 1 42.11 2a15.12 15.12 0 0 1 8 13.52v1.59A15 15 0 0 1 45.55 28l-22 22z" fill="#999999" opacity=".8"></path><path d="M85.16 2.08a56.08 56.08 0 0 1 17.67 78.84A55.77 55.77 0 0 0 88.53 50l-.08-.07c-.52-.58-1.06-1.14-1.62-1.7s-1.12-1.09-1.69-1.62L66.58 28a14.93 14.93 0 0 1-4.53-10.93v-1.55A15.12 15.12 0 0 1 70 2a15.08 15.08 0 0 1 15.15.08z" style="fill: var(--icon-color);"></path><path d="M88.53 50a55.77 55.77 0 0 1 14.3 30.92 56.35 56.35 0 0 1-17.67 17 15.46 15.46 0 0 1-23.11-13.44v-1.59A15 15 0 0 1 66.57 72l22-22z" fill="#999999" opacity=".8"></path></g></svg>`
 
 export interface IMetaConfig {
@@ -77,11 +80,12 @@ export class HTMLGenerator {
 		rootPath: Path,
 		view: StatsView,
 		remoteDomain?: string, // website assets file's host domain
+		customPageSettings?: ICustomPageSettings
 	): Promise<ExportFile> {
 		await this.getDocumentHTML(file, rootPath, false, view, remoteDomain);
 		let usingDocument = file.document;
 
-		let sidebars = this.generateSideBars(file.contentElement, file);
+		let sidebars = this.generateSideBars(file.contentElement, file, customPageSettings);
 		this.generateSideBarBtns(file, sidebars);
 		let rightSidebar = sidebars.right;
 		let leftSidebar = sidebars.left;
@@ -146,6 +150,7 @@ export class HTMLGenerator {
 			file.downloads.push(new Downloadable('_common-left-tree.html', fileTree.outerHTML, rootDir));
 			// TODO: 摆脱includeFileTree限制，定制优化index首页UI样式
 			if (InvioSettingTab.settings.generateIndexPage) {
+				const customFooter = customPageSettings.footer ? `<div class="tree-footer">${customPageSettings.footer}</div>` : ''
 				const indexPageHTML = `<!DOCTYPE html><html lang="zh"><head>
 				<title>${prefix}</title>
 				<style>
@@ -171,9 +176,9 @@ export class HTMLGenerator {
 					display: none;
 				}
 				.tree-scroll-area>.tree-item>.tree-item-contents { padding: 1rem; text-align: center; }
-				${WMS_FOOTER_STYLE}
+				${customPageSettings.style || ''}
 				</style>
-				</head><body>${fileTree.outerHTML}<div class="tree-footer">${WMS_FOOTER}</div></body></html>`;
+				</head><body>${fileTree.outerHTML}${customFooter}</body></html>`;
 				file.downloads.push(new Downloadable('index.html', indexPageHTML, rootDir));	
 			}
 		}
@@ -331,7 +336,7 @@ export class HTMLGenerator {
 		}
 	}
 
-	private static generateSideBars(middleContent: HTMLElement, file: ExportFile): { container: HTMLElement, left: HTMLElement, leftScroll: HTMLElement, right: HTMLElement, rightScroll: HTMLElement, center: HTMLElement } {
+	private static generateSideBars(middleContent: HTMLElement, file: ExportFile, customPageSettings: ICustomPageSettings): { container: HTMLElement, left: HTMLElement, leftScroll: HTMLElement, right: HTMLElement, rightScroll: HTMLElement, center: HTMLElement } {
 		let docEl = file.document;
 
 		/*
@@ -373,12 +378,16 @@ export class HTMLGenerator {
 
 		documentContainer.appendChild(middleContent);
 
-		const tmpDiv = document.createElement('div');
-		tmpDiv.innerHTML = WMS_FOOTER;
-		const footerStyle = document.createElement('style');
-		footerStyle.innerHTML = WMS_FOOTER_STYLE;
-		documentContainer.appendChild(footerStyle);
-		documentContainer.appendChild(tmpDiv.firstChild);
+		if (customPageSettings?.style) {
+			const footerStyle = document.createElement('style');
+			footerStyle.innerHTML = customPageSettings.style;
+			documentContainer.appendChild(footerStyle);
+		}
+		if (customPageSettings?.footer) {
+			const tmpDiv = document.createElement('div');
+			tmpDiv.innerHTML = customPageSettings.footer;
+			documentContainer.appendChild(tmpDiv.firstChild);
+		}
 
 		rightSidebar.classList.add("sidebar");
 		rightSidebar.appendChild(rightContent);

src/html-generation/wms-footer.ts

@@ -1,2 +1,2 @@
 export const WMS_FOOTER = `<footer class="footer_d1NW"><div class="contactArea_F3xQ"><div><h2>联系我们</h2><div><p>网站：<a href="https://wms.webinfra.cloud" target="__blank">https://wms.webinfra.cloud</a></p><p>电话：<a href="tel:19537602183">19537602183</a></p><p>地址：上海市嘉定区云谷路399号嘉定新城科创智慧园T2办公楼</p></div></div><div class="qrs_s00F"><div class="qr_gmUh"><div class="qrTitle_TmNk"><span>关注公众号</span><br><span>了解前沿WMS知识</span></div><div style="margin-top:1rem"><img src="img/company_qr.jpg" alt="公众号二维码" style="width:80px;height:80px"></div></div><div class="qr_gmUh"><div class="qrTitle_TmNk"><span>客服微信</span><br><span>只冲WMS产品</span></div><div style="margin-top:1rem"><img src="img/sales_qr.jpg" alt="客服二维码" style="width:80px;height:80px"></div></div></div></div><div class="beian_B2zb"><div><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none">沪ICP备2023003164号-1</a></div><div style="margin-left:1rem"><span>Copyright © <!-- -->2024<!-- --> 只冲科技, Inc. All rights reserved.</span></div></div></footer>`
-export const WMS_FOOTER_STYLE = `.footer_d1NW{background-color:#303846;color:#fff;padding:1rem}.contactArea_F3xQ{align-items:center;color:#fff;display:flex;font-size:1rem;justify-content:center}.contactArea_F3xQ a{color:inherit;font-weight:700}.qrs_s00F{display:flex;flex:0 0 auto}.qr_gmUh{flex:1;min-width:118px;text-align:center}.beian_B2zb,.buttons_c5vH{align-items:center;display:flex}.qrTitle_TmNk{font-size:smaller}.beian_B2zb{color:#ffffff6b;flex-direction:row;font-size:small;justify-content:center;margin-top:2rem}@media screen and (max-width:767px){.contactArea_F3xQ{flex-direction:column}.qrs_s00F{width:100%}.beian_B2zb{display:none}}`
+export const WMS_FOOTER_STYLE = `p img {max-height: 12rem;} .footer_d1NW{background-color:#303846;color:#fff;padding:1rem}.contactArea_F3xQ{align-items:center;color:#fff;display:flex;font-size:1rem;justify-content:center}.contactArea_F3xQ a{color:inherit;font-weight:700}.qrs_s00F{display:flex;flex:0 0 auto}.qr_gmUh{flex:1;min-width:118px;text-align:center}.beian_B2zb,.buttons_c5vH{align-items:center;display:flex}.qrTitle_TmNk{font-size:smaller}.beian_B2zb{color:#ffffff6b;flex-direction:row;font-size:small;justify-content:center;margin-top:2rem}@media screen and (max-width:767px){.contactArea_F3xQ{flex-direction:column}.qrs_s00F{width:100%}.beian_B2zb{display:none}}`

src/langs/en.json

@@ -171,6 +171,12 @@
   "settings_skiplargefiles_desc": "Skip files with sizes larger than the threshold. Here 1 MB = 10^6 bytes.",
   "settings_skiplargefiles_notset": "(not set)",
 
+  "settings_customfooter": "Custom Footer",
+  "settings_customfooter_desc": "Costom footer html contents.",
+
+  "settings_customstyle": "Custom Style",
+  "settings_customstyle_desc": "Costom style css contents.",
+
   "settings_checkonnectivity": "Check Connectivity",
   "settings_checkonnectivity_desc": "Check connectivity.",
   "settings_checkonnectivity_button": "Check",

src/langs/zh_cn.json

@@ -170,6 +170,12 @@
   "settings_skiplargefiles_desc": "跳过大于某一个阈值的文件。这里 1 MB = 10^6 bytes。",
   "settings_skiplargefiles_notset": "（不设置）",
 
+  "settings_customfooter": "自定义Footer",
+  "settings_customfooter_desc": "Html格式的自定义Footer",
+
+  "settings_customstyle": "自定义样式",
+  "settings_customstyle_desc": "自定义Css样式",
+
   "settings_checkonnectivity": "检查可否连接",
   "settings_checkonnectivity_desc": "检查可否连接。",
   "settings_checkonnectivity_button": "检查",

src/langs/zh_tw.json

@@ -170,6 +170,11 @@
   "settings_skiplargefiles_desc": "跳過大於某一個閾值的檔案。這裡 1 MB = 10^6 bytes。",
   "settings_skiplargefiles_notset": "（不設定）",
 
+  "settings_customfooter": "自定义Footer",
+  "settings_customfooter_desc": "Html格式的自定义Footer",
+  "settings_customstyle": "自定义样式",
+  "settings_customstyle_desc": "自定义Css样式",
+
   "settings_checkonnectivity": "檢查可否連線",
   "settings_checkonnectivity_desc": "檢查可否連線。",
   "settings_checkonnectivity_button": "檢查",

src/settings.ts

@@ -80,6 +80,8 @@ const DEFAULT_SETTINGS: InvioPluginSettings = {
   lang: "auto",
   logToDB: false,
   skipSizeLargerThan: -1,
+  customFooter: '',
+  customStyle: '',
 };
 
 export const getDEFAULT_SETTINGS = (): InvioPluginSettings => {
@@ -108,6 +110,8 @@ export const getDEFAULT_SETTINGS = (): InvioPluginSettings => {
     lang: "auto",
     logToDB: false,
     skipSizeLargerThan: -1,
+    customFooter: '',
+    customStyle: '',
   });
 }
 
@@ -1022,6 +1026,32 @@ export class InvioSettingTab extends PluginSettingTab {
           });
       });
 
+    new Setting(basicDiv)
+      .setName(t("settings_customfooter"))
+      .setDesc(t("settings_customfooter_desc"))
+      .addTextArea((text) =>
+        text
+          .setPlaceholder("")
+          .setValue(`${this.plugin.settings.customFooter}`)
+          .onChange(async (value) => {
+            this.plugin.settings.customFooter = value.trim();
+            await this.plugin.saveSettings();
+          })
+      ); 
+    
+    new Setting(basicDiv)
+      .setName(t("settings_customstyle"))
+      .setDesc(t("settings_customstyle_desc"))
+      .addTextArea((text) =>
+        text
+          .setPlaceholder("")
+          .setValue(`${this.plugin.settings.customStyle}`)
+          .onChange(async (value) => {
+            this.plugin.settings.customStyle = value.trim();
+            await this.plugin.saveSettings();
+          })
+      ); 
+
     //////////////////////////////////////////////////
     // below for advanced settings
     //////////////////////////////////////////////////