linux:dokuwiki

文書の過去の版を表示しています。


DokuWiki

Vue.js + axios で DokuWiki REST API をコールする

DokuWiki REST API Vue.js サンプルアプリ

<html>
  <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script>
  <script>
    self.DEBUG = true;
  </script>
  <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script>
</html>
 
====== DokuWiki REST API Vue.js サンプルアプリ ======
<html>
  <div id="doku-vuejs-app">
    <p>Vue.js version: {{ vue_ver }}</p>
    <p>Response Data(status: {{ response.status }}):</p>
    <pre>{{ response.data }}</pre>
    <p>axios response:</p>
    <pre>{{ response }}</pre>
  </div>
  <script>
    "use strict";
 
    let doku_vuejs_app;
 
    require(['Vue','axios'], (Vue, axios) => {
      doku_vuejs_app = new Vue({
        el: '#doku-vuejs-app',
        data: {
          vue_ver: Vue.version,
          response: '',
        },
        created: function() {
          axios.get('/lib/exe/ajax.php?call=api')
            .then(response => {
              this.response = response;
            });
        }
      });
    });
  </script>
</html>
※Vue.js, REST API バージョンを表示するだけの簡単なサンプルアプリケーション。\\

devel:xmlrpc [DokuWiki]

XML-RPC の機能
関数名
dokuwiki.getPagelist
dokuwiki.getVersion
dokuwiki.getTime
dokuwiki.getXMLRPCAPIVersion
dokuwiki.login
dokuwiki.search
dokuwiki.getTitle
dokuwiki.appendPage
dokuwiki.setLocks
dokuwiki.deleteUsers
wiki.getRPCVersionSupported
wiki.aclCheck
wiki.getPage
wiki.getPageVersion
wiki.getPageVersions
wiki.getPageInfo
wiki.getPageInfoVersion
wiki.getPageHTML
wiki.getPageHTMLVersion
wiki.putPage
wiki.listLinks
wiki.getAllPages
wiki.getBackLinks
wiki.getRecentChanges
wiki.getRecentMediaChanges
wiki.getAttachments
wiki.getAttachment
wiki.getAttachmentInfo
wiki.putAttachment
wiki.deleteAttachment
plugin.acl.addAcl
plugin.acl.delAcl

以降のカスタマイズではテーマの main.php にスタイルを直書きしていますが、検証のためであり本来は個別の CSS ファイルに分けるのが望ましい。直書きしたスタイルはページロードの都度 HTML ファイルに埋め込まれていて CSS Minify (コード圧縮) されないため、スタイル定義が増えるごとにダウンロードサイズも増加する。更に一般的にスタイルの変更は少ないので、ページ内容の変更とは切り分けてブラウザーにキャッシュさせた方が、よりページロード時間を高速化できて良い。

ブラウザーの開発者ツールで CSS ファイルに分けた場合は (from disk cache) ローカルディスクから読み込まれるので、キャッシュ期限で指定された時間が経過するまではインターネットを介してダウンロードされなくなる。更に DokuWiki のエンジンが自動的に style.ini で参照しているスタイルを CSS Minify (コード圧縮) して一つにまとめるので、スタイル定義を複数のファイルに分割している場合でも一度のリクエストで取得できるので、Web サーバーの負荷を減らすと共にクライアントのページロード時間を高速化できる利点がある。
DokuWiki テンプレート ブラウザーキャッシュ

安定したスタイル定義を CSS ファイルに分けるには、テンプレートディレクトリの style.ini に スタイルを含めるように指示して css ディレクトリにファイルを別途作成する。

temprate_dir/style.ini
[stylesheets]
css/custom.less           = screen
temprate_dir/css/custom.less
@font-face {
  font-family: "HackGen";
  font-display: swap;
  src: url("/fonts/hackgen_v1.4.1/HackGen35-Regular.woff2") format("woff2"),
       url("/fonts/hackgen_v1.4.1/HackGen35-Regular.woff") format("woff")
}
pre, code, samp, kbd {
  font-family: "HackGen", "Sawarabi Gothic", "Helvetica Neue", Helvetica, /*"Open Sans", "M PLUS 1p", */"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", Arial, sans-serif;
  font-size: 12px;
}
body {
  font-family: "Sawarabi Gothic", "Helvetica Neue", Helvetica, /*"Open Sans", "M PLUS 1p", */"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", Arial, sans-serif;
}

