最新消息

News

您目前所看到的內容、樣式、文字，色系，皆可由後台進行修改，亦可自由顯示或隱藏各區塊，並以您所設計的內容替代。 The content, style, text, and color system you currently see can all be modified in the background. You can also freely display or hide each block and replace it with the content you design. 您目前所看到的内容、样式、文字，色系，皆可由后台进行修改，亦可自由显示或隐藏各区块，并以您所设计的内容替代。現在表示されているコンテンツ、スタイル、テキスト、カラーシステムはすべてバックグラウンドで変更でき、各ブロックを自由に表示または非表示にして、デザインしたコンテンツに置き換えることもできます。

這是一個RWD官網範例这是一SlimWeb的RWD官网示例 This is a SlimWeb RWD official website example これはSlimWebのRWD公式ウェブサイトの例です

您可以在此測試前端各種功能，包含會員註冊、購物車、金流、電子地圖、下單購買等諸多功能。您可以在此进行前端各种功能的测试，包括会员注册、购物车、金流、电子地图、下单购买等多种功能。 You can test various frontend functions here, including member registration, shopping cart, payment flow, electronic map, ordering, purchasing, and many other functions. 会員登録、ショッピングカート、決済、電子マップ、注文購入など、さまざまなフロントエンド機能をここでテストすることができます。

ATM測試 ATM测试 ATM Test ATMテスト

線上ATM，選擇台新銀行進行測試，提交後即可至後台接收您的訂單在线ATM，选择台新银行进行测试，提交后即可在后台接收您的订单 Online ATM, choose Taishin Bank for testing, you can receive your order in the background after submission オンラインATM、テストに台新銀行を選択、提出後バックエンドで注文を受け取ることができます

信用卡測試信用卡测试 Credit Card Test クレジットカードテスト

卡號請使用 4311-9522-2222-2222 安全碼 222, 金額上限 30000 卡号请使用 4311-9522-2222-2222 安全码 222，金额上限 30000 Please use card number 4311-9522-2222-2222, security code 222, with a maximum amount of 30000 カード番号 4311-9522-2222-2222、セキュリティコード 222、最大額 30000 を使用してください

元素色彩調整元素色彩调整 Element color adjustment 要素の色調整

您可以自由調整前端元素色彩，例如按鈕、標題、背景等等(必須先登入後台) 您可以自由调整前端元素色彩，例如按钮、标题、背景等等(必须先登入后台) You can freely adjust the color of front-end elements, such as buttons, titles, backgrounds, etc. (you must log in to the backend first) ボタン、タイトル、背景などのフロントエンド要素の色を自由に調整できます（最初にバックエンドにログインする必要があります）。

後台測試后台测试 Backend Test バックエンドテスト

如果您希望測試後台功能，提供您帳號密碼進行測試如果您希望测试后台功能，请加入 Line: bobo2010，Eric将为您提供账号密码进行测试 If you want to test the backend functionality, please add Line: bobo2010, and Eric will provide you with an account and password to test バックエンド機能のテストを希望される場合は、Line: bobo2010 を追加してください、Ericがアカウントとパスワードを提供してテストします

多國語系多国语系 Multilingual 多言語

如果您看到這段文字，代表您所使用的語系為繁體中文，您可以在後台建立多種語系，且可以為各語系提供不同的內容，您可以自由地選擇，要開放給前端選擇語系，或是完全由後台控制所要顯示的語系。如果您看到这段文字，代表您所使用的语系为简体中文，您可以在后台创建多种语系，并可以为每种语系提供不同的内容，您可以自由地选择，要开放给前端选择语系，或是完全由后台控制所要显示的语系。 If you see this text, it means that the language system you are using is English. You can create various language systems in the background and provide different content for each language system, You can freely choose whether to allow the front-end to choose the language, or to completely control the language to be displayed by the back-end. このテキストを見ると、あなたが使っている言語系は日本語で、バックグラウンドで複数の言語系を作成し、各言語系に対して異なった内容を提供することができます，フロントエンドに言語の選択を許可するか、バックエンドによって表示される言語を完全に制御するかを自由に選択できます。

