目次

DokuWikiの初期設定

DokuWikiインストール直後に設定すべき項目まとめ

httpsを設定（サイトのSSL化）

certbotコマンドでSSL証明書を発行

certbotでSSL証明書を発行する方法

https用にnginxの.confを設定

vi /etc/nginx/conf.d/example.com.conf
example.com.conf
server {
    listen       80;
    server_name  example.com;

    return 301 https://example.com$request_uri;
}

server {
    listen       443 ssl http2;
    server_name  example.com;
    root         /home/user1/Dokuwiki/xxx;
    index        doku.php;

    ssl_certificate      /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/example.com/privkey.pem;

    location ~ \.php$ {
        include        fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_param  HTTPS on;
        fastcgi_pass   127.0.0.1:9000;
        #fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
    }    
}

example.com.confに上記のような設定を追加

最終的な.confはここを確認

DokuWikiにログインする

サイトの右上にあるログインをクリック

インストールするときに作成したスーパーユーザーのユーザー名とパスワードを入力し、ログインをクリック
（メールアドレスではなくユーザー名なので注意）

URL正規化

http://example.com/doku.php?id=wiki:syntaxのようなURLを
http://example.com/wiki/syntaxのようなURLに変更

大まかな流れは、以下の2ステップ

参考リンク
DokuWiki公式・URL の書き換え

URLの書き換え機能をオンにする

ブラウザで
http://example.com
を開く

管理者アカウントでログイン

管理　＞　サイト設定

高度な設定
userewrite
URLの書き換え 		.htaccess
useslash
URL上の名前空間の区切りにスラッシュを使用 		チェックする
canonical
canonical URL（正準URL）を使用 		チェックする

保存ボタンをクリック

WebサーバーにApacheではなくnginxを使用する場合でも、URLの書き換えは.htaccessを選ぶ

local.phpを確認

vi /home/user1/Dokuwiki/xxx/conf/local.php
local.php
$conf['userewrite'] = '1';
$conf['useslash'] = 1;
$conf['canonical'] = 1;

local.phpの中に上記のような設定があることを確認

ブラウザの管理画面で項目を設定すると、実態としてはlocal.phpにパラメーターが書き込まれる

nginxの.confを設定（location ~ \.php$ディレクティブを書き換え）

example.com.conf
location ~ \.php$ {
    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    fastcgi_param  HTTPS on;
    fastcgi_pass   127.0.0.1:9000;
    #fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
}

上記の部分を下記のように書き換え

example.com.conf
location ~ \.php$ {
    if (!-f $request_filename) {
        return 404;
    }

    # http://example.com/doku.php?id=wiki:welcome のようなURLを
    # http://example.com/wiki/welcome のようなURLにリダイレクト
    if ($request_uri ~ ^/doku.php\?id=(?<query>.+)$) {
        rewrite .* /$query?;
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
        rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
        rewrite ^([^:]+):(.+)$                                                         $1/$2;
        rewrite .*                                                                     $uri permanent;
    }

    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param  HTTPS on;
    fastcgi_pass   127.0.0.1:9000;
    #fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
}

rewrite部分の解説

元のURLが
http://example.com/doku.php?id=1:2:3:4:5:6:7:8:9:10:11
だった場合
rewrite .* /$query?;
の部分で
http://example.com/1:2:3:4:5:6:7:8:9:10:11
にリライトされ

rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
の部分で
http://example.com/1/2/3/4/5/6/7/8/9:10:11
にリライトされ

rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5;
の部分はマッチしないのでスキップされ

rewrite ^([^:]+):([^:]+):(.+)$ $1/$2/$3;
の部分で
http://example.com/1/2/3/4/5/6/7/8/9/10/11
にリライトされ

rewrite ^([^:]+):(.+)$ $1/$2;
の部分はマッチしないのでスキップされ

rewrite .* $uri permanent;
の部分で301リダイレクトされる
（ブラウザのアドレスバーに表示されるURLが変わる）

rewrite を連続して書けば、書き換え後のものを、更に書き換え、書き換え……ができる