OS が Dark モードで実行されている場合の対応を追加する。

dokuwiki/lib/tpl/dokuwiki/main.php
<head>
    ...
    <style>
      ...
      @media (prefers-color-scheme: dark) {
          body, .dokuwiki div.page, .dokuwiki .pageId span, #dokuwiki__header h1 a, #dw__toc,
          .dokuwiki pre, .dokuwiki dl.code dt, .dokuwiki dl.file dt,
          .dokuwiki .page ol li, .dokuwiki .page li .li {
              background-color: #1a1a1a;
              background: #1a1a1a;
              color: lightgrey;
          }
          img {
              opacity: .75;
              transition: opacity .5s ease-in-out;
          }
          img:hover {
              opacity: 1;
          }
          th, div.dokuwiki table.pagelist th,
          input, textarea, button, select, optgroup, option, keygen, output, meter, progress,
          .dokuwiki .editBar .summary input.edit, .dokuwiki .editBar .summary input.missing {
              background-color: #323232;
              background: #323232;
              color: lightgrey;
          }
      }
      ...
    </style>
   ...
</head>

※これらで対応が足りているか検証中である。

Google Fonts の Sawarabi Gothic を定義する。

dokuwiki/lib/tpl/dokuwiki/main.php
<head>
    ...
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
    <style>
      /*
      @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap');
      @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,300&display=swap');
 
      @import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap');
      */
      body {
        font-family: "Sawarabi Gothic", "Helvetica Neue", Helvetica, /*"Open Sans", "M PLUS 1p", */"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", Arial, sans-serif;
      }
    </style>
   ...
</head>

※ Google Fonts の CSSURL の末尾に &display=swap を記述すると CSSfont-display: swap; が適用されて、フォントがダウンロード中で利用可能になるまでの間、代替フォント(font-family 指定順で次に有効なフォント) が適用される。

font-display: swap;

CSS では font-display: swap; は次のように @font-face 内に定義する。

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

参考文献

HackGen (白源)
WOFFConverter
<code> ブロックは HTMLpre タグであるため、pre タグのフォントを変更する。

dokuwiki/lib/tpl/dokuwiki/main.php
<head>
    ...
    <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
    <style>
      /*
      @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap');
      @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,300&display=swap');
 
      @import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap');
      */
      @font-face {
        font-family: "HackGen";
        font-display: swap;
        src: url("/fonts/hackgen_v1.4.1/HackGen35-Regular.woff2") format("woff2"),
             url("/fonts/hackgen_v1.4.1/HackGen35-Regular.woff") format("woff")
      }
      pre, code, samp, kbd {
        font-family: "HackGen", "Sawarabi Gothic", "Helvetica Neue", Helvetica, /*"Open Sans", "M PLUS 1p", */"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", Arial, sans-serif;
        font-size: 12px;
      }
      body {
        ...
      }
    </style>
   ...
</head>

Apache に Web フォントの MIME タイプ定義を追加する。

$ sudo vi /etc/httpd/conf/httpd.conf
/etc/httpd/conf/httpd.conf
...
<IfModule mime_module>
    ...
    #
    # If the AddEncoding directives above are commented-out, then you
    # probably should define those extensions to indicate media types:
    #
    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz
 
    # Web Font
    AddType application/font-sfnt         otf ttf
    AddType application/font-woff         woff
    AddType application/font-woff2        woff2
    AddType application/vnd.ms-fontobject eot
...
</IfModule>

Web フォントを配信するに当たって Apache のキャッシュ期間を設定する。

$ sudo vi dokuwiki/.htaccess
dokuwiki/.htaccess
...
ExpiresActive On
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/font-sfnt "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
...

Apache をリロードして設定を反映させる。

$ sudo systemctl reload httpd

<dokuwiki>/data/attic/<namespace>/<attic file> を削除する。
<attic file> は dokuwiki.1437393935.txt.gz の様に、<pagename.連番.txt.gz> になっている。

<dokuwiki>/data/meta/<namespace>/<pagename>.changes というメタファイルを編集します。
メタファイルも行ごとに連番が振られているので、上記で削除した連番の行を削除します。

1376793743      122.249.153.239 E       linux:dokuwiki  tomoyan
1437393935      127.0.0.1       E       linux:dokuwiki          外部編集                0
1546495335      127.0.0.1       E       linux:dokuwiki  tomoyan [geeklogのDokuWiki Plugi(注意: 以下>は古い情報です)]            1