SlimGPT線上客服 SlimGPT线上客服 SlimGPT Online customer service SlimGPT オンラインカスタマーサービス

除了商品搜尋的效率完勝人類，您還可以在後台設定他的性別、年齡、用詞、語氣，甚至是性格，打造出一個最瞭解您的產品，且全年無休的客服小幫手。除了商品搜寻的效率完胜人类，您还可以在后台设定他的性别、年龄、用词、语气，甚至是性格，打造出一个最了解您的产品，且全年无休的客服小帮手。 In addition to being more efficient than humans in product search, you can also set his gender, age, words, tone, and even personality in the background to create a customer service assistant who knows your products best and is available 24/7. 製品検索において人間よりも効率的であることに加えて、バックグラウンドで性別、年齢、言葉、口調、さらには性格を設定して、製品を最もよく理解し、24 時間年中無休で対応するカスタマーサービスアシスタントを作成することもできます。

使用 LINE Notify 訂單訊息不漏接使用 LINE Notify 订单讯息不漏接 Use LINE Notify to avoid missing order messages LINE Notifyを使って注文メッセージを見逃さないようにする

串接LINE Notify，當有新訂單產生時，即時的發送至您的LINE群組內，讓您不用進入後台也能進行備貨與出貨，除此之外，當SlimGPT線上客服遇到無法處理的問題時，也會將客戶的提問及其會員資訊，一併發送到LINE群組內。现在SlimWeb可以串接LINE Notify，当有新订单产生时，即时的发送至您的LINE群组内，让您不用进入后台也能进行备货与出货，除此之外，当SlimGPT线上客服遇到无法处理的问题时，也会将客户的提问及其会员资讯，一并发送到LINE群组内。 Now SlimWeb can connect to LINE Notify. When a new order is generated, it will be sent to your LINE group immediately, allowing you to prepare and ship goods without entering the backend. In addition, when SlimGPT online customer service encounters When a problem cannot be solved, the customer's questions and member information will also be sent to the LINE group. SlimWeb が LINE Notify に接続できるようになりました新しい注文が生成されると、すぐに LINE グループに送信され、バックエンドに入ることなく商品の準備と発送が可能になりますまた、SlimGPT オンラインカスタマーサービスに問題が発生した場合解決すると、お客様の質問や会員情報もLINEグループに送信されます。

重點商品

Photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.

GSAP 的 ScrollTrigger

以滑動事件為導向的動畫

GSAP 中一個非常重要的動畫模式～ScrollTrigger～以滑鼠滾輪或是手指滑動事件作為動畫的依據，以下簡稱滾輪動畫，滾輪動畫當然就是發生在視窗進行滾動時，由事件來觸發動畫的播放，滾輪動畫可分為兩種類型

滾輪當作動畫的觸發器

只負責播放動畫，不干涉其運作

如果你還不知道如何用 GSAP 做一段動畫，請參考之前的教學，這裡我們還是沿用小蜘蛛人做範例，同樣用蜘蛛人當作觸發器，當蜘蛛人的位置來到視窗的中央時，就播放動畫。

gsap.to('#spider1', {
        x: '200%', //往右移動100%
        duration: 0.5, //動畫時間0.5秒
        scrollTrigger: { //滾輪觸發器
            trigger: '#spider1', //觸發的元素
            start: 'top center', //觸發時機-當蜘蛛人的top位置與視窗center位置交會時
            end: 'bottom center', //觸發結束時機-當蜘蛛人的bottom位置與視窗center位置交會時
            toggleActions: 'play reverse play reverse', //定義滾輪往返元素時的動作
            markers: true //顯示元素與視窗的輔助標記
        }
    })

toggleAction 總共有4個參數，分別代表