rewriteにpermanentをつけなければ、内部リダイレクト
rewriteにpermanentをつければ、301リダイレクトされる

上記のrewriteで
id=?1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16
16階層（:が15個）まで/に置換可能

nginxの.confを設定（書き換えではなく追加する部分）

example.com.conf
location / {
    try_files $uri $uri/ @dokuwiki;
}

location @dokuwiki {
    rewrite ^/_media/(.*)          /lib/exe/fetch.php?media=$1  last;
    rewrite ^/_detail/(.*)         /lib/exe/detail.php?media=$1 last;
    rewrite ^/_export/([^/]+)/(.*) /doku.php?do=export_$1&id=$2 last;
    rewrite ^/(?!lib/)(.*)         /doku.php?id=$1&$args        last;
}

# http://example.com/wiki:welcome のようなURLを
# http://example.com/wiki/welcome のようなURLにリダイレクト
location ~ ^/.+:.+$ {
    rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
    rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
    rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
    rewrite ^([^:]+):(.+)$                                                         $1/$2;
    rewrite .*                                                                     $uri permanent;
}

example.com.confに上記のような設定を追加

rewriteのところで:（コロン）15個まで/に置換可能

:が16個以上の場合も、複数回301リダイレクトが発生するが最終的にすべて/に置き換わる

URL書き換えの動作確認

ブラウザで以下の3つのURLへアクセス

すべて以下のアドレスにリダイレクトされればOK

nginx、最終的な.confの中身

example.com.conf
server {
    listen       80;
    server_name  example.com;

    return 301 https://example.com$request_uri;
}

server {
    listen       443 ssl http2;
    server_name  example.com;
    root         /home/user1/Dokuwiki/xxx;
    index        doku.php;

    ssl_certificate      /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        try_files $uri $uri/ @dokuwiki;
    }

    location @dokuwiki {
        rewrite ^/_media/(.*)          /lib/exe/fetch.php?media=$1  last;
        rewrite ^/_detail/(.*)         /lib/exe/detail.php?media=$1 last;
        rewrite ^/_export/([^/]+)/(.*) /doku.php?do=export_$1&id=$2 last;
        rewrite ^/(?!lib/)(.*)         /doku.php?id=$1&$args        last;
    }

    # http://example.com/wiki:welcome のようなURLを
    # http://example.com/wiki/welcome のようなURLにリダイレクト
    location ~ ^/.+:.+$ {
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
        rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
        rewrite ^([^:]+):(.+)$                                                         $1/$2;
        rewrite .*                                                                     $uri permanent;
    }

    location ~ \.php$ {
        if (!-f $request_filename) {
            return 404;
        }

        # http://example.com/doku.php?id=wiki:welcome のようなURLを
        # http://example.com/wiki/welcome のようなURLにリダイレクト
        if ($request_uri ~ ^/doku.php\?id=(?<query>.+)$) {
            rewrite .* /$query?;
            rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
            rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
            rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
            rewrite ^([^:]+):(.+)$                                                         $1/$2;
            rewrite .*                                                                     $uri permanent;
        }

        include        fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param  HTTPS on;
        fastcgi_pass   127.0.0.1:9000;
        #fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
    }

    location ^~ /bin/    { return 403; }
    location ^~ /conf/   { return 403; }
    location ^~ /data/   { return 403; }
    location ^~ /inc/    { return 403; }
    
    location ~* /\.well-known {
        allow all;
    }
    
    location = /sitemap.xml.gz {
        root /home/user1/Dokuwiki/xxx/data/cache;
    }    
}

SSL証明書発行前の段階でこの.confの内容を設定すると
/etc/letsencrypt/live/example.com/fullchain.pemファイルが存在しないためエラーになるので注意

URL正規化前にこの.confを適用すると、DokuWikiの管理画面にログインできなくなるので注意

Bootstrap3テンプレートのインストールと設定

Bootstrap3 Template（作者： Giuseppe Di Terlizzi）をインストール

DokuWikiのテンプレートを変更する方法

プラグインのインストールと設定

不要なプラグインをアンインストール

以下のプラグインをアンインストール

