category

Scrapbox のタグのような結びつけを Redactor のプラグイン Definedlinks を使ってやってみた #craftcms

2019-05-27

Scrapbox のタグやコンテンツがつながっていく仕組みってすごいよなー、、、、と思ってて。

あれはあれ、それはそれ、ですが近いことができればいいな、ということでとりあえずはタグページへのリンクをサクッと入れられればいいな、ということで試してみた。

Redactor のプラグインの Definedlinks を使ってみる。

Plugins / Definedlinks
https://imperavi.com/redactor/...

Definedlinks のインストール

プラグインをダウンロードしてきて

config/redactor/definelinks/

のようなかんじに設置する。

Redactorの設定ファイルの編集

config/redactor/Standard.json

にplugins に追加する。

{
  "buttons": ["html","formatting", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video","table"],
  "plugins": ["fullscreen", "table","video","definedlinks"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "imageResizable": true,
  "imagePosition": true,
  "definedlinks": "/defined-links.json"
}

definedlinks の設定は

"definedlinks": "/defined-links.json"

としてますが、公式サイトにあるように

{
  "buttons": ["html","formatting", "bold", "italic", "unorderedlist", "orderedlist", "line","link", "image", "video","table"],
  "plugins": ["fullscreen", "table","video","definedlinks"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "imageResizable": true,
  "imagePosition": true,
  "definedlinks": [
    { "name": "Select...", "url": false },
    { "name": "Google", "url": "http://google.com" },
    { "name": "Home", "url": "/" },
    { "name": "About", "url": "/about/" },
    { "name": "Contact", "url": "/contact/" }
]
}

でもいける。

あとはタグの選択をできるようにテンプレートを

/templates/defined-links.json

というかんじで用意して

{% set tags = craft.tags.limit(null) %}
[
  { "name": "Select...", "url": false },
  {% for tag in tags.all() %}
  { "name": "{{tag.title}}", "url": "/tag/{{tag.title}}" }{% if loop.last %}{% else %},{% endif %}
  {% endfor %}
]

とやることでJSONに出力できる。

これで選択のプルダウンが追加されるようになる。

プルダウンはタグが多いからちょっとあれだけど。

選択すればこんな感じで設定されて

リンクも挿入される

bit part

とりあえずタグへのリンクとしては機能しそう。

Scrapbox みたいなものをやろうと思うと色々やらないといけないことはありそうだけど1つずつ1つずつ。。。