當視窗往下滾動，蜘蛛人 top 與視窗 center 交會時 - play(播放)
當視窗往下滾動，蜘蛛人的 bottom 與視窗 center 交會時 - reverse(倒放)
當視窗往上滾動，蜘蛛人的 top 與視窗 center 交會時 - play(播放)
當視窗往上移動，蜘蛛人的 bottom 與視窗的 center 交會時 - reverse(倒放)

可以用的參數有 play, pause, resume, reverse, reset, restart, complete, none
這類型動畫應用範圍很廣泛，舉例來說你希望用戶滑動到某個商品時，就跑出一個輔助說明的小視窗等等～

由滾輪來控制動畫進度

非常流行的 Scroll 應用

這種模式的動畫直接由滾輪來控制，體驗性非常好

gsap.to('#spider2', {
        x: '200%', //往右移動100%
        rotate: 360,//旋轉360度
        scrollTrigger: { //滾輪觸發器
            trigger: '#spider2', //觸發的元素
            start: 'top center', //觸發時機-當蜘蛛人的top位置與視窗center位置交會時
            end: 'bottom center', //觸發結束時機-當蜘蛛人的bottom位置與視窗center位置交會時
            scrub: true, //定義由滾輪來控制動畫進度
            markers: true //顯示元素與視窗的輔助標記
        }
    })

其實非常簡單～加上一個 scrub 參數並設定為 true 就行～
這只是一段簡單的範例，ScrollTrigger 可以做非常複雜的效果，更多範例可以參考官網的文件。

搭配 transform 做出 3D 效果

使用 SlimWeb TinyMCE 內的調整元素，快速得到動畫參數

透過調整元素功能，我們能迅速設定元素的各種 transform 參數，例如翻轉角度、中心點、透視度等等，以下讓我們看一個較複雜的範例

My adventure

Photography

gsap.from('#c_1739618909084', {
        rotateY: 120, //初始的Y軸旋轉120度
        scrollTrigger: {
            trigger: '#c_1739618909084', //使用卡片本身當觸發器
            start: 'top bottom', //卡片的 top 與視窗的 bottom 交會時
            end: 'top top', //卡片的 top 到達視窗的 top
            scrub: true, //使用滾輪控制動畫
            markers: true //顯示元素與視窗的輔助標記
        }
    })

這段動畫分為兩個部分，首先將整張卡片從左側沿著 Y 軸翻轉進到視窗內，我們可以看到卡片再翻轉時，其軸心是沿著自己的最左側，所以我們必須先設定好卡片的軸心點，在 TinyMCE 內非常簡單，插入卡片後，在元素使用表內找到卡片並點選調整元素，將 X 中心點往左拉到 0%

當然你也可以使用 CSS 或是 JS 來設定元素的中心點

#c_1739618909084 {
      transform-origin: 0% 50%;
}

$('#c_1739618909084').css('transformOrigin', '0% 50%');

//或是使用 GSAP 的 set 方法

gsap.set('#c_1739618909084', {
       transformOrigin: '0% 50%'
    });

當卡片的 top 到達視窗的 top 時，第一段動畫就算是完成了，接著我們要暫停視窗的滾動，並讓文字隨著滾輪滑動出現，首先將文字部分 id 命名為 c_body

//先將#c_body元素隱藏起來
    gsap.set('#c_body', {
        visibility: 'hidden'
    });

    gsap.from('#c_body', {
        y: '-110%', //初始位置為上方-110%
        scrollTrigger: {
            trigger: '#c_1739618909084', //設定觸發元素是卡片上的圖片
            start: 'top top', //當圖片 top 與視窗 top 交會時觸發
            scrub: true, //由滾輪來控制動畫
            pin: true, //暫停視窗滾動直到動畫完成
            //markers: true,
            onEnter: function() {
                //當觸發時，將#_body元素設定為可見
                $('#c_body').css('visibility', 'visible');
            },
            onLeaveBack: function() {
                //當視窗往上滾動時將#_body元素設定為不可見
                $('#c_body').css('visibility', 'hidden');
            }
        }
    })