不要なプラグインを削除する方法

定番のプラグインをインストール

以下のプラグインをインストール

Dokuwikiにプラグインを導入する方法

DokuWikiセキュリティ関係の設定

DokuWiki公式・セキュリティ

dataディレクトリなどが非公開になっているか確認

ブラウザで
http://example.com/data/pages/wiki/dokuwiki.txt
にアクセス

403になればOK 

====== DokuWiki ======
[[doku>wiki:dokuwiki|{{wiki:dokuwiki-128.png }}]] DokuWiki is a simple to use and highly versatile Open Source [[wp>wiki]] software that doesn't require a database. It is loved by users for its clean and readable [[wiki:syntax]]. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in [[doku>acl|access controls]] and [[doku>auth|authentication connectors]] make DokuWiki especially useful in the enterprise context and the large number of [[doku>plugins]] contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.

Read the [[doku>manual|DokuWiki Manual]] to unleash the full power of DokuWiki.

上記のようなテキストが表示される場合は、セキュリティのリスクがある

以下の4つのディレクトリはWebからアクセスできないようにしておく必要がある

dataディレクトリなどを非公開にするnginxの.confの設定

vi /etc/nginx/conf.d/example.com.conf
example.com.conf
location ^~ /bin/  { return 403; }
location ^~ /conf/ { return 403; }
location ^~ /data/ { return 403; }
location ^~ /inc/  { return 403; }

example.com.confに上記のような設定を追加

最終的な.confはここを確認

SMTP Pluginのインストールと設定

SMTP Pluginをインストールしないと、アカウント作成やパスワード再発行などができない
（管理用のメールを送信できないので）

SMTP Pluginをインストール

ブラウザで自分のDokuWikiサイトを開く

管理　＞　拡張機能管理　＞　検索とインストール

SMTP Pluginを検索

SMTP Pluginをインストール

SMTP Pluginを設定

管理　＞　サイト設定

outlookメールを使っている場合の設定例

Smtp
plugin»smtp»smtp_host
送信 SMTP サーバー 		smtp-mail.outlook.com
plugin»smtp»smtp_port
SMTP サーバーのポート。通常は 25。SSL の場合は 465。 		587
plugin»smtp»smtp_ssl
SMTP サーバーと通信する時、使用される暗号化は？ 		TLS
plugin»smtp»auth_user
認証が必要な場合のユーザー名 		admin@outlook.jp
plugin»smtp»auth_pass
上記ユーザーのパスワード
plugin»smtp»localdomain
SMTP の HELO フェーズ中に使用される名前。
DokuWiki が稼働している Web サーバーの FQDN です。
自動検出させる場合、空のままにします。 		空欄
plugin»smtp»debug
送信が失敗した場合、完全なエラーログを印刷しますか？稼働確認後、無効にして下さい！ 		チェックしない
通知設定
mailfrom
メール自動送信時の送信元アドレス 		admin@outlook.jp
mailreturnpath
不届き通知を受け取るメールアドレス 		admin@outlook.jp

保存をクリック

SMTPの動作確認

管理　＞　SMTP設定の確認

Toに適当なメールアドレスを入力、Send Email

Message was sent. SMTP seems to workと表示されればOK

ロゴ・favicon・アイコンを変更

ロゴ・favicon・アイコンを作成

以下の3つのファイルを作成

logo.pngのサイズは135×135

favicon.icoのサイズは32×32

apple-touch-icon.pngのサイズは180×180

ロゴ・favicon・アイコンをアップロード

メディアマネージャーを開く

名前空間を選択でwikiを選択

アップロードタブを選択

以下の3つのファイルをアップロード

wikiの名前空間に指定のファイル名でアップロードすれば

というパスになる

これにより自動的にロゴやfaviconとして認識される

ブラウザで画像を確認する

メディアマネージャーからアップロードしたファイルは、上記のようなURLでアクセスできる

画像の保存先パス

メディアマネージャーからアップロードしたファイルは、下記のようなディレクトリに保存されている。

/home/user1/Dokuwiki/xxx/data/media/wiki