DokuWiki Upgrade Plugin で DokuWiki をアップグレードする。

送信された URL はソフト 404 エラーのようです 

ソフト 404 エラー - Search Console ヘルプ

原因:
 古い URL をブックマークしているユーザーを考慮して、このページが存在しないことを表示して GOTO Plugin で移設先へ適切にリダイレクトするようにしたい。しかし、Google のクローラーのことを考慮すると本来であればこのようなページは 301 (移動した) スタータスを返すべきであるが、GOTO Plugin は一旦 200 (OK) ステータスを返してから一定時間経過後にリダイレクトする。
 つまり、このようなページは検索エンジンには登録されるべきではないので、以下のような対策を行う。

GOTO Plugin と HtmlMetaTags Plugin を併用して、ユーザーには移動したことをお知らせしつつリダイレクトして、Google のクローラーには検索エンジンには登録しないように通知する。

{{htmlmetatags>metatag-robots=(noindex,nofollow)}}
~~GOTO>windows:regex~~

 

dokuwiki/conf/mime.conf が更新時に上書きされているので、以下の設定が存在しないのが原因である。

dokuwiki/conf/mime.conf
svg image/svg+xml

バックアップなどから mime.conf を復元するか、上記の設定をし直す。

Indexmenu Plugin で dTree is not defined スクリプトエラーが発生する。(Plugin が最新ではない場合)
または、以下のエラーが表示される。

Indexmenu Plugin: If you use the 'js'-option of the indexmenu plugin, you have to disable the 'defer_js'-setting. This setting is temporary, in the future the indexmenu plugin will be improved.

様々な Plugin で jQuery not defined スクリプトエラーが発生する。(Chrome のデベロッパーツール Ctrl + Shift + I の Console)

対処方法:
[管理] - [サイト設定] - 機能フラグdefer_js オプションをオフにする。

js が「addInitEvent is not defined」エラーになるので、addInitEvent を jQuery に修正する。

dokuwiki/lib/plugins/crypt/ation.php
<?php
if(!defined('DOKU_INC')) die();
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'action.php');
 
class action_plugin_crypt extends DokuWiki_Action_Plugin {
    function register($controller) {
        $controller->register_hook('TPL_METAHEADER_OUTPUT', 'BEFORE', $this, '_hookjs');
    }
    function _hookjs(&$event, $param) {
        $event->data['script'][]=array('type'=>'text/javascript','charset'=>'utf-8'
//        ,'_data'=>'','_data'=>"addInitEvent(function() { return(decryptEditSetup()); });");
        ,'_data'=>'','_data'=>"jQuery(function() { return(decryptEditSetup()); });");
    }
}

js が「locktimer is not defined」エラーになるので、locktimer を dw_locktimer に修正する。

dokuwiki/lib/plugins/crypt/script.js
function decryptEditSetup(msg) {
  var editform=null, wikitext=null, hiddentext=null, preview=null;
  if(!(editform=document.getElementById('dw__editform'))) {
    // alert("no form dw__editform\n");
    return(true);
  }
  if(!(wikitext=document.getElementById('wiki__text'))) {
   // alert("no wiki__text");
   return(false);
  }
  // if there is no preview button, then assume this is a
  // "Recover draft" page, dont do anything.
  if(!(preview=document.getElementById('edbtn__preview'))) {
    return(false);
  }
 
  // create a hidden element with id 'wiki__text_submit' and
  // name wikitext_edit (same as the wiki__text.  move the real
  // wikI__text element out of the form (so it is not submitted and
  // any <SECRET> text left unencrypted
  if(!(hiddentext=document.createElement('input'))) {
   return(false);
  }
  hiddentext.setAttribute('id', 'wiki__text_submit');
  hiddentext.setAttribute('name', 'wikitext');
  hiddentext.setAttribute('type','hidden');
  editform.insertBefore(hiddentext,null);
  editform.parentNode.insertBefore(wikitext,editform);
 
  if(!(decryptButton=document.createElement('input'))) {
   return(false);
  }
  decryptButton.setAttribute('id', 'decryptButton');
  decryptButton.setAttribute('name', 'decryptButton');
  decryptButton.setAttribute('type','Button');
  decryptButton.setAttribute('value','DecryptSecret');
  // decryptButton.setAttribute('onclick',decryptEditForm);
  decryptButton.onclick=decryptEditForm;
  decryptButton.setAttribute('class','button');
  decryptButton.setAttribute('className','button'); // required for IE
  preview.parentNode.insertBefore(decryptButton,preview);
 
  editform.onsubmit = function() {return editFormOnSubmit();};
 
  // the following is taken from lib/scripts/edit.js to make drafts work
  dw_locktimer.refresh = function(){
      var now = new Date();
      // refresh every minute only
      if(now.getTime() - dw_locktimer.lasttime.getTime() > 30*1000){ //FIXME decide on time
          var params = 'call=lock&id='+encodeURIComponent(dw_locktimer.pageid);
          if(dw_locktimer.draft){
              var dwform = $('dw__editform');
              // begin plugin modified code
              if(encryptForSubmit()===false) { return(false); }
              // end plugin modified code
              params += '&prefix='+encodeURIComponent(dwform.elements.prefix.value);
              params += '&wikitext='+encodeURIComponent(dwform.elements.wikitext.value);
              params += '&suffix='+encodeURIComponent(dwform.elements.suffix.value);
              params += '&date='+encodeURIComponent(dwform.elements.date.value);
          }
          dw_locktimer.sack.runAJAX(params);
          dw_locktimer.lasttime = now;
      }
  };
}