為什麼要將文字先隱藏起來呢，因為在手機上，文字的高度超過了圖片，如果不先隱藏起來，就會像下面這樣～穿幫了...😂

這裡我們仍然使用 c_1739618909084 當作觸發器，增加一個 onEnter 事件，就是當圖片碰到視窗的 top 時，就將 c_body 設置為可見（因為這時候他已經在視窗外），然後用 from 的方法讓他回到圖片的下方，pin 設置為 true 就可以暫停視窗的滾動，直到 c_body 完成動畫後視窗才能繼續滾動，可以做出好看的延遲效果～
最後我們增加一個 onLeaveBack 事件，視窗回滾的時候將 c_body 隱藏起來，就大功告成了～

一個在五濁亂世中
不願靠話術生存的工程師
Eric Chen

GSAP入門

要學就學最強的～

系統本身已經有載入 GSAP 的相關檔案，所以不管在區塊、頁面、或是部落格文章，你都可以輕鬆地寫出想要的動畫效果，網路上有許多 GSAP 的教學，但有些地方對初學者不太友善，如果找到的教學比較偏向某種特定效果的話，可能會看得霧煞煞，簡單來講先掌握 GSAP 的三種基本方法，你就可以做出不錯的動畫～

首先在建立新的部落格或是頁面，進入原始碼後，按下方的＋JS 按鈕，為這個頁面建立一個JS文件(不用打副檔名)

建立 JS 文件後 Tiny 會直接開啟這個 JS 文件來你編輯，輸入 ready 後按 TAB 鍵，編輯器會自動生成一段 jQuery 的原始碼，如下

jQuery(document).ready(function($) {
    //元素載入後做什麼事寫在這裡～
});

接著讓我們建立要用於動畫的元素，這裡我使用一張可愛蜘蛛人的 png 圖片，進入原始碼為我們的圖片加上 id 與 class 屬性。

<img id="spider1" class="spider" src="/images/spman.png" alt="蜘蛛人">

元素有了 id 之後，我們就可以用 GSAP 來針對這個 id 做動畫，GSAP 有三種動畫處理模式，分別是To, From, 以及 FromTo，讓我們一種一種來看～

To

希望目標從目前位置移動到何處

我希望蜘蛛人從他目前的位置，往右移動到他付物件100%的位置，一邊移動一邊慢慢消失，整個移動過程設定為2秒鐘

jQuery(document).ready(function($) {
    gsap.to('#spider1', {
        x: '100%',   //沿著x軸往右移動
        opacity: 0,  //到達移動地點後，透明度為 0
        duration: 2, //移動時間為 2 秒
        repeat: -1   //一直重複這段動畫
    })
});

儲存檔案後開新視窗看看～如果像上面一樣動起來了，恭喜你～完成了第一個動畫～
現在讓我們使用同一張圖片，但使用 From 來做動畫

From

希望目標從什麼位置回到目前的位置

我希望蜘蛛人從他左邊 -100% 的位置，回到他目前的位置，然後透明度從 0 恢復到原本的 1，整個移動過程設定為2秒鐘

jQuery(document).ready(function($) {
    gsap.from('#spider1', {
        x: '-100%',   //沿著x軸往右移動
        opacity: 0,  //到達移動地點後，透明度為 0
        duration: 2, //移動時間為 2 秒
        repeat: -1   //一直重複這段動畫
    })
});

看出 from 跟 to 的差異了嗎～？ to 就是從目前的狀態到另一種狀態，from 則是從另一種狀態回到目前狀態，知道這兩種模式後 FromTo 就很好理解了，就是從一種狀態到另一種狀態，而兩種狀態都不是目前的狀態，蜘蛛人目前的位置是在中間，但我希望的動畫是，他從左邊出來，一直移動到右邊，這時我們就可以用 FromTo 做這段動畫