（DokuWikiのインストールパスが/home/user1/Dokuwiki/xxxの場合）

タイムゾーンを設定

vi /home/user1/Dokuwiki/xxx/conf/local.protected.php

新規にlocal.protected.phpファイルを作成

local.protected.php
<?php
date_default_timezone_set("Asia/Tokyo");

local.protected.phpに上記を設定

local.phpに設定した内容は、DokuWikiアップデート時に上書きされてしまうが
local.protected.phpに設定した内容は、DokuWikiアップデート時に上書きされない

リンクを別ウィンドウで開く

管理　＞　サイト設定

リンク
target»wiki
内部リンクのtarget属性
target»interwiki
InterWikiリンクのtarget属性		_blank
target»extern
外部リンクのtarget属性		_blank
target»media
メディアリンクのtarget属性		_blank
target»windows
Windowsリンクのtarget属性		_blank

保存ボタンをクリック

InterWikiとは、Wiki間のリンクのこと
自分のWikiからWikipediaにリンクを貼ったりするようなケース

メディアリンクとは、画像や動画へのリンク

Windowsリンクとは、Windows共有フォルダのファイルへDokuWikiから直接アクセスさせるもの

DokuWikiにサイトマップを設定する方法

DokuWikiのオプションを設定

管理　＞　サイト設定

配信設定（RSS）
sitemap
Googleサイトマップ作成頻度（日数。0で無効化します。） 		1
スパム対策
relnofollow
外部リンクにrel=“ugc nofollow”を付加 		チェックする
indexdelay
インデックスを許可（何秒後） 		0
（デフォルト値は 60*60*24*5）
高度な設定
send404
文書が存在しないページに“HTTP404/Page Not Found”を使用 		チェックする

保存ボタンをクリック

/data/cacheディレクトリに、sitemap.xml.gzというファイルが作成される

DokuWiki公式・Google サイトマップ

nginxの.confを設定

example.com.conf
location = /sitemap.xml.gz {
    root /home/user1/Dokuwiki/xxx/data/cache;
}

http://example.com/sitemap.xml.gzというURLが
/home/user1/Dokuwiki/xxx/data/cache/sitemap.xml.gzというパスとリンクするように設定

ブラウザでhttp://example.com/sitemap.xml.gzを開くと、sitemap.xml.gzというファイルのダウンロードが始まる

sitemap.xml.gzは圧縮ファイル
xmlの中身はブラウザから表示できないが問題ない
このままでGoogleなどの検索エンジンからはサイトマップとして認識される

sitemap.xml.gzをダウンロードし、ローカルでgzip解凍をすれば、sitemap.xmlの中身をテキストとして確認できる

RSSを設定

RSSを表示

ブラウザで
http://example.com/feed.php
のようなURLへアクセスすると、RSSが表示される

RSSのオプションを設定

デフォルトでは、RSSに表示されるURLが
<link>https://example.com/xxx?rev=1625216895&amp;do=diff</link>
のような形式になっている

<link>https://example.com/xxx</link>
のような形式に変更する

管理　＞　サイト設定

配信設定（RSS）
rss_linkto
XMLフィード内リンク先 		現在のページ
（デフォルトは、変更点のリスト）
rss_media
XMLフィードで、どんな種類の変更を記載するか 		ページ
（デフォルトは、両方）
rss_show_deleted
削除されたフィードを含める 		チェックを外す
（デフォルトでは、チェックあり）

保存ボタンをクリック

デフォルトでは、ページを新規作成したときと、ページを削除した時にrssのフィードが作成される
（ページを更新したときにはフィードは作成されない）

rss_show_deletedのチェックを外すと、ページを新規作成したときだけフィードが作成されるようになる

DokuWiki公式・XML フィード

ファイル名を非表示にする方法

DokuWikiのデフォルト設定では、フッターにwiki/welcome.txtのようなファイル名が表示される

これを非表示にする

管理　＞　サイト設定

