表示中の投稿記事の検索条件: tips
すべての投稿記事を見るため検索条件をリセットする
初コメントを頂きましたので、せっかくなので、一つ修正をさせていただきます。
TYPO3はシェルで入れなければならないわけではなく、普通にFTPで入れることができます。
SSHで入れることができれば、後でいろいろいい事があるので、SSHを使用することを推奨はしますけど。
例えば、バージョンアップが楽になるとか。
今日は以上。
今まで書いてきたTS(TypoScript)はBE(バックエンド)で直接記述する方法をとってきた。いろいろ覚えてくると、その内容を、ローカルに保存してきたくなる(僕はそう思った)。
その方法をちょっとご紹介しよう。
僕が知っているのは、2通りある。
1つ目は、Jeditという、テキストエディタと、TYPO3のエクステンションであるjeditvfsというものを使用する方法。
これはローカルPCでjeditを使用し、普段通りTSを記述し、転送すると、jeditvfsが受け取り、BEに反映されるというもの。
しかし、日本語が文字化けした状態で反映されてしまうようなので、TSに日本語を一切記述しないというのであればいいが、僕の場合は使用不可という結果になってしまった。この文字化けの問題だけなんとかなれば、かなり利用価値のあるツールだったことは間違いない。
2つ目に、あらかじめ、BEで
page.config.no_cache = 1
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/#YourPath/#YourFile.ts">
と記述しておき、ローカルでTSを記述したファイルを作成し、指定した場所に保存するし、それを読み込ませる方法。
気 をつけなければならなのが、上記のようなファイルだと、tsという拡張子をTYPO3が認識してくれないため、あらかじめインストールツールでtsという 拡張子のファイルを認識させるよう設定する必要がある。また、反映させるためにはいちいちBEでFEのキャッシュをクリアにしなければならない(上記の記 述内容だと、キャッシュしないようにしているはずだが、僕の環境ではうまく動作しなかった・・・)。
以上のような方法だと、ローカルにtsを残しておくことができるし、使い回しする場合も簡素化できる。
ここ1年ほどは、僕の場合、この方法で組んでいる。
すこ~し、サボってしまいました。すんまんせん。
本日は、指定したテキストを指定するタグなどで囲う方法をやります。
今までの記事は初めから呼んでいただかないと、下に記述した内容は分からないと思いますので、目を通してくださいね。
例えば、
HELLO WORLD!
という文言を太字にしたい場合は、
page.10 = TEXT
page.10 {
value = HELLO WORLD!
wrap = <b>|</b>
}
と記述するだけです。
wrapという命令で、valueを囲うわけです。
<b>と</b>の間の「|」はその場所に、valueで指定したものが入るわけです。
今日、びっくりしたことが。
出勤する前に、コンビニで個人的な支払いをしたときだった。いくらかなぁと思ったら、66,666円。6のぞろ目。
今日は何か良い事がありそうな予感・・・。
さて、昨日は「通常」部分のエレメントをFEに表示させる設定について学びました。
本日は、それ以外の「左」「右」「ボーダー」のエレメントを表示させる設定をやります。
まず、今まで使用してきた、htmlテンプレートの修正を行わないといけません。
というのは、今までのhtmlテンプレートだと、1つのカラムしか表示させられないからです。(※TSの記述により、複数のカラムも表示はできるが、ここでは省略させていただきます)
まずは、htmlテンプレートの作成から。
まず、BE(バックエンド)にログインします。
メニューから テンプレート > ページツリーから対象のページを選択 >
すでにセットアップされたテンプレートが表示される場合と、新しくテンプレートを作成する画面が表示されるかと思います。
まだ作成していなければ、デフォルトで構いませんので作成してください。作成方法については、このブログの以前の記事を参考に作成してみてください。
Resources という項目名の左に鉛筆アイコンがありますのでそちらをクリックしてください。
この画面では、新しくファイルを作成する場合に利用できます。例えば、htmlやcssファイルなど。
これで空のファイルが作成されました。
作成されたファイル名のあたりに、鉛筆アイコンがあるはずですので、それをクリックしてください。
入力ボックスの中に、下記のソースを入れてください。
<!-- ###DOCUMENT_BODY### -->
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td>
<!-- ###INSIDE_LEFT### -->
LEFT Column
<!-- ###INSIDE_LEFT### -->
</td>
<td>
<!-- ###INSIDE_MAIN### -->
MAIN Column
<!-- ###INSIDE_MAIN### -->
</td>
<td>
<!-- ###INSIDE_RIGHT### -->
RIGHT Column
<!-- ###INSIDE_RIGHT### -->
</td>
</tr>
<tr>
<td colspan="3">
<!-- ###INSIDE_BORDER### -->
BORDER Column
<!-- ###INSIDE_BORDER### -->
</td>
</tr>
</table>
<!-- ###DOCUMENT_BODY### -->
そして、updateボタンを押します。
これで、htmlファイルが作成されました。
次は、TSの設定です。
現在の画面で、一旦、cancelボタンを押します。Template informationというページに戻ります。
Setupという項目横の鉛筆アイコンを押します。
page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = test.html
workOnSubpart = DOCUMENT_BODY
subparts.INSIDE_LEFT < styles.content.getLeft
subparts.INSIDE_MAIN < styles.content.get
subparts.INSIDE_RIGHT < styles.content.getRight
subparts.INSIDE_BORDER < styles.content.getBorder
}
やっと、普通のホームページらしくなってきましたね~。
もうお気づきかと思いますが、これさえ覚えてしまえば、デザインは自由ですよね。
あとは、作成したhtmlに画像を配置したりすれば、更新ができるホームページができます。
TYPO3のよさの一つは、このように、各ページにTSを記述することで、各ページごとにデザインやレイアウトを変えられる点です。