notes.joyhsu.com Open in urlscan Pro
2607:f2d8:6064:4::88 Public Scan

Back to summary

URL:
https://notes.joyhsu.com/
Submission: On December 07 via api (December 7th 2024, 10:48:59 pm UTC) from US — Scanned from DE

Form analysis
1 forms found in the DOM

GET https://notes.joyhsu.com/

<form role="search" method="get" action="https://notes.joyhsu.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"><label class="wp-block-search__label" for="wp-block-search__input-1">搜尋</label>
  <div class="wp-block-search__inside-wrapper "><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required=""><button aria-label="搜尋" class="wp-block-search__button wp-element-button"
      type="submit">搜尋</button></div>
</form>

Text Content

跳至主要內容


就以的雜務筆記

選單及小工具
搜尋
搜尋


近期文章

 * leafletjs 使用筆記
 * wp 的 divi 與 google api 相關設定
 * 網頁 sticky 特效
 * svg線條動態出現 & css動畫（圖片簡單移動）
 * Pr遮照使用


近期留言

尚無留言可供顯示。


彙整

 * 2024 年 12 月
 * 2022 年 6 月
 * 2021 年 11 月
 * 2021 年 10 月
 * 2020 年 9 月
 * 2020 年 8 月
 * 2020 年 6 月
 * 2020 年 5 月
 * 2020 年 3 月
 * 2019 年 12 月
 * 2019 年 10 月
 * 2019 年 9 月
 * 2019 年 6 月
 * 2019 年 5 月
 * 2019 年 3 月
 * 2019 年 2 月
 * 2019 年 1 月
 * 2018 年 11 月
 * 2018 年 10 月
 * 2018 年 8 月
 * 2017 年 6 月
 * 2015 年 5 月
 * 2015 年 4 月
 * 2012 年 8 月
 * 2012 年 5 月
 * 2012 年 4 月


分類

 * After effects
 * css
 * js
 * Premiere Pro
 * sublime
 * wordpress
 * 參考連結
 * 好用網站
 * 未分類
 * 架站實務
 * 關鍵字


LEAFLETJS 使用筆記

因為用 google map api
在我的案子上不可行（簡單來說就是客戶不會想支付這部份的費用，也不可能請他們設定綁信用卡跟金鑰給我），那時候合作提案的公司給了我農業易遊網的網址，說那是他們想做的效果。我仔細看了地圖發現他們並不是使用
google map ，就研究一下他們是用哪個套件，想說不難使用的話也許我可以拿來用。

他們用的是這套：https://leafletjs.com/

由於我是 js 苦手，上網找其他說明有時候照貼 code 地圖也跑不出來。下面這個是我測試後確定可以跑起來的寫法：

head 裡面先引用這些

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

body裡面則是這些

<div id="map" style="width:100%;height: 400px;"></div>
//地圖顯示的區塊

<script>

	const map = L.map('map').setView([25.06303099468595, 121.53381965219468], 16);
//建立一個新的地圖，中心位置設定在行天宮的經緯度，還有預設的倍率為16

	const customIcon = L.icon({
	  iconUrl: 'https://divi.joyhsu.com/wp-content/uploads/2024/12/icon@2x.png',
	  iconSize: [30, 37],
	});
//建立自定的地標icon圖示

	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);
//引用OpenStreetMap，跟最大放大倍率為19

	const marker_1 = L.marker([25.06303099468595, 121.53381965219468],{icon: customIcon}).addTo(map)
		.bindPopup('<a href="https://www.youtube.com/" target="_blank">行天宮</a>').closePopup();
//第一個地標。如果使用自定icon需要在經緯度後面多加{icon: customIcon}
//因為我預設都不顯示彈跳視窗，所以用closePopup()
//如果要顯示就寫openPopup()

	const marker_2 = L.marker([25.063018150649686, 121.52995702521183],{icon: customIcon}).addTo(map)
		.bindPopup('<a href="https://www.youtube.com/" target="_blank">亞都大飯店</a>').closePopup();
//第二個地標

</script>


map 的 style 用行內樣式寫是因為我要置入在 divi 的區塊內，如果不這樣寫他高度顯示會不正常。如果是自己單獨寫的 html 的話， css
可以不用行內樣式寫。

之後使用比較費工的反而是要去手動查找地點的經緯度。這個就是去 google map
先搜到地點，在地點上按右鍵就會跳出一個框框，顯示該點的經緯度，拷貝起來即可使用。詳細可參考這篇的在 Google 地圖中查看地點座標

發佈日期: 2024 年 12 月 7 日2024 年 12 月 7 日分類 js、架站實務在〈leafletjs 使用筆記〉發佈留言


WP 的 DIVI 與 GOOGLE API 相關設定

主要是有兩個東西會需要設定 google api：

 1. google font
 2. google map


DIVI 內使用 GOOGLE FONT

如果只是要使用google font，在 divi 內設定google api的話，可以很方便的使用所有google
font，會比下載字型檔案後上傳引入的方式好用很多。且若上傳，還得額外去調整php.ini裡面單一檔案上傳的限制調大。

設定方式如下：

 1. 到 google cloud 新增一個專案
 2. 啟用「Web Fonts Developer API」
 3. 建立一個憑證，取得金鑰複製起來，如果只使用字體的話，不用綁信用卡
 4. 回到wp後台的 Divi Theme Options ，到 General 的 Google API Key 輸入金鑰，並且把Google Fonts
    Subsets 改成 enabled （這樣才能選同一字體的子集，以中文來說就是不同的粗細）後儲存
 5. 之後再使用 divi 設定字體的時候，輸入字體名稱（字體名稱要到 google font 去看他的英文，例如思源黑體就是 Noto Sans
    TC）就可以搜到 google font 的相關字體來使用


