讓Lychee網路相簿的歡迎頁顯示Unsplash的隨機圖片＆定時自動更新

作者:

Lychee本身有內建歡迎頁面的功能，就是在進入網站時會顯示預先設定好的歡迎訊息，以及所要使用的背景圖片。我在切換到Lychee之初有設定讓它直接去Unsplash的隨機圖庫抓一張圖片當作背景，但是後來Lychee更新之後，它它就無法從Unsplash的隨機圖庫抓圖片，只能設定靜態圖片。今天我想到了一個辦法，讓Lychee能夠正常顯示來自Unsplash隨機圖酷的圖片，並且能夠自動更新，同時也有了這篇文章。

進行之前，有幾點需要留意：

  1. 以下於Lychee上的操作都是使用繁體中文介面的Lychee進型
  2. 此方法需要所使用的主機能夠支援
    1. cron排程執行指令（本例使用systemd的timer）
    2. SSH登入，因為以下包含需要在主機上執行指令操作的部分
  3. 無法做到每次重整頁面後即時更新背景圖片（我最初設定時是這個效果），如要如此就需要修改Lychee下的public目錄的index.php
    我不這麼做是因為一方面是我對PHP不熟悉，另一方面是每次更新之後又必須改一次

那我們就進入正題吧。

  1. 登入自建的Lychee網站，點選左上方的齒輪圖示，然後選擇［設定］
  2. 把畫面往下拉到底，找到［更多］
  3. 找到Mod Welcome區域中的landing_background（下圖紅箭頭），將其修改為”你的Lychee相簿網站網址/圖片名稱”（請依實際使用的名稱填寫，別照抄這裡的！）
    別忘了上面langing_page_enable要設成1，不然是看不到的喔

    最後點選最底下的”Save my modifications, I accept the Risk!”（儲存我的修改，我願意承擔風險）鈕，儲存變更

好，到這裡Lychee網站部分已經完成設定，接著進行網頁伺服器與指令的設置。

網頁伺服器：設定不針對背景圖片進行快取；不設定也是可以顯示，只是後續圖片有更新時，瀏覽器仍會顯示舊的那張，那就沒有意義了
指令：讓系統自行到Unsplash抓取隨機圖片，並儲存成指定的檔名，之後讓Lychee網站去讀這個檔案；之後我們會設定排程，讓系統定時自動執行它
檔案位置：存放在Lychee的public目錄下，這樣Lychee才能從前面設定的網址找到圖片並顯示出來

設定網頁伺服器，不針對背景圖片做快取（以Nginx伺服器為例）

  1. 使用SSH登入主機，進入nginx的設定檔目錄。以Ubuntu為例，其位置為：/etc/nginx/sites-available（如已經設定啟用，也可以去sites-enabled找）
    找到Lychee的設定檔，接著以vi/vim/nano開啟編輯（系統有支援哪個就用哪個，一般都是可以用的，我個人是用nano）
  2. 如果有多個server區段？
    1. 設定檔是專供Lychee網站使用，且有設定http跳轉https：找有包含https設定的那個區段
    2. 包含多個網站：找跟Lychee有關的那一段（如有設定https則一樣找有包含https設定的）
  3. 在選定的server區段中加入以下內容：
    location ~* \.(jpg|jpeg|png|gif|webp)$ {
    add_header 'Cache-Control' 'no-store, no-cache, must-revalidate>
    expires -1;
    }
    以上就是設定伺服器不針對圖片做快取，從而避免發生圖片已更新，但頁面重整後卻未更新的bug。
  4. 存檔退出，最後執行nginx -s reload重新載入設定即可（在此之前可以執行nginx -t檢查）

抓取/更新圖片排程（使用systemd的timer，需要分別存成.timer與.service檔案，並移動到/etc/systemd/system）
本例的檔案名稱分別為update-lychee-splash.timer與update-lychee-splash.service

[Unit]
Description=Update Image from Unsplash
DefaultDependencies=no
After=timers.target

[Timer]
OnActiveSec=5m
OnUnitActiveSec=5m

[Service]
Type=oneshot
User=www-data
ExecStart=/usr/bin/wget -q -O /var/www/Lychee/public/home_img.jpg https://source.unsplash.com/random/1920x1080

[Install]
WantedBy=timers.target

文字顏色說明

  • 黑字：timer與service共用參數
  • 紅字：timer專用參數
  • 綠字：service專用參數

最後執行sudo systemctl enable --now update-lychee-splash.timer就會每5分鐘自動更新了

如對這方面有興趣想進一步了解，歡迎到鳥哥私房菜去看看。

如果設定的是cron，要設定的指令為（cron參數說明一樣請移駕鳥哥私房菜）：

*/5 * * * * /usr/bin/wget -q -O /var/www/Lychee/public/home_img.jpg https://source.unsplash.com/random/1920x1080

最後是抓取圖片的指令解說

wget -q -O /var/www/Lychee/public/home_img.jpg https://source.unsplash.com/random/1920x1080

參數說明

  • -q：不輸出任何訊息
  • -O /var/www/Lychee/public/home_img.jpg：將圖片儲存為指定的名稱，並存放在指定位置下；本例為Lychee的程式路徑，圖片檔名為home_img.jpg
    這裡可以依照實際情況來做相應修改，但別忘了檔名必須與前面設定的網址一致，否則圖片會無法顯示！
  • https://source.unsplash.com/random/1920×1080：抓取圖片的網址。
    本例指定解析度為1920*1080，如要使用不同解析度，可以自行修改，也可以不指定解析度
    更多用法請參考這篇的說明（英文）

這樣就可以讓你自架的Lychee相簿網站的歡迎頁背景自動更新了，但是是定時更新，而非每次進去就更新那種。缺點還是有的，一是設定真的對新手不友好，二是無法即時更新。

發佈留言