fromTo

目前狀態不適合 to 或是 from 時，就使用 fromTo

我希望蜘蛛人從左邊出現，然後移動到右邊，整個移動過程花費4秒

jQuery(document).ready(function($) {
    gsap.fromTo('#spider1',  {
       x: '-100%',   //第一種狀態在左邊的位置
       opacity: 0    //第一種狀態的透明度
     },{
        x: '100%',   //沿著x軸往右移動
        opacity: 1,  //到達移動地點後，透明度為 1
        duration: 4, //移動時間為 4 秒
        repeat: -1   //一直重複這段動畫
    })
});

看到這裡你可能會有個疑問，我們如果一開始就把圖片放在最左邊或是最右邊，就可以單獨使用 from 或是 to 來完成動畫，那為什麼還要有 fromTo 呢～？
這是為了保持版面的完整性，原本的版面設計圖片放在中間很好看，但為了動畫將他放到右邊，用戶若是不允許執行 JavaScript, 或是用戶手機/電腦效能太低落，動畫被延遲了，導致圖片沒有跑回中間或是沒有出現～這樣對版面就造成了破壞～

滑順的重複動畫

讓一直重複的動畫產生倒放的滑順效果

上面那一段動畫在結束的時候會回到起始的位置再來一次，看起來就有些顛簸，我們希望動畫成為一個閉環，只要加上一個 yoyo 參數就行了

jQuery(document).ready(function($) {
    gsap.fromTo('#spider1',  {
       x: '-100%',   //第一種狀態在左邊的位置
       opacity: 0    //第一種狀態的透明度
     },{
        x: '100%',   //沿著x軸往右移動
        opacity: 1,  //到達移動地點後，透明度為 1
        duration: 4, //移動時間為 2 秒
        repeat: -1,  //一直重複這段動畫
        yoyo: true   //產生絲滑的倒放效果
    })
});

動畫的靈魂設定～ease

讓你的動畫看起來生動自然，展現GSAP的強悍

ease 設定可以讓你的動畫更加生動，這也是 GSAP 強悍的地方，關於 ease 的各種設定請參考此處，這裡我使用效果性較強的 bounce.out 來做範例，你可以透過參數調整來決定想要的強度

gsap.fromTo('#spider1', {
        x: '-100%', //第一種狀態在左邊的位置
        opacity: 0, //第一種狀態的透明度
        rotate: -45, //第一種狀態呈現-45度

    }, {
        x: '100%', //沿著x軸往右移動
        opacity: 1, //到達移動地點後，透明度為 1
        duration: 4, //移動時間為 2 秒
        repeat: -1, //一直重複這段動畫
        ease: 'bounce.out', //彈跳效果
        rotate: 45, //第二種狀態轉45度
        yoyo: true  //產生絲滑的倒放效果
    })

根據 GSAP 官方的建議，將動畫放入 function 內是比較好的做法，也方便後續的調用，所以我們寫一個 play_animation 的 function，並將我們的動畫放入這個 function 內，並在 Document Ready 事件發生時播放動畫

jQuery(document).ready(function($) {
    play_animation();
});

function play_animate(){
    gsap.fromTo('#spider1', {
        x: '-100%', //第一種狀態在左邊的位置
        rotate: -45,//第一種狀態我左旋轉45度
        opacity: 0 //第一種狀態的透明度
    }, {
        x: '100%', //沿著x軸往右移動
        opacity: 1, //到達移動地點後，透明度為 1
        rotate: 45,//往右旋轉45度
        duration: 4, //移動時間為 2 秒
        repeat: -1, //一直重複這段動畫
        ease: 'bounce.out', //彈跳效果
        yoyo: true
    })
}

TinyMCE 的內容是在 iFrame 元素內，所以我們無法直接在編輯器內看到動畫，因為 GSAP 無法穿透 iFrame 找到 #spider1 元素，如果想要在編輯器內看到動畫，就必須對 play_animate() 函數做一些加工

function play_animate(){

   let body = $('body');  //建立一個變數並指向目前HTML的body元素

  //檢查是否在編輯模式下
   if ($('#tine').length > 0) {
        body = tinymce.activeEditor.getBody(); //在編輯模式下，將 body 變數指向編輯器內的 body
    }

   let spider1  = $('#spider1, body); //定義一個變數 spider 並指向 body 內的 #spider1

    gsap.fromTo(spider1, { //將變數放入gsap
        x: '-100%', //第一種狀態在左邊的位置
        rotate: -45,//第一種狀態我左旋轉45度
        opacity: 0 //第一種狀態的透明度
    }, {
        x: '100%', //沿著x軸往右移動
        opacity: 1, //到達移動地點後，透明度為 1
        rotate: 45,//往右旋轉45度
        duration: 4, //移動時間為 2 秒
        repeat: -1, //一直重複這段動畫
        ease: 'bounce.out', //彈跳效果
        yoyo: true
    })

}

經過這段修改後，你就能在編輯器內看到動畫效果，同時也不影響儲存為正常網頁的結果，要注意的是當你進入原始碼視窗又離開後，動畫會被停止，你可以從 console 內執行 play_animation 函數

最後～讓我們養成一個好習慣，為我們的動畫元素做好 CSS 優化的設定，進入原始碼視窗，點選＋CSS, 輸入檔案名稱後編輯器就會打開一份新的 CSS 文件，在這份文件內貼上

.spider { 
      will-change: opacity, left;
 }

這段 CSS 告訴瀏覽器，擁有 spider 類別的元素，其透明度以及左邊的位置將會發生改變，請在這些元素上給予更好的效能喔～
以這個頁面來說，總共有5個小蜘蛛人，id 分別是 spider1 - spider5，但這5個蜘蛛人都有共同的類別 spider, 所以在 CSS 內我們只需要打上 .spider 就行。

以上是 GSAP 的基本使用方式，更多的資訊請參考 GSAP 文件，以後在頁面上想做些小巧的動畫～就不需要再去找CSS, 或是 JS 庫來使用了～當然 GSAP 的強大遠不止於此，許多網頁特效甚至遊戲都是利用 GSAP 開發的喔，之後我會再寫一篇 GSAP ScrollTrigger 的介紹（配合滑鼠滾輪或手機滑動的動畫效果）

一個在五濁亂世中
不願靠話術生存的工程師
Eric Chen

TinyMCE 編輯器介紹

即使不會寫程式，也能輕鬆做出想要的頁面

終於～TinyMCE Editor 的改造吿一段落了，這裡將我所修改的地方列出來，如果大家覺得有什麼不足之處可以再跟我說～
為什麼要重新弄一個編輯器呢，因為之前的雖說是小巧玲瓏，但實在也沒什麼亮點，尤其是他沒有做環境隔離，像是～貼一段爆炸動畫的程式碼，結果～後台就爆了～

所以這次決心要弄一個好用的線上編輯器，也就是現在的 Tiny 啦～我改造了不少地方先列出來，如果大家覺得有不足之處再跟我說～

01. Source Code 編輯

Tiny 內建的原始碼編輯實在太陽春，所以二話不說就把之前寫的 ACE 拿進來用，直接支援Emmet，並且將 fontawsome 整合到他的 Auto Complete 內(用了很Dirty的方法才讓他能顯示圖形），至於他的一些細部設定可以透過 Cmd + , 打開面板去設定，ACE 我就不多講了，畢竟是工程師的玩具，不是同一掛的會感覺無聊～

02. ICON插入

當然也要照顧到不寫程式的老闆們，所以在 Tiny 下我也加上了直接插入 ICON 的介面，只要打上字母搜尋，點選顏色與尺寸，就能將 ICON 插入到內容中

03. 插入設計元素

Tiny 用 iframe 將編輯環境與真實環境做了很好的隔離，不用怕 CSS 或是 JS 會影響到現實環境，所以我就將一些常用元素放進來，內容要比之前的區塊編輯器更加豐富，當然也更加好用，只要在空白處按下右鍵就可以插入這些元素，你只要更換圖片及修改文字內容即可～具體內容請參考上一篇介紹

04. 設定為商品連結

在任何圖片、影片、文字上按下右鍵選擇-設定為商品連結，即可直接開啟商品資訊或者加入購物車～

05. 元素使用表

由於 HTML 的特性，使用文字編輯的方式，某些地方一定會難以操作，最常見的就是標籤沒清乾淨，導致後面整個大跑版，所以我加上了這個元素使用表，你可以在表上進行刪除、重新排序，或是單獨開啟元素的原始碼。

06. CSS結構表

大部分初學者單看 HTML 會覺得還蠻好理解，反正除了一些歷史共業的 Tag 外，就是成雙成對的概念，但加上了 CSS，事情就開始變得不單純了，要想迅速知道一份 HTML/CSS 的結構，用 Chrome 的工作管理員是最快，相對也是最複雜的，現在許多網站都使用前端框架，DIV 好像不用錢似的拼命用，讓 HTML 的深度越來越恐怖，我在 Tiny 上做的 HTML/CSS 結構相對來說很單純，在你想要參照的元素上點右鍵，他就會列出你所點選的元素以及他所有的直系物件，一直到 BODY 標籤，此外也會列出相關的 CSS 屬性給你參考，如果你本身已經會用 Chrome 的 Console, 那麼可以忽略此功能～

這張表另一個主要功能就是用來清除元素，如果只用鍵盤滑鼠，你可能只能清除掉最末端的文字或圖片，透過這個列表你可以判斷應該要清除哪一個元素。

07. 專屬及全域的外部 CSS/JS

現在你可以自由地增加外部連結的 CSS/JS 檔案，當你進入文件編輯後，所導入的 CSS/JS 就屬於專屬專屬連結，只會做用在你目前的文件上，如果從後台的文章管理及頁面管理設定連結的話，就屬於全域連結，會做用在所有的文章或自訂頁面上。

兩者有很大的不同，舉例來說～當你看到一個有趣的特效，需要加入某個 CDN 連結，那麼使用專屬連結即可，因為只有一個頁面需要它～
當你每次打字的時候都覺得字體過大或太小，又或者行距間距不滿意，就可以寫一個 CSS 來定義你想要樣式，並將它加到全域連結內，那就一勞永逸的解決這個問題～

08. 將專欄顯示於首頁

現在你可以任意選擇要讓哪些專欄顯示在首頁上，通常商品的變化如果不大，很容易讓人覺得網站沒有在更新，但就沒那麼多變化怎辦～？
所以將你所寫的專欄放到首頁上是不錯的選擇，寫商品相關是必要的，但也不用太拘泥於所謂官網形象，發揮個人特色，把你被劈腿的慘痛經驗寫上去，也是不錯的選擇～

08. 加入 transForm 操作

transForm 是個神奇的東西，高手用它做特效，菜鳥用它補坑洞，怎麼說呢～如果你今天準備要給客戶做 Demo, 卻發現有幾段字怎樣都喬不好，凸起的那個頭破壞了整個版型，已經沒時間讓你慢慢分析CSS(或者你根本不想虐待自己的話），就是 transForm 上場的好時機了，我以前初學CSS時常幹這種事～

我將transForm常用到的像移動，旋轉縮放等屬性都集結起來，透過滑鼠就可以完成，你可以任意地加上 transForm 的效果讓版面更活潑～

Software

This is the card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Software

This is the card title

View project

Software

This is the card title

View project

以上是這次修改的大項，我另外會錄一支影片來實地操作一遍，相信這個工具會讓你更輕鬆地經營自己的網站～

一個在五濁亂世中
不願靠話術生存的工程師
Eric Chen

AI 電腦出世

另一個你，或許即將誕生

歷史總是驚人的相似，在線上AI服務如雨後春筍般冒出的同時，輝達推出了Project DIGITS，就好像上個世紀80年代，IBM還執著於超級電腦的美夢時，微軟悄悄地把電腦送入每個家庭，然後全世界進入了PC時代，直到後來由Google引領的雲端服務，將重心轉移至手機上(從這個角度來看，微軟徹底被邊緣)，現在～歷史又要重演了嗎～？

AI電腦來勢洶洶，你的一切都將成為他的參數～

相對性的永生

對你的家人而言，你仍然存在，但不會太久

現代人或許還會記得爺爺奶奶，外公外婆，再往上～就是陌生人了，AI 電腦將會記錄你的外表、動作特徵、思考方式、說話、寫作風格等等一切關於你的細節，從而生成另一個你，你將可以與自己對話（才發現自己原來這麼討人厭～🤣）

你可以想像，家人為你舉辦葬禮時～會帶著那個你一起參加～然後下午帶你去吃麥當勞，聽七十歲的你罵著不要吃這種垃圾食物，或是三十歲的你想嘗試新口味的炸雞，對於你的家人朋友而言，你依然存在～甚至，你在自己葬禮上還能認識新朋友

一直到這世上再也沒有人需要你的陪伴～才算真正的離去（如果你做人失敗，死掉～也就死掉了），這種類型的永生只對其他人有意義，跟現在拿著手機的你～沒半點毛關係～

AI 電腦 vs AI 服務

一個人人用，一個只為你服務

如果你的主業是賣雞排，那麼很大機率～你對半導體製程的相關知識不會感興趣，也就是說你的 AI 電腦可以不具備這方面的知識，但線上的 AI 服務卻不行，他要應付的是全人類。

那AI電腦具體能幹嘛～？
既然是專為你服務，就不會像線上AI服務一樣，你問他才回答，他或許會主動與你交談或者自動為你做某些決策，
例如～早安雞盪先生～
您女友的生日禮物已依照您的預算及她的興趣選購完成（看到禮物掉眼淚的機率為33.36%)，
此外根據近日交通狀況，我已通知Uber提早二十分鐘來接您～

你的一切資訊都會成為AI的參數，這是目前線上服務辦不到的，相較於應付全人類，只針對你及你身邊的人，AI 電腦的參數量可以說～綽綽有餘，別忘了AI電腦還能上網去學習～你可能有興趣的事物。

既然都寫到這裡了，不妨再散發一下思維，假設擁有你大量參數的 AI 電腦，在你死後仍持續運作(不再有新的參數，因為你已經死了），那麼他就會做你平常在做的事，例如～你平常喜歡寫寫小說打發時間～
那麼有趣的事可能就出現了～你死後成為出名的小說家，成名作死後才寫出來的～

或許有一天你會聽到小孩對父母說～你不好好學習，死後怎麼出人頭地啊～

一個在五濁亂世中
不願靠話術生存的工程師
Eric Chen

新的編輯器組件

TinyMCE是一款很強大的編輯器喔～

新的編輯器TinyMCE即將登場

有感於SlimWeb後台內原本的編輯器功能不是很足，所以將會用網路上很知名的 TinyMCE 編輯器來取代，主要用於專欄與區塊，目前已將區塊編輯器內的一些模組轉移到這個編輯器下面使用，下面的這些區塊都是在編輯器上～一鍵產生的。

我目前寫專欄也都使用這個編輯器，哪邊感覺不順手就改一改，TinyMCE是很棒的編輯器模組，主要是可以針對需要做功能的深化，希望以後用戶也能用得順心～～
當然我也會做教學影片～

My adventure

Photography

Every dog has his day SlimWeb
&
SlimGPT — Strike while the iron is hot —