[東京の四季]#2021/25開発ログ

9681 ワード

What I did


<準備完了>
・日本語と英語で翻訳された文字をチェックする際にディスクの割れ目を変更する
・一致するディスククラックをより短く変更してデータベースに再保存する
→→→上の2つの宿題を日本語で翻訳したとき、たくさんの字が押されて切られたので、一致結果を一つ一つ確認して、一つ一つ合っています.完全にオールです...
・写真画像をカットしてサイズを調整する
→→→このマッチング結果も画面やMytripboxに格納されている画像の大きさがバラバラになるのを見たくないので、一つ一つサイズや幅を調整して、それでもダメな子供達は申し訳ありませんが、底を切り落としてしまいました.
🎈画像の変更と切り取りに使用される無料サイト
https://www.iloveimg.com/ko/crop-image
このように並んで、私は本当に自分が一人一人手作りであることを喜んでいます......黒.

・写真サイズやスポット名サイズ位置、背景色ボタン形状や色などCSS装飾
これも非常に細かく調整する必要があります...しかし、あなたが努力した以上、私はあなたが好きです!
//背景はミントクリーム色、観光地リストのタイトルはブックマーク色との明るいピンク、Moreボタンの組み合わせの結果は同じ形の薄いピンク(危険)、伝言ボタンの組み合わせはタイトルと同じエメラルドグリーンです.

・マッチング結果でブックマークをクリックし、Mytripboxページのslickを使用して自動移動をスライドに保存する(LocalStorageで実現)
LocalStorageなのでサーバコードは不要、JavaScriptコードだけで実装可能!
🎈 JS (tripbox.html)
  function showFavoriteSpots() {
        let boxes = getItem('boxes');
        console.log(boxes);
        for (let i = 0; i < boxes.length; i++) {
            let name = boxes[i]['name'];
            let url = boxes[i]['url'];
            let image_name = boxes[i]['image_name'];
            console.log(name);

            let temp_html = `<li class="favorite-title" style="font-size: 18px; color: darkslateblue">${name}
            <img class="img-fa" style="padding-right: 8px" src="/static/${image_name}">
            <a href='${url}' target="_blank" class="button is-danger is-light" style="margin-top: 6px">More</a></li>`
            $('.slider').append(temp_html);
        }
    }
    function getItem(key) {
        return JSON.parse(localStorage.getItem(key)) || [];
    }
showFavoriteSpots()という変数は、以下に示すウィンドウウィンドウの再ロードによって読み込まれます.
    $(document).ready(function () {
        showFavoriteSpots();
ポイントは.
1. start.次のgetItemコードは、htmlページのローカルストレージコードからブックマーク情報を格納する「box」を直接受信します.
let boxes = getItem('boxes');
  • にロードされたブックマーク情報をスライドに表示するために、スライド上のID」.slider"
  • を上へ移動
      $('.slider').append(temp_html);
    终わると形が悪くないけどちょっと混同...
    ・メタソース、画像、お気に入り画像を検索し、各HTMLに入力する
    🎈 HTML
    모든 HTML에 동일하게, <head>의 밑에 넣어주었다. 
    <meta property="og:title" content=" "/>
    <meta property="og:description" content="Fourseason in Tokyo's project"/>
    <meta property="og:image" content="{{ url_for('static', filename='og_image.jpg') }}"/>
    
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    「og画像は四季の色を表す落ち葉写真で、favicon画像は赤い熱気球に選ばれています.」「static」で同じファイル名を指定して入れるべきです.
    ・ドロップダウンリストに作成したTranslationタグもGoogle翻訳タグに置き換えるために大胆に捨てる!サヨナ!

    Doing..


    ・LocalStorage Webストレージ例
    ・備考コード調査の保存

    What to do


    ・Google翻訳プルダウンメニュー
    ・一致結果ページの背景サイズの拡大とスクロール
    ・Mytripboxページのコメントは、ユーザーごとに自分のコメントとして保存できます!!(LocalStorage)
    ・既存住所への配布(水曜までに完了予定)