Visual Studio Codeを使ってDocsieポータルをカスタマイズする方法¶

Docsieには多くのカスタマイズ機能があります。この記事では、Docsieポータルのカスタマイズを始めるために必要な手順をご紹介します。私はプロの開発者やデザイナーではないことをご了承ください。実際には、技術チームがこれらのツールを使って、私よりもはるかに美しいDocsieポータルを作成できます。これは単に、彼らが始めるための手順ガイドです！

STEP 1¶

最初のステップは、埋め込みコードを取得することです。右上にあるアカウント名の横にある3つのドットをクリックします。これでDocsieの設定ダッシュボードに移動します。

STEP 2¶

次に、左側にある「Deployment（デプロイメント）」ボタンをクリックします。

デプロイメント設定画面では、Docsieクラウドを通じてナレッジポータルを作成するか、HTMLに追加できるコードを使って自社ウェブサイトにナレッジポータルを作成するかを選択できます。「Configure a new deployment +（新しいデプロイメントを設定+）」をクリックするだけです。

STEP 3¶

次に「Custom deployment（カスタムデプロイメント）」タブをクリックし、「Deployment URL（デプロイメントURL）」にウェブサイトを入力して、「Create web portal（ウェブポータルを作成）」をクリックします。

完了したら、ポータルリストの一番下までスクロールして、作成したポータルを見つけ、「Get deployment script（デプロイメントスクリプトを取得）」をクリックします。

STEP 4¶

スクリプトをコピーして、Visual Studio Codeに移りましょう！

Docsieから埋め込みコードを取得する方法についての詳細は、こちらのドキュメント公開に関するブログをご覧ください。

Visual Studio Codeでindex.html、index.css、index.jsファイルを作成します（すでにファイルがある場合は不要です）。HTMLファイルを開き、コードをHTMLのbodyタグ内（</head>タグの下）に貼り付けます。

STEP 5¶

ステップ5では「基本スタイル」を作成します。

Docsieポータルに基本スタイルを適用する方法についての詳細はこちらでご確認いただけます。

例として、HTMLに会社名のリンクを追加し、CSSで少し調整してみました。

結果はとてもシンプルですが、技術チームがDocsieナレッジポータルをカスタマイズし、ブランドの外観や雰囲気に合ったポータルを作成できる可能性をお見せしたかったのです。あなたの場合は異なるスタイルや色を使うかもしれませんが、多くのユーザーは自社のロゴを配置し、ナビゲーションバーを追加して、Docsieナレッジポータルが自社ウェブサイトにシームレスに自然に溶け込むようにしています。

STEP 6¶

最後のステップでは、以下のようなスタイリングの変更を追加しました：

  <style>
    :root {
        --docsie-font-family: garamond;
        --docsie-font-family-head: inherit;
        --docsie-font-family-mono: monospace;
        --docsie-hue-primary: 200;
        --docsie-hue-gray: var(--docsie-hue-primary);
        --docsie-sat-primary: 100%;

        --docsie-page-width: 1800px;   
        --docsie-notice-background: var(--docsie-color-primary-darker);
    }
    </style>

これを「基本スタイル」の最後のdivタグの下に貼り付けました。

非常にシンプルなスタイル変更の結果はこのようになりました：

これで必要なツールはすべて揃いました。ぜひ自分で試してみて、様々な変更を加えて、誇れる美しいナレッジポータルを作成してみてください！あなたのナレッジポータルは私のものよりもはるかに洗練されたものになると確信しています！ぜひ試してみて、何より楽しんでください！