基本
template
テンプレート（Wikiのデザイン） 		bootstrap3
テンプレート
Bootstrap3
ページ
tpl»bootstrap3»pageInfo
ページのメタデータの各要素の表示・非表示 		filename チェックしない
extension チェックしない
date チェックする
editor チェックしない
locked チェックする

保存ボタンをクリック

extensionのチェックを外すと、wiki/welcome.txtのような表示が、wiki/welcomeのような表示に変わる
（拡張子が表示されなくなる）

filenameのチェックを外すと、wiki/welcome.txtのようなテキストが表示されなくなる

dateは、最終更新日

editorは、ページを編集したユーザーのユーザー名

lockedは、ページがロックされているかどうか

<title>タグに見出しを設定する方法

デフォルトの設定では、トップページのURLが
http://example.com/start
のようになっている

また、タイトルタグは
<title>start</title>
のようにURLのパスがそのまま使用される

Googleの検索結果にもstartと表示され、ページの内容を連想しづらくSEO的に不利となる

タイトルタグを、ページの見出しで制御できるように変更する

管理画面からタイトルタグを設定

<title>タグをパスから見出しに変更

管理　＞　サイト設定

表示
useheading
最初の見出しをページ名とする 		常に使用する
(デフォルトは　使用しない)

useheadingに常に使用するを設定することで
<title>タグに、URLのパスではなく、ページの1つ目の<h1>や<h2>タグのテキストが入る

DokuWiki公式・設定項目: useheading

サイト名をタイトルに含める

テンプレート
Bootstrap3
ブラウザタイトル
tpl»bootstrap3»browserTitle
ブラウザー上の DokuWiki の見出し
(@TITLE@ [@WIKI@] がデフォルトです。@TITLE@ は現在のページ見出しに置換え。@WIKI@ は Wiki タイトルに置換え。)
title の設定内容を参照して下さい。 		@TITLE@ [@WIKI@]

browserTitleに
@TITLE@と設定すると、<title>タグにサイト名を含まず
@TITLE@ [@WIKI@]と設定すると、<title>タグにサイト名を含む

パンくずリストを表示する方法

管理　＞　サイト設定

表示
breadcrumbs
トレース（パンくず）表示数（0で無効化します） 		0
（デフォルトは10）
youarehere
現在位置を表示（こちらをオンにする場合、恐らく、上のオプションをオフにしたいとも思うでしょう） 		チェックする
（デフォルトはチェックなし）

デフォルトのパンくずリストは、ページの表示履歴を10件分表示するというもので、サイト内での階層構造を示したものにはなっていない

youarehereをオンにすると、階層構造型のパンくずリストになる

breadcrumbsを0にして、ページの表示履歴の方の機能はオフにする

DokuWiki公式・パンくずリスト

Dokuwikiでhtmlの埋め込みをできるようにする方法

設定

管理　＞　サイト設定

編集
htmlok
HTML埋め込みを許可する 		チェックする

保存ボタンをクリック

使い方

ページ編集画面で、<html>タグで囲んだ部分はhtmlとして認識される

DokuWikiにTwitterのツイートを埋め込むときに使える

共有型のwikiでは、悪意のあるHTMLを埋め込むことでクロスサイトスクリプティングに利用されるリスクがあるので注意

DokuWiki公式・設定項目: htmlok

CSSを設定

cd /home/user1/Dokuwiki/xxx
vi conf/userall.css

userall.cssというファイルを新規作成し、その中にCSSを書く

userstyle.cssはブラウザ表示用のCSS
userprint.cssは印刷時に適用されるCSSなど、モード毎に個別のCSSを設定できる
userall.cssは、モードに関係なく適用される

user***.cssはDokuWikiのアップデート時に上書きされない

tableのヘッダーの色を変更

userall.css抜粋
th {
    background-color: black;
    color: white;
}

上記のように設定すると、テーブルのthタグの色を変更できる

スマホで長い文字列が画面から飛び出る問題を解消

userall.css抜粋
code {
    word-break: break-word;
}

codeタグの中では
http://example.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
のような長い文字列も1単語として扱われる

スマホなどの小さい画面では、文字が画面外に飛び出し、レイアウトが崩れる

