不懂HTML, CSS語法也能在JSFiddle創建Matters文章索引

前言

JSFiddle 這個平台可以用來展示 JavaScript, HTML或是CSS樣式,而Matters可以透過JSFiddle 產生出來的成品呈現出內嵌頁面的效果。
我參考了前輩的 教學文章,便用 HTML 語法編寫出了自己 Matters 帳號的文章列表內嵌畫面。

但我想,可能還是有人不懂 HTML 語法,所以在今天的文章裡便要介紹另外一個簡單的方式。
只要會用 word 編輯文件並插入網頁超連結,就可以不需要學 HTML、CSS 語法,簡單利用 JSFiddle 來完成自己的 Matters 文章索引。


操作步驟如下

【內容目錄】
Step 1. 利用Word檔編輯自己的文章目錄,並做好文章超連結
Step 2. 將編輯後的檔案另存為HTML格式
Step 3. 檢視HTML檔案的原始碼
Step 4. 將原始碼貼入 JSFiddle 網站並儲存,得到客制化網址
Step 5. 將 JSFiddle 客製化網址貼入Matters文章中
1. 點選<>這個符號
2. 貼上 Step 4 中得到的 客制化網址,按Enter
3. 在反灰的地方按滑鼠右鍵選擇【檢查】


Step 6. 找尋最後的網址,加入result/,大功告成!
1. 進入檢查畫面
2. Ctrl+F=> 出現搜尋框
3. 輸入 “ifram"
4. double click網址
5. 加入 “result/"
6. 大功告成!

Step 1. 利用Word檔編輯自己的文章目錄,並做好文章超連結

對,我公司還在使用古早的Office 2003 (大笑),大家一起來懷舊一下吧

Step 2. 將編輯後的檔案另存為HTML格式

Office 2003 版本選擇儲存為 “單一檔案網頁",其它版本有不同的選項,可以自行嘗試一下

Step 3. 檢視HTML檔案的原始碼

1. 找到剛剛存下來的檔案,滑鼠按右鍵選擇用 “瀏覽器程式" 來開啟
(對,這邊又要帶領大家回味復古的IE)

其實用Edge, google chrome都可以
用流覽器開啟的畫面

2. 在瀏覽器視窗上面按右鍵選擇【檢視原始碼】

3. 全選 原始碼 並複製

Step 4. 將原始碼貼入 JSFiddle 網站並儲存

https://jsfiddle.net/

繼續點擊Save即可

【回到頁首目錄】

Step 5. 將 JSFiddle 客製化網址貼入Matters文章中

1. 點選<>這個符號

2. 貼上 Step 4 中得到的 客制化網址,按Enter,便會出現這個畫面

3. 在反灰的地方按滑鼠右鍵選擇【檢查】

【回到頁首目錄】

Step 6. 找尋最後的網址,加入 result/,大功告成!

1. 檢查的畫面

2. 同時按鍵盤 【Ctrl】鍵+【F】鍵,即可以出現【搜索框】

3. 輸入 ifram

4.從上圖黃底的搜尋結果往下滾動 一些 找到另外一個網址
=> 這個網址與Step 4得到的客制化網址是一樣的,但後面多了embedded

5. 在上圖框列出來的網址上 “連點兩下滑鼠左鍵",即可在網址後面加入 result/

在網址上雙點擊滑鼠左鍵,網址便會反白
在網址末端加上 “result/"

【回到頁首目錄】

結語:

之前我沒有使用過 JSFiddle, 來到 Matters才知道這個平台工具。
如果原本就非常熟悉 HTML 語法的人應該會覺得我上述截圖也太囉嗦了(大笑),但我就是想帶大家回味古早的 Word 2003 跟 IE (繼續大笑)。
但其實用其他的 office 版本及不同的瀏覽器都可以得到 HTML 原始碼,進而轉呈在Matters 文章內!

如果自己原本就有熟手的 HTML 編輯器,當然就不要使用 Office 來編輯啦,不然會被埋入一堆 Office 表頭,頁寬等不必要的數據。
直接用
<H1
<H2
<H3
做不同段落的大中小標題,及內文的編輯即可。

然後說到這,大家也有發現我完全忽略了CSS了,對吧?
因為…. 不調整CSS就可以做完了,(只是不美觀) 我就不想再多做步驟了。

如有錯誤或是要交流的,也歡迎留言給我!!

【回到頁首目錄】

如果你喜歡這篇文章,請花幾秒鐘的時間用 FB 或是Gmail帳號登入 “按讚公民” ,並按五次左鍵便可以給予我實質的回饋,而且你不用花錢喔!
你的按讚是對我的創作最大的支持了。感謝!
請放心,你不會因此而有所損失!
Hi,你好,我是【漫閱讀】的站長,小蔓。歡迎來到我的閱讀天地!
在這裡你可以找到各種題材的閱讀心得。
想要買書不踩雷,或是收集更多好書,也歡迎訂閱我的電子報。
請放心,小蔓也不喜歡垃圾信件,所以信件並不會太過頻繁擾人。如果你發現文章不符合你的需求,你也可以隨時利用信件中的“取消訂閱”選擇退出。

最新文章

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

用 WordPress.com 建立自己的網站
立即開始使用
%d 位部落客按了讚: