« 上一篇 | 下一篇»

如何把Weebly上的網頁拿到自己的網站

03 十二月, 2013 03:18 •  (4) 迴響  •  引用(0)  •  19200 hit.  • 分類: 學校網路 , 網路資源 , weebly   

一年多前寫過這篇文章「在學校Google 帳號使用 Weebly 服務」,裡面提到可以把 weebly 的網頁內容搬到學校網站(文章最後面)。

那個方式是要修改 DNS 的設定,讓原本在 weebly 的網址改用成學校網址。用這方式,雖然網址是學校的,但網頁上的內容其實還是在 weebly 上面。若是遇到 weebly 關站,或是連線不穩,就可能看不到資料了!畢竟東西放在別人家裡,感覺不踏實。

Weebly 有個功能,可以把在 weebly 上做好的網站,打包成 .zip 檔,下載回來。但有老師問到,怎麼放到學校網站後,投影片秀(slideshow)的圖片通通看不到了?

這篇來說明一下如何解決這問題!

【方法一:獨立網址】

之前做的這個網站「臺中市華龍國小50週年校慶網」,現在裡面的內容全部是放在學校網站裡,他的 slideshow 也是正常可觀看的。

上面兩個網址都是獨立網址(一級網址?)所以只要把 zip 打包下載,放到學校網站,設定好虛擬目錄,設定好 DNS ,什麼都不用改,就完成了。

 

【方法二:把 weebly 放在網站根目錄下】

上面的方式,可能有人覺得不方便(還要設定一些東東),想把 weebly放在網站根目錄下(就是把 weebly 放在網站的子資料夾裡)。

例如這個剛剛弄的測試網站:

《步驟一》打包、下載檔案

image

 

《步驟二》解壓縮,檢視網頁

image

如上,看不到照片。其實這就是網頁裡圖片路徑錯誤的關係,所以看不到圖片。

所以改改網頁原始碼的路徑,就可以解決了!(原來這麼簡單??)

 

《步驟三》看看 index.html

檢查看看網頁目錄裡的首頁檔 index.html , 根本看不到有關於圖片原始碼的相關 html 碼 (img src="......"),不能改呀!

因為這網頁是 slideshow 效果,網頁裡有這一段

<script type='text/javascript' src='http://cdn1.editmysite.com/editor/libraries/slideshow-jq.js?buildTime=1385768164'></script>

上面的 slideshow-jq.js 就是記錄網頁照片路徑的檔案,但這檔案在別人家,我又不能修改。

 

《步驟四》下載修改 slideshow-jq.js 這檔案

1. 把上面 slideshow-jq.js 檔案下載,儲存在 weebly 的目錄下

image

 

2. 用文字編輯器打開我們已經把,搜尋、找到 uploads (照片都放在這裡)

function thumbnailURL(photo) {
    var url = photo.url;
    if (!url.match("/weebly/images/")) {
        url = '/uploads/' + url.replace(/^\/uploads\//, '');
    }
    return url;
}


function largeURL(photo) {
    var url = photo.url;
    if (!url.match("/weebly/images/")) {
        url = '/uploads/' + url.replace(/^\/uploads\//, '');
        if (photo.thumbnail !== false) {
            url = url.replace(/^(.*)\.([^\.]+)$/, "$1_orig.$2");
        }
    }
    return url;
}

把上面紅字的部分「/uploads」,去掉 /

改成 「uploads

存檔!

 

《步驟五》修改 index.html

剛剛有看過 index.html 這檔案,裡面有這一段

<script type='text/javascript' src='http://cdn1.editmysite.com/editor/libraries/slideshow-jq.js?buildTime=1385768164'></script>


因為我們已經把slideshow-jq.js 這檔案下載、修改好了,所以要把上面的路徑改一下,變成

<script type='text/javascript' src='slideshow-jq.js'></script>

存檔,完成修改了。

 

《步驟六》檢視

在本機端檢視看看,應該就可以正常檢視了。

image

 

完成!

創用 CC 授權條款
 
 
Related Posts Plugin for WordPress, Blogger...

4 Comments on "如何把Weebly上的網頁拿到自己的網站"

 

  1. 請問如何把 weebly 上做好的網站,打包下來呢?

       作者       [管理]

    請問如何把 weebly 上做好的網站,打包成 .zip 檔呢?現在好像已經不是以前這樣的功能耶 只好付費嗎?

  2.  

  3. weebly打包問題

       作者 annie       [管理]

    請問如何下載修改 slideshow-jq.js 這檔案??

    上面文章有寫啊!

    「《步驟四》下載修改 slideshow-jq.js 這檔案」

    用 Chrome 的話就是「另存網頁為」

    剛試用 IE10 ,把那 .js 檔案的網址貼到 IE 的網址列,就可以直接下載了!

  4.  

  5. thx~

       作者 D       [管理]

    圖片路徑這問題讓我頭大了一、兩天
    我有找出問題所在,也知道要從他js上的這段code作修改
    只是無奈我沒學過java和任何程式語言
    不曉得怎麼修改... 

    碰巧用code裡面幾段關鍵字google搜尋來到你的網站教學
    十分感謝!! 

  6.  

  7. 謝謝阿欣老師

       作者 婷兒       [管理]

    老師好

    我是聽了阿欣老師的課才開始用weebly,覺得真的好用!

    因應校務評鑑,最近想要做一個網站,並且打包回校,這篇文章很受用!打算試試看

  8.  

發表迴響
 authimage

Google+ 迴響

*********