CSSでbreak-wordを設定してやると、単語の途中でも改行されるのでレイアウト崩れを防げる

フッターを非表示に

などの表示を消す
（フッターを丸ごと消す）

userall.css抜粋
#dw__footer {
    display: none;
}

id="dw__footer"の要素（フッター）を非表示にする

見出しタグを装飾

h1, h2, h3タグには余白と水平線が設定されているのに
h4, h5タグには余白と水平線が設定されていない

h1, h2, h3タグの違いは、文字の大きさだけなので、見た目で区別がつきにくい
h4, h5タグの違いは、文字の大きさだけなので、見た目で区別がつきにくい

h2～h5タグに、それぞれ異なる装飾をつけて、見た目の差異を作りだす

userall.css抜粋
h2, h3, h4, h5 {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1rem !important;
}
 
h2 {
    background-color: #1da1f2;
    color: white;
}
 
h3 {
    border-left: 3px solid #0095d9;
}
 
h4 {
    border-bottom: 2px solid #1da1f2;
}
 
h5 {
    border-left: 3px double #0095d9;
    margin-bottom: 1rem !important;
    padding: 0.5rem 1rem !important;
}

li要素のマージンを調整

userall.css抜粋
.linkli div.li {
    margin: 1em 0;
}

箇条書きの要素をリンクにしたときに、各要素間が狭くてクリックしにくい
上下に1文字分のマージンを設定して行間を広くする 

<html>
<div class='linkli'>
</html>
  * あ
  * い
  * う
<html>
</div>
</html>

行間を広げたい箇条書き要素の前後に、<html>タグで<div class='linkli'>と</div>を置く

画像のサイズを調整するCSS

userall.css抜粋
@media screen and (max-width: 767px) {
    .img-responsive {
        max-width: 100%;
        max-height: 90vh;
    }
}

@media screen and (min-width: 768px) {
    .img-responsive {
        max-width: 75%;
        max-height: 40vh;
    }
}
@media screen and (min-width: 992px) {
    .img-responsive {
        max-width: 50%;
        max-height: 40vh;
    }
}

スマホでは画像を横幅いっぱいに表示
デバイスの幅が767px以下（Bootstrapのxsとsmに相当）で、max-width: 100%;を設定
縦のサイズも少しだけ制限、max-height: 90vh;を設定

パソコンでは画像を画面の50～75%程度まで縮小して表示
デバイスの幅が768px以上（Bootstrapのmdに相当）で、max-width: 75%;を設定
デバイスの幅が992px以上（Bootstrapのlg以上に相当）で、max-width: 50%;を設定
また、スマホで撮影された縦長の画像をパソコンでも見やすくするために、max-height: 40vh;を設定

Google Mapの埋め込みサイズを調整するCSS

Google Map埋め込み用のiframeをレスポンシブ対応させる

userall.css抜粋
@media screen and (max-width: 767px) {
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
}
 
@media screen and (min-width: 768px) {
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
}
 
@media screen and (min-width: 992px) {
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 640px;
        padding-bottom: 480px;
    }
}
 
.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

DokuWikiにGoogle Mapを埋め込む方法

Google Mapで以下のようなiframeが発行される 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12961.947584801825!2d139.6921007!3d35.6896342!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1629781929454!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

これを下記のようにhtmlタグとdivタグを追加してDokuWikiの編集画面に貼り付ける 

<html>
<div class='gmap'>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12961.947584801825!2d139.6921007!3d35.6896342!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1629781929454!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</html>

divタグにgmapというクラスを追加することで、前述のcssによるサイズ調整が有効になる

スマホでパディングを小さく

メインの表示エリアにはパディングが3重に設定されている
スマホだとコンテンツの表示領域が狭くなりすぎる
スマホの場合だけ、マージンやパティングを小さくする

userall.css抜粋
@media screen and (max-width: 767px) {
    #dokuwiki__content {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] div.panel-body {
        padding: 5px !important;
    }
}

Twitterのサイズ調整

DokuWikiにTwitterのツイートを埋め込んだ時のサイズ調整

userall.css抜粋
.twitter-tweet {
    max-width: 400px !important;
}

デフォルトではmax-widthが500pxになっている
画面の占有感が強く見づらいので、400pxに縮小

キャプションの位置を調整

画像の下に表示するキャプションのマージンを調整

デフォルトでは、キャプションの上下のマージンが同じサイズなので
　画像

　キャプション1

　画像

　キャプション2
みたいな並びになったときに、キャプション1が上の画像に対してなのか、下の画像に対してなのかが分かりにくい

userall.css抜粋
.caption {
    margin-top: 0 !important;
}

キャプションと画像の間の隙間を0にする

　画像
　キャプション1

　画像
　キャプション2
のように画像とキャプションのワンセット感が強くなり見やすい

socialiteのSNSシェアボタンのマージンを設定

userall.css抜粋
ul.socialite > li {
    margin: 5px;
}

socialiteのli要素（SNSシェアボタン）のデフォルトのmarginは.25emとなっている
これだとボタンとボタンの間隔が狭すぎて、Google Search Consoleで

という警告が出る

marginを5px程度に増やしてやると警告が出なくなる

最終的なuserall.css

userall.css
th {
    background-color: black;
    color: white;
}
 
code {
    word-break: break-word;
}
 
#dw__footer {
    display: none;
}
 
h2, h3, h4, h5 {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1rem !important;
}
 
h2 {
    background-color: #1da1f2;
    color: white;
}
 
h3 {
    border-left: 3px solid #0095d9;
}
 
h4 {
    border-bottom: 2px solid #1da1f2;
}
 
h5 {
    border-left: 3px double #0095d9;
    margin-bottom: 1rem !important;
    padding: 0.5rem 1rem !important;
}
 
div.li {
    margin: 1em 0;
}
 
@media screen and (max-width: 767px) {
    .img-responsive {
        max-width: 100%;
        max-height: 90vh;
    }
 
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
 
    #dokuwiki__content {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] div.panel-body {
        padding: 5px !important;
    }
}
 
@media screen and (min-width: 768px) {
    .img-responsive {
        max-width: 75%;
        max-height: 40vh;
    }
 
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
}
 
@media screen and (min-width: 992px) {
    .img-responsive {
        max-width: 50%;
        max-height: 40vh;
    }
 
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 640px;
        padding-bottom: 480px;
    }
}
 
.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
.twitter-tweet {
    max-width: 400px !important;
}
 
.caption {
    margin-top: 0 !important;
}
 
ul.socialite > li {
    margin: 5px;
}
 
 
main > div.row {
    display: flex;
}
 
.sidebar-sticky {
    position: sticky;
    top: 50px;
}

main > div.rowと
.sidebar-stickyは、サイドバーのスクロール追従ウィジェット用

DokuWikiをバックアップする（フルバックアップ）

DokuWikiのドキュメントルートを丸ごとバックアップしておけば
ファイルをリストアするだけで復旧が可能

サーバーを移転するときも、新サーバーでバックアップデータを解凍するだけでインストール完了
(nginxの設定や、SSL証明書の発行は別途必要)

バックアップ用のディレクトリを作成

cd /home/user1/Dokuwiki
mkdir -p Backup/Archives

DokuWikiのディレクトリへ移動

複数のwiki運営を想定
DokuWikiの下に複数ディレクトリがあり、各ディレクトリが1つのwikiサイトに相当する構成

Backupディレクトリを作成
Backupディレクトリの下に、Archivesディレクトリを作成

Archivesにxxx_日付.tar.xzというファイルを日次で保存する

バックアップ用のシェルスクリプトを作成

cd /home/user1/Dokuwiki
vi Backup/backup_xxx.sh

Backupディレクトリの下にbackup_xxx.shのようなファイルを新規作成、バックアップ用のシェルスクリプトを書く
（サイトごとに別々のbackup_xxx.shを作成）

backup_xxx.sh
#!/bin/sh
 
# プロジェクト名
PROJECT=xxx
 
# バックアップファイルの保管期間
STORAGE_DAYS=14
 
