-
Notifications
You must be signed in to change notification settings - Fork 0
6. Tips
CLIでプロジェクトフォルダーに入って、
> deno task lume --serve を打ってから、http://localhost:3000 を開く。
編集してから直ぐその変更が見れます
ビルドだけでしたら:
> deno task lume
プロジェクトルートにある、deno.jsonにあるのでそれ開いて確認する
git commit
git push
Mainにプッシュするだけで、公開。
Deno Deploy使って無料アカウントで公開していますので、Githubにログインしてから、Deno Deploy https://deno.com/deploy でログインするとGithub撰ぶ形でログインする。
Changelog https://github.com/lumeland/lume/blob/main/CHANGELOG.md を確認してから、
> deno task lume upgrade
時々、Breaking Changeがあるので、あるかどうか、確認してからの方が、リスク少ない。
src/_includes/layouts/base.vto
プラグインにて自動注入のものもある、例えば metaプラグインからogタグなど。
src/index.vto
src/about.vto
src/showcase/hogehoge.vto
画像をリンクしたくない場合、Showcaseの .vto ファイルのFrontmatterを編集して、 hidelink: true にする:
Showcaseにパスワードかけたい場合、url に /private/ を入れる。逆のパターンもありえます、保護していたが、今はオープンにしたい場合、/private/ を取り除くだけ。例えば /showcase/private/hogehoge を、/showcase/hogehoge に編集して保存するだけでOK。
フォルダーは関係無く、urlを編集すれだけで、OKです。プロジェクトルートにあるserve.tsが、確認してくれます。
パスワードを変更したい場合、Deno Deployの関数を変更するとできる。Deno Deployのプロジェクト開いて、Settings撰んで、Environment Variablesセクションの USER_1_PASS 変数を変更する。
Google Fontなら/src/_includes/layouts/base.vto の<head>のところで編集。
CSSクラスは/src/styles.cssで出来る。
色んなやり方はあるが、Ventoテンプレートの使い方と見せる為に、サイトのデータに、変数として仕立てた。
Tachyons CSSに存在する色名であれば、この方法は行ける。サイトのデータは/src/_data.ymlに保存してあるので、その中のblueを例えばpurpleやdark-pinkにする:
site:
...
navbgcolor: "blue"
どうやって使っているかと言うと、Vento Templateの /src/_includes/templates/nav.vto の所でVento特有の{{}}スタイルで呼べます。Lumeは/src/_data.ymlのDataを見ているから、例えば{{ site.navbgcolor }}で呼べる:
<nav class="db dt-l w-100 border-box pa3 ph5-l bg-{{site.navbgcolor}}">
例えば、Tachyonsの色じゃなくて、カスタムCSSクラスで行きたい場合は、当然Vento Templateの /src/_includes/templates/nav.vtoの、そのクラスを変更すればOK。クラスがjulie-primaryであれば:
<nav class="db dt-l w-100 border-box pa3 ph5-l julie-primary">
また、Lumeサイト設定を一つのところにしたい場合(例えば、サイトテンプレートを作って色んなお客様に提供したい場合)Lumeのサイトデータ/src/_data.ymlを使うと良い:
site:
...
navbgcolor: "julie-primary"
とこれで行ける:
<nav class="db dt-l w-100 border-box pa3 ph5-l {{site.navbgcolor}}">
(Tachyonsじゃないからbg-を削除した)