DIVI 內使用 GOOGLE MAP

這個主要是使用 google map api 的方式來使用 google map。如果只是使用 iframe 嵌入，不需要額外設定 google api

設定方式如下：

 1. 到 google cloud 新增一個專案
 2. 啟用的API：粗斜體這三個我確定一定要開。特別是 Address Validation API ，這個若不開的話，在 divi 裡面的 map
    模組想設定地址去標地標就會沒辦法設定。其他是跟map有關的api，我也有開，但不確定哪幾個跟 divi 的 map 模組有關
    * Maps JavaScript API
    * Geocoding API
    * Address Validation API
    * Maps Elevation API
    * Maps Embed API
    * Maps SDK for Android
    * Maps SDK for iOS
    * Maps Static API
    * Places API
    * Places API (New)
    * Roads API
    * Street View Publish API
    * Street View Static API
 3. 建立一個憑證，取得金鑰複製起來，因為要用 map api ，系統會要求綁訂信用卡
 4. 回到wp後台的 Divi Theme Options ，到 General 的 Google API Key 輸入金鑰
 5. 之後使用 divi 插入 map 模組的時候，map框框內資料就會正常顯示，輸入地址也可以正常把地點 pin 進去

發佈日期: 2024 年 12 月 6 日分類 wordpress、架站實務在〈wp 的 divi 與 google api 相關設定〉發佈留言


網頁 STICKY 特效

sticky
特效簡單來說就是網頁滑動的時候，可以把某個物件原本滑動但滑到某個高度後就固定在一個位置，然後再滑動到某個高度的時候，又不固定了讓他滑走。可以看像這個網站，滑動的時候左右區塊固定，但滑到底的時候，又不會固定了就往上滑走了。

然後上網找到這個網頁
https://www.hongkiat.com/blog/sticky-elements-jquery-plugins/

但他提供的特效更多種，應該說都跟滑動有關。除了滑動後「黏住（sticky）釘住（pin）」的效果，還有滑動後可以出現動畫這類的，像是 ScrollMagic，應該很多滾動動畫可能就是用這類的套件吧。

然後因為我要的效果是被黏住的元件太長的話，要先滑到底，到底才黏住。然後到母元件結束的時候就不要黏住。所以後來是選擇 HC-Sticky
看起來最符合需求，套用上也不會太困難。

發佈日期: 2022 年 6 月 23 日分類 js


SVG線條動態出現 & CSS動畫（圖片簡單移動）

svg線條動態描繪效果
https://wcc723.github.io/svg/2014/06/15/svg-css-stroke-animation/

css動畫（圖片簡單的移動）
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

發佈日期: 2021 年 11 月 17 日分類 css


PR遮照使用

Pr遮照使用特效名稱
Track Matte Key



發佈日期: 2021 年 10 月 24 日2021 年 10 月 24 日分類 Premiere Pro


AE特效/功能關鍵字筆記

FootageCrate：影片特效素材免費下載
https://footagecrate.com/

Time-Remapping
讓一段影片可以忽快忽慢

Simple Choker
可以把一個輪廓擴大或縮小範圍

SetMatte
可以反向選取擴大後原本的範圍

Roto Brush
把一段影片在沒有綠幕的狀況下去背
Roto Brush 使用

Saber特效

發佈日期: 2021 年 10 月 24 日分類 After effects


自訂 INPUT 上傳檔案按鈕樣式

參考此文章

重點摘要

 1. 用 label 把 input 包起來
 2. 把 input 隱藏
 3. 用 css 設定樣是在 label 上即可
 4. 如果要用 icon 或是自訂文字，寫在lable包起來就可以囉。可以使用 fontawesome

發佈日期: 2020 年 9 月 3 日分類 未分類


自訂 SELECT 樣式

參考這篇文章

css的重點：如何把預設下拉選單樣式移除？

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

移除後，用自訂背景的方式放自己做的箭頭圖

IE要另外

::-ms-expand {
display: none;
}

被選取的狀態調整
:focus{
box-shadow: 0 0 5px 2px #467BF4;
}

發佈日期: 2020 年 9 月 3 日分類 未分類


響應式圖片（RESPONSIVE IMAGES）作法

參考文章：https://cythilya.github.io/2018/08/24/responsive-images/

google 的文章：https://support.google.com/webmasters/answer/114016?hl=zh-Hant

最基本的用法
<img src=”small.jpg”
srcset=”small.jpg 640w, medium.jpg 960w, large.jpg 1024w”
/>

裡面的640w，960w，1024w，就是
螢幕寬度640px時，顯示small.jpg
螢幕寬度960px時，顯示medium.jpg
螢幕寬度1024px時，顯示large.jpg

發佈日期: 2020 年 8 月 26 日分類 css、架站實務


AE匯入AI時，AI只能有一個工作區域不然會有問題

遇到的狀況：

從AE匯入AI，結果有的元件正常，有的元件看不見空空的，看不見的元件大小都顯示1×1

後來搜英文的資料看到，工作區域有多個的話就會有問題，但如果工作區域只有一個就沒事。重新將兩個工作區域拆分成兩個檔案後，就正常了。

發佈日期: 2020 年 8 月 17 日2020 年 8 月 17 日分類 After effects


文章分頁

頁次 1 頁次 2 ... 頁次 10 下一頁
本站採用 WordPress 建置

notes.joyhsu.com Open in urlscan Pro 2607:f2d8:6064:4::88 Public Scan

Form analysis 1 forms found in the DOM

GET https://notes.joyhsu.com/

Text Content

notes.joyhsu.com Open in urlscan Pro
2607:f2d8:6064:4::88 Public Scan

Form analysis
1 forms found in the DOM