Free Content Management System GPL - Geeklog France からインストールできます。

geeklog 1.8.0 では、Javascript をフッターのテーマ変数{plg_footercode}で実行するようになったらしく、SyntaxHighlighter3 が動作しない。
そのため lib-common.php とテーマのヘッダーテンプレートを改造する。
※この改造による影響の有無は不明です。暫くこれで運用してみます。

COM_siteFooter関数内1,514行目(*1)付近(フッターに出力しているscriptを止める)
*1 - 1.8.0 の行番号, 2.0.0 では 1,570行目付近。 <sxh php highlight:[2]>

  // Retrieve any JavaScript libraries, variables and functions
  //$footercode = $_SCRIPTS->getFooter();

</sxh>

COM_siteHeader関数内1,286行目(*2)付近(ヘッダーの新たなテーマ変数plg_extrascriptにscriptを出力する)
*2 - 1.8.0 の行番号, 2.0.0 では 1,337行目付近。 <sxh php highlight:[3,4]>

  $headercode = $_SCRIPTS->getHeader() . $headercode;
  $header->set_var( 'plg_headercode', $headercode );
  // Retrieve any JavaScript libraries, variables and functions
  $header->set_var('plg_extrascript', $_SCRIPTS->getFooter());

</sxh>

使っているテーマの header.thtml に追記する。 <sxh html highlight:[13]> {doctype} <html{html_attribute}{xmlns}> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”{xhtml}> <title>{page_title_and_site_name}</title> <meta http-equiv=“Content-Script-Type” content=“text/javascript”{xhtml}> <meta http-equiv=“Content-Style-Type” content=“text/css”{xhtml}> <link rel=“SHORTCUT ICON” href=“{layout_url}/images/favicon.ico”{xhtml}> {feed_url} {rel_links} {plg_headercode} {plg_extrascript} </head> </sxh>

Geeklog Forum Plugin の forum.css が Dokuwiki の syntaxhighlighter3 に悪影響するので修正
/path/to/public_html/forum/forum/layout/forum.css <sxh css> .pluginSolidOutline div .php { max-height:400px; overflow:auto; height:auto; width:auto; min-height:100px; } .pluginSolidOutline div .html { height:300px; overflow:auto; width:auto; min-height:100px; } .pluginSolidOutline div .css { height:300px; overflow:auto; width:auto; min-height:100px; } </sxh>

使用言語: ja で日本語化されない場合は、/dokuwiki/conf/local.protected.phpにて追加設定を行う。
local.protected.php$conf['lang'] = 'ja'; を追加

<?php
/**
 * DokuWiki - Geeklog Integration Plugin
 *
 * This file holds configuration information specific to the
 * integration of DokuWiki with Geeklog.
 *
 * You will need to change the require_once() line below to
 * point to your Geeklog lib-common.php file.
 *
 * No other changes should be made to this protected file.
 */
 
//~省略~
$conf['lang'] = 'ja';
 
/* --- Do not change anything below this line --- */
//~省略~
?>
  • linux/dokuwiki.1625925378.txt.gz
  • 最終更新: 2021/07/10 22:56
  • by ともやん