ktyr report

[Liquid]ショートコード

ブログ記事内やページ内で特定の記述をした部分を特定のhtmlへ変換する機能。

https://github.com/culturekings/shopify-shortcodes
のshortcode-render.liquidとshortcode.liquidをassetsフォルダへ配置

　
templates/article.liquid の記事部分を下記へ書き換える

{% include 'shortcode' load:article.content %}

　
記事編集で下記コードを入力する。xxxxの部分は商品ハンドル

[product_in_blog handle="xxxx"]

　
「product_in_blog」という名称のショートコードを作成する時は、「shortcode-product_in_blog.liquid」というファイルを作成する。

　
引数「handle」を設定する場合、「shortcode-product_in_blog.liquid」で値を取得する処理は下記。

{%- capture product_handle -%}{%- include 'shortcode-render' render:'handle' default:'' -%}{%- endcapture -%}

　

[React]関数やスタイルの適用

App.jsx

export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

[Laravel]リソースコントローラ備忘録

通常

Route::resource('post',PostController::class);

　
edit,updateを無効

Route::resource('post',PostController::class)->except(['edit','update']);

　
index,create,storeだけ有効

Route::resource('post',PostController::class)->only(['index','create','store']);

[Laravel Sail]いつも忘れるやつ#3

マイグレーションファイル作成

sail artisan make:migration filename --table=tablename

　
up,downメソッドへの追記例1

/**
 * Run the migrations.
 */
public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('role')->after('name')->nullable();
    });
}

/**
 * Reverse the migrations.
 */
public function down(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('role');
    });
}

　
up,downメソッドへの追記例2

/**
 * Run the migrations.
 */
public function up(): void
{
    Schema::table('posts', function (Blueprint $table) {
        $table->foreignId('user_id');
    });
}

/**
 * Reverse the migrations.
 */
public function down(): void
{
    Schema::table('posts', function (Blueprint $table) {
        $table->dropColumn('user_id');
    });
}

　
up,downメソッドへの追記例3

/**
 * Run the migrations.
 */
public function up(): void
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('body');
        $table->timestamps();
    });
}

/**
 * Reverse the migrations.
 */
public function down(): void
{
    Schema::dropIfExists('posts');
}

　
マイグレーション

sail artisan migrate

[React]export

App.jsx

export const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}

　
index.js

import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />,document.getElementById("root"));

[React]ReactDOM

import ReactDOM from "react-dom";
import { Fragment } from "react";
const App = () => {
    return (
        <Fragment>
            <h2>Hello</h2>
            <p>World</p>
        </Fragment>
    );
}
ReactDOM.render(<App />,document.getElementById("root"));

　
省略できる

import ReactDOM from "react-dom";
const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}
ReactDOM.render(<App />,document.getElementById("root"));

[Laravel Sail]いつも忘れるやつ#2

docker-compose.ymlにphpMyAdmin追記

    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            MYSQL_USERNAME: '${DB_USERNAME}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            PMA_HOST: mysql
        networks:
            - sail

[Liquid]バリエーション選択select

<select name="id" class="js_variantsSelect" data-product="{{ product.id }}">
    {%- for variant in product.variants -%}
        <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
    {%- endfor -%}
</select>

[Laravel Sail]いつも忘れるやつ#1

プロジェクト作成

curl -s https://laravel.build/project-name | bash

　

.bashrcに追記

alias sail="./vendor/bin/sail"

　

laravel/breeze 追加・インストール

sail compose require laravel/breeze --dev
sail artisan breeze:install

　

Breezejp
https://github.com/askdkc/breezejp

sail composer require askdkc/breezejp --dev
sail artisan breezejp

　

リソースコントローラー作成

sail artisan make:controller TestController --resource --model=Test

　

モデル作成

sail artisan make:model Test -m

　
マイグレーションファイル作成

sail artisan make:migration filename --table=tablename

　
コントローラ作成

sail artisan make:controller TestController