# Dokuwikiディレクトリへ移動
cd $(dirname $0)/..
 
# バックアップの保存先ディレクトリ、バックアップ対象を設定
DIR_ARCHIVES=./Backup/Archives
DIR_TARGET1=./$PROJECT
 
# プロジェクト名と今日の日付をベースに.tar.xzのファイル名を設定
TODAY=$(date +%Y%m%d)
FNAME=${PROJECT}_$TODAY.tar.xz
FPATH=$DIR_ARCHIVES/$FNAME
 
# バックアップを取得
tar cJf $FPATH $DIR_TARGET1
echo "Created backup: $FNAME"
 
# 古いバックアップを削除
find $DIR_ARCHIVES -type f -mtime +$STORAGE_DAYS -exec rm -f {} +

tar cJf $FPATH $DIR_TARGET1コマンドでバックアップを作成
プロジェクトルートのディレクトリを丸ごとバックアップして、xxx_日付.tar.xzというファイルを作成する

find $DIR_ARCHIVES -type f -mtime +$STORAGE_DAYS -exec rm -f {} +コマンドで古いファイルを削除
Archivesの14日経過した古いxxx_日付.tar.xzを削除する

crontabでバックアップを定期実行

su
crontab -e
crontab
1 2 * * * sh /home/user1/Dokuwiki/Backup/backup_xxx.sh > /tmp/cron.backup_dokuwiki_xxx.log

backup_xxx.shを毎日2時1分に実行、ログをcron.backup_dokuwiki_xxx.logに保存

jqueryをCDNから読み込み

CDNからjqueryを読み込む方式に設定
（デフォルトではローカルからjqueryを読み込む）

ネットワーク
jquerycdn
コンテンツ・デリバリー・ネットワーク (CDN) の選択
（jQuery と jQuery UI スクリプトを CDN からロードさせる場合には、追加的な HTTP リクエストが発生しますが、
ブラウザキャッシュが使用されるため、表示速度の向上が期待できます。） 		CDN: code.jquery.com を使用
（デフォルトは、CDN を使用せず、ローカルデリバリーのみ使用する）

保存をクリック

jqueryは、CDNから読み込んだ方がキャッシュが利用できるので、ページの表示速度が速くなる

DokuWikiの画像をデフォルトでnokinkにする方法

ページ内に画像を貼り付けるとき
{{http://example.com/xxx.jpg?nolink}}
のように
?nolinkを毎回書くのは面倒
デフォルトでnolinkにして、リンクしたいときだけオプションで指定できるように変更する 

cd /home/user1/Dokuwiki/xxx
vi inc/parser/handler.php

handler.phpというファイルを開く

handler.php抜粋
    //get linking command
    if(preg_match('/nolink/i',$param)){
        $linking = 'nolink';
    }else if(preg_match('/direct/i',$param)){
        $linking = 'direct';
    }else if(preg_match('/linkonly/i',$param)){
        $linking = 'linkonly';
    }else{
        $linking = 'details';
    }

handler.php内の、上記のような部分を、下記のように書き換え

handler.php抜粋
    //get linking command
    if(preg_match('/nolink/i',$param)){
        $linking = 'nolink';
    }else if(preg_match('/direct/i',$param)){
        $linking = 'direct';
    }else if(preg_match('/linkonly/i',$param)){
        $linking = 'linkonly';
    }else if(preg_match('/details/i',$param)){
        $linking = 'details';
    }else{
        $linking = 'nolink';
    }

?detailsという指定ができるように、else ifを追加

デフォルトでは、オプションの指定がない場合（else）は
detailsとして処理されていたのを
nolinkとして処理されるように変更

画像のオプション
nolink 画像を表示
リンクしない
direct 画像を表示
リンクをクリックすると大きな画像を表示
linkonly 画像を表示しない
リンクをクリックすると画像を表示
details 画像を表示
リンクをクリックするとEXIFとIPTCのメタデータを表示

handler.phpへの変更は、DokuWiki本体のバージョンをアップデートするときに上書きされる可能性があるので注意

DokuWiki公式・画像とメディアファイルの取り扱い