Visual Studio Codeに埋め込まれたDocsieコードを注入して、Docsieポータルをカスタマイズする方法。

Avatar of Author
Tal F.
on July 05, 2021 · · filed under Product Documentation Documentation Portals Product Documentation Tutorials Knowledge Portal Design

</iframe

Visual Studio Codeに埋め込まれたDocsieコードを注入して、Docsieポータルをカスタマイズする方法です。

Docsieには、多くのカスタマイズ機能があります。この記事では、Docsieポータルのカスタマイズを始めるために必要なステップを説明します。私はプロの開発者でもデザイナーでもないので、あなたの技術チームがこれらのツールを使って、私よりもはるかに優れた美しいファッションのDocsieポータルを作成できることを知っていることに留意してください。これは、単にそれらを始めるためのステップバイステップのガイドに過ぎません!

STEP 1

まずは、自分の行程を把握することです。その方法は次の通りです。右上の3つのドットがあるところで自分のアカウントを見つけてクリックします。それはDocsieの設定ダッシュボードにあなたを連れて行くでしょう。

STEP 2

次に、左側の「Deployment」ボタンをクリックします。

![](https://cdn.docsie.io/workspace_WxPJSQ5gsES8Bzjxy/doc_ydgtE07E6Rp4AMmKv/file_UNFgmrrV4LJRPPcLD/boo_OKQpsM12uk8DtYPzL/f551ad37-a3a0-78bb-f97a-1246d5d57899Snag_1113a5f7.png)

配置の設定に入ると、Docsieクラウド経由でナレッジポータルを作成したり、自社のウェブサイト経由でナレッジポータルを作成したりすることができます。これは、「新しい配置を設定する」をクリックするだけで完了します。

![](https://cdn.docsie.io/workspace_WxPJSQ5gsES8Bzjxy/doc_ydgtE07E6Rp4AMmKv/file_66sDikYE16JfYewXU/boo_OKQpsM12uk8DtYPzL/4a8b6dd2-03d2-5d7a-837d-e3afdbe66900Snag_11161d31.png)

ステップ3

次に「カスタムデプロイメント」というタブをクリックし、「デプロイメントURL」内にウェブサイトを入力し、「ウェブポータルを作成」をクリックします。

![](https://cdn.docsie.io/workspace_WxPJSQ5gsES8Bzjxy/doc_ydgtE07E6Rp4AMmKv/file_6CGgetG9GizkqY87p/boo_OKQpsM12uk8DtYPzL/4b102fcb-a424-8966-1f92-59b56e14241dimage.png)

それが完了したら、必ず下にスクロールしてポータルのリストの一番下にある自分のポータルを見つけ、「展開スクリプトを入手」をクリックします。

STEP 4

さて、スクリプトをコピーして、Visual Studio Codeにジャンプしましょう!

![](https://cdn.docsie.io/workspace_WxPJSQ5gsES8Bzjxy/doc_ydgtE07E6Rp4AMmKv/file_a3ExYoQ3yZSLnkf4y/boo_OKQpsM12uk8DtYPzL/1a26f697-45e9-b0c4-53d2-8ad808b8d49fSnag_111a44da.png)

Docsieから埋め込みコードを取得する方法についてもっと情報が必要な場合は、埋め込みコードを使ったドキュメントの公開についてのブログ こちら をご覧ください。

Visual Studio Codeで、index.html、index.css、index.jsのファイルを作成します(ファイルが用意されている場合は除く)。それが完了したら、HTMLを開き、HTMLのボディ内(タグの下)にコードを貼り付けます。

STEP 5

さて、ステップ5では、「基本スタイル」を作成する必要があります。

Docsieポータルに基本的なスタイルを適用する方法については、こちらのリンクからご覧いただけますhttps://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/

この例では、これをHTMLに追加しました。そして、ご覧のように、会社名のリンクを追加し、CSSで若干の変更を加えました。

![](https://cdn.docsie.io/workspace_WxPJSQ5gsES8Bzjxy/doc_ydgtE07E6Rp4AMmKv/file_fRoPLO0Df6JhTcf2h/boo_OKQpsM12uk8DtYPzL/7c668c24-8d5e-8fdf-5b2a-ad93de3b313cSnag_11238581.png)

私の結果はとても基本的なものですが、技術チームがDocsieナレッジポータルにスパイスを与え、ブランドのルック&フィールにマッチしたポータルを作成できる可能性を見ていただきたかったのです。実際、ほとんどの場合、ユーザーは自社のロゴをウェブサイトのリンクに埋め込み、ナビゲーションバーを上部に追加して、Docsieナレッジポータルが自社のウェブサイトにシームレスかつ自然にフィットし、現在のサイトの環境やCSSと一致するようにしています。

![](https://cdn.docsie.io/workspace_WxPJSQ5gsES8Bzjxy/doc_ydgtE07E6Rp4AMmKv/file_StvlIomWiDjQ8wV0h/boo_OKQpsM12uk8DtYPzL/e02de6be-1990-cbe1-7078-4e477ec4a6d9Snag_112473e8.png)

STEP 6

そして、最後のステップとして、このテキストでスタイリングを変更しました:

```