如何將客製化gitbook的plugin

簡介

自己做出屬於自己風格的npm package，並打包上傳至npm

專案架構

GitbookCustomPlugin
├─ assets
│  ├─ lib
│  │  └─ plugin.js
│  └─ style
│     └─ plugin.css
├─ doc
│  └─ images
│     └─ gitbook-plugin-page-footer-ex-demo.jpg
├─ index.js
├─ LICENSE
├─ package.json
└─ README.md

目錄

• 如何將客製化gitbook的plugin
  • 簡介
  • 專案架構
  • 目錄
  • 一、事前準備
  • 二、操作步驟
    • 登入NPM
    • 部署到NPM
  • 三、完成畫面

一、事前準備

STEP1：請拿Github大神的專案模改即可

https://github.com/zq99299/gitbook-plugin-page-footer-ex/tree/master

2. 必填參數如下:

• name：請按照上述格式
• version：版號也請記得要手動更新，且不能夠重複
• description：增加專案描述
• repository：若是自架gitlab，請放置自訂倉庫位址
• homepage：請指向README.MD的文件

{
  "name": "gitbook-plugin-mycustompage-footer-ex",
  "version": "1.0.2",
  "description": "定義每篇文章的footer，可以增加版權宣告及修改時間，並加入時區(使用GMT+8)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://markweb.idv.tw:10443/gitbooknpmproject/gitbook-plugin-mycustom-footer-ex.git"
  },
  "author": "markhsu",
  "license": "GPL-3.0",
  "bugs": {
    "url": "https://markweb.idv.tw:10443/gitbooknpmproject/gitbook-plugin-mycustom-footer-ex/issues"
  },
  "homepage": "https://markweb.idv.tw:10443/gitbooknpmproject/gitbook-plugin-mycustom-footer-ex#readme",
  "dependencies": {
    "moment": "^2.10.6"
  },
  "engines": {
    "gitbook": ">=3.0.0"
  },
  "gitbook": {
    "properties": {
      "copyright": {
        "type": "string",
        "default": "© All Rights Reserved",
        "title": "你的版權宣告",
        "description": "The left-aligned text in the footer."
      },
      "markdown": {
        "type": "boolean",
        "default": false,
        "title": "是否支持Markdown格式",
        "description": "True if copyright and update_label are in Markdown, false if plain text or HTML."
      },
      "update_label": {
        "type": "string",
        "default": "updated",
        "title": "文件更新時間",
        "description": "Text before date."
      },
      "update_format": {
        "type": "string",
        "default": "YYYY-MM-DD HH:mm:ss",
        "title": "時間格式",
        "description": "Moment.js date format."
      }
    }
  }
}

STEP2：請修改assets\lib\plugins.js，進行時間格式調整

// 引入 moment-timezone 模組
var moment = require('moment-timezone');

module.exports = function(book, page) {
    /**
     * 在 package.json 中配置的默认值，这里可以直接使用
     * [config: config option]
     * @type {Object}
     */
    var config = book.config.get('pluginsConfig')['mycustompage-footer-ex'];

    var wrapIfMarkdown = function(input) {
        if (!config.markdown) {
            return input;
        } else {
            return book.renderInline('markdown', input);
        }
    };

    // 使用 Promise.all 確保所有異步操作完成後再處理結果
    return Promise.all([wrapIfMarkdown(config.copyright), wrapIfMarkdown(config.update_label)])
        .then(function(labels) {
            var copyright = labels[0];
            var updateLabel = labels[1];

            // 使用 moment-timezone 轉換日期時間到 GMT+8
            // 檢查 page.file 和 page.file.mtime 是否存在
            var mtime = page.file && page.file.mtime ? moment(page.file.mtime).tz('Asia/Taipei') : moment().tz('Asia/Taipei');

            // 格式化日期時間
            var formattedTime = mtime.format(config.update_format);

            // 構建 footer HTML
            page.content += '\n\n' + [
                '<footer class="page-footer-ex">',
                    '<span class="page-footer-ex-copyright">',
                        copyright,
                    '</span>',
                    '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
                    '<span class="page-footer-ex-footer-update">',
                        updateLabel,
                        formattedTime,
                    '</span>',
                '</footer>'
            ].join(' ');

            return page;
        });
};

二、操作步驟

1. 請先將專案推送到gitlab或是github

2. 登入並部署到NPM

登入NPM

npm login

部署到NPM

npm publish

三、完成畫面