tag:blogger.com,1999:blog-16607461.post1660707747122943088..comments2024-03-22T22:07:20.635+08:00Comments on 布丁布丁吃什麼?: 閒聊Blogger範本程式碼的管理 / How do I maintain Blogger's Template Code布丁布丁吃布丁http://www.blogger.com/profile/13614721642960940190noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-16607461.post-89446913770142040082022-01-09T00:35:12.669+08:002022-01-09T00:35:12.669+08:00To 黑修斯,
我在寫這篇的時候,Blogger的範本管理剛進行大改版。
很多早期用JavaSc...To 黑修斯,<br /><br />我在寫這篇的時候,Blogger的範本管理剛進行大改版。<br />很多早期用JavaScript寫的工具,都變成Blogger範本裡面的內建工具。<br />但由於我一開始是使用早期的Blogger範本來改寫,早期範本程式碼跟現在Blogger的範本程式碼有部分不相容。<br />我現在的Blogger排版只能純靠程式碼維護,不能使用Blogger的範本線上編輯功能。<br />我的Blogger範本編輯功能畫面長這樣子,基本上是不能用的:<br />https://lh3.googleusercontent.com/-5D-_Uxf7naI/Ydm9KNFhXaI/AAAAAAAFFGs/tx71u2hahY8cs9LElu9ijeimRRwPuBfGACNcBGAsYHQ/s1600/DeepinScreenshot_select-area_20220109003413.png<br /><br />儘管如此,我還是覺得對Blogger範本程式碼做版本控制是一個正確的決定。<br />一來是我常常改錯功能,需要仔細debug<br />二來是我有習慣使用的編輯器。Blogger線上編輯乍看之下很方便,但仍然無法滿足程式設計師的需求。<br />因此我也蠻贊成妳這樣做。<br /><br />----<br /><br />話說回來,我這個Blog也是在我大學寫到……剛畢業orz<br />天啊我人生怎麼走這麼慢orz<br />好想寫Blog喔 QAQ布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-87250999992490827622022-01-04T15:48:35.725+08:002022-01-04T15:48:35.725+08:00謝謝布丁大大,從學生開始寫BLOG看您的文章,到我出社會到生了兩個孩子(喂~
最近也想來重新整理自...謝謝布丁大大,從學生開始寫BLOG看您的文章,到我出社會到生了兩個孩子(喂~<br /><br />最近也想來重新整理自己的BLOGGER了~~這篇很實用超讚,網路上不太好找相關BLOGGER資料呢,有關自己CODING的。黑修斯https://www.blogger.com/profile/07059611175496668779noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-1323881904702868022021-12-03T11:36:24.025+08:002021-12-03T11:36:24.025+08:00To 灰 鴿,
這張真的實用,大感謝~To 灰 鴿,<br /><br />這張真的實用,大感謝~布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-90872402218214309222021-12-03T07:18:09.353+08:002021-12-03T07:18:09.353+08:00這份資料比較完整 ~
https://1.bp.blogspot.com/-NYsdvXJyCQ0/...這份資料比較完整 ~<br />https://1.bp.blogspot.com/-NYsdvXJyCQ0/YOA5szkbbVI/AAAAAAABKlg/DszOQnqDYAgxOAGbF080Vxec4vad64CUQCLcBGAsYHQ/s16000/16253.jpg灰 鴿https://www.blogger.com/profile/12113580702245319309noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-587495100948011112021-12-02T12:02:07.698+08:002021-12-02T12:02:07.698+08:00To 灰 鴿,
原來還有「data:view.isMultipleItems」的寫法。
漲知識了,...To 灰 鴿,<br /><br />原來還有「data:view.isMultipleItems」的寫法。<br />漲知識了,感謝。布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-79545401284938374502021-11-30T16:30:44.488+08:002021-11-30T16:30:44.488+08:00最近我將 XML範本 瘦身,4900 行,改剩 2600行,我也來分享一下,CSS 的寫法
<...最近我將 XML範本 瘦身,4900 行,改剩 2600行,我也來分享一下,CSS 的寫法<br /><br /><b:skin><br />全域共用的 CSS<br /></b:skin><br /><br /> <style type='text/css'><br /> <b:if cond='data:view.isMultipleItems'><br /><br />Feed ~ 會用到的 CSS<br /><br /><b:else/><br /><br />item ~ 會用到的 CSS<br /><br /> </b:if> <br /></style> 灰 鴿https://www.blogger.com/profile/12113580702245319309noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-589026510691560832021-02-24T16:13:21.471+08:002021-02-24T16:13:21.471+08:00To 灰鴿,
關於Blogger網頁範本類型,我之前有篇文章有討論過
http://blog.pu...To 灰鴿,<br /><br />關於Blogger網頁範本類型,我之前有篇文章有討論過<br />http://blog.pulipuli.info/2011/06/bloggerpagetype.html#postcatabloggerpagetype.html0_anchor2<br /><br />大致上可以分成4種:<br />- 首頁<br />- 列表<br />- 文章<br />- 靜態網頁<br /><br />你可以參考一下布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-21116426818711767362021-02-24T15:15:59.494+08:002021-02-24T15:15:59.494+08:00最近也 https://pic.pimg.tw/e717/1501149271-3449582351...最近也 https://pic.pimg.tw/e717/1501149271-3449582351.gif 左看、右看 Blogger 也沒啥好玩<br /><br />只好 ~ 來改改範本 --- https://newer-17.blogspot.com <br /><br />最近在改範本,目前、只花現 blogger 只有2種頁面判斷可用,.item-view 和 .feed-view<br /><br />所以、我有一個想法 ~ 在 body 之後 添加一個 div, class= 的名字可以用 blogger 的語法產生,醬、 要判斷現在所在的頁面類型,就更簡單 ...<br /><br /><br />灰 鴿https://www.blogger.com/profile/12113580702245319309noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-83829380276591912322020-04-16T01:24:24.728+08:002020-04-16T01:24:24.728+08:00To 小雨,
感謝分享!To 小雨,<br /><br />感謝分享!布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-67708787883747023612020-04-16T00:14:05.400+08:002020-04-16T00:14:05.400+08:00我也來分享一下我自己的做法
基本上就是利用模板語言的概念來處理的
將整個 template 切割...我也來分享一下我自己的做法<br /><br />基本上就是利用模板語言的概念來處理的<br /><br />將整個 template 切割成好幾塊,例如 主區塊、 CSS 區塊、body區塊、側邊欄區塊……這樣子分<br />然後利用程式碼合併在一起<br /><br />我這邊是使用我自己寫的<a href="https://sourceforge.net/projects/go-text-template-compiler/" rel="nofollow">go-text-template-compiler</a> 來合併,要不是因為 pug 還要另外裝node js (我嫌麻煩,而且我自己早就已經安裝 go 語言了)我其實比較偏好用 pug <br /><br />CSS 則是用 SCSS 來撰寫,在編譯時就會順便壓縮了。<br /><br />整個流程就是在撰寫完畢後,先用 SCSS 編譯 CSS,然後利用 go-text-template-compiler 將所有的區塊模板檔和編譯好的 CSS 合併成一個 xml 檔案,這 xml 就是 blogger 的模板。<br />小雨(あめちゃん)https://www.blogger.com/profile/06758524085092287447noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-80117081261624241612020-04-02T20:32:20.982+08:002020-04-02T20:32:20.982+08:00To Keaton,
因為我這篇不是為了教學,只是為了記錄而寫的。
現在回來看,其實有些想法也不太...To Keaton,<br /><br />因為我這篇不是為了教學,只是為了記錄而寫的。<br />現在回來看,其實有些想法也不太一樣了。<br /><br />有問題都可以發問喔布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-72986610196118740962020-04-02T09:58:42.727+08:002020-04-02T09:58:42.727+08:00版主講解非常的詳盡阿,已經不是閒聊的程度了XD
小弟也會慢慢來認真研究一下相關內容的,非常感謝版主的...版主講解非常的詳盡阿,已經不是閒聊的程度了XD<br />小弟也會慢慢來認真研究一下相關內容的,非常感謝版主的分享Keaton [凱特]https://www.blogger.com/profile/11633461917527423543noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-22359995944001907212020-01-14T11:35:35.042+08:002020-01-14T11:35:35.042+08:00To DoR@cky,
不客氣,有問題也可以在這裡發問喔。To DoR@cky,<br /><br />不客氣,有問題也可以在這裡發問喔。布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-68099593824180293352020-01-14T09:25:41.744+08:002020-01-14T09:25:41.744+08:00超詳細的講解,會來慢慢研究,感謝分享!超詳細的講解,會來慢慢研究,感謝分享!DoR@ckyhttps://www.blogger.com/profile/12112732522337171737noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-6796423012857891202019-08-22T21:06:33.263+08:002019-08-22T21:06:33.263+08:00謝謝布丁 我會去看你推薦的網站!!謝謝布丁 我會去看你推薦的網站!!Wang Henry娛樂數位https://www.blogger.com/profile/07159998208675729269noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-313944552479096742019-08-22T20:56:36.393+08:002019-08-22T20:56:36.393+08:00To Wang Henry娛樂數位,
我都是直接看CSS語法詞典來學
現在有電子網站的w3scho...To Wang Henry娛樂數位,<br /><br />我都是直接看CSS語法詞典來學<br />現在有電子網站的w3schools.com,很方便<br /><br />https://www.w3schools.com/CSS/<br />簡單學一下,加油吧布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-26875967722847967402019-08-21T19:30:38.730+08:002019-08-21T19:30:38.730+08:00謝謝好詳細的回覆我~~ 之前我有買了一本書、但主要還是HTML的語法教學為主。
平台的部分還是希望在...謝謝好詳細的回覆我~~ 之前我有買了一本書、但主要還是HTML的語法教學為主。<br />平台的部分還是希望在BLOGGER上、不然就是WP。<br />所以想學醫些語法然後自己試著改造一下現在的版型。<br /><br />對於BLOGGER的RWD範本,想要學的就是:廣告位置可以自訂、版型簡單美化一下這樣~~<br />這樣有沒有推薦的CSS書籍能夠自學呢?Wang Henry娛樂數位https://www.blogger.com/profile/07159998208675729269noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-60406846875141034822019-08-17T00:05:09.064+08:002019-08-17T00:05:09.064+08:00To Wang Henry娛樂數位,
RWD的確是很困難。
目前Blogger使用者的RWD主要...To Wang Henry娛樂數位,<br /><br />RWD的確是很困難。<br /><br />目前Blogger使用者的RWD主要採用兩種方案:<br />1. 使用官方的RWD的套版:大部分使用者都採用這個方案,採用此方案的人也大多建議不要再去客製化,不然很容易造成官方RWD範本無法正常運作。<br />2. 使用網路上既有的Blogger範本:我是採用這個方案,詳細的經過我在這篇有記錄:<br />http://blog.pulipuli.info/2016/04/talk-about-pulipuli-blogs-new-template.html<br />但就我使用這個方案以來的感想是:這也不是一個好方案<br /><br />如果你想要有RWD的功能,又想要有高度客製化的需求,但又不想要全部都純手動,那我會推薦你的最佳選擇是:使用支援RWD的CSS框架<br /><br />支援RWD的CSS框架最知名的就是Bootstrap<br />https://getbootstrap.com/<br />網路和書本的Bootstrap教學資源相當豐富,有些學校的網頁製作課程也以教授Bootstrap作為主要內容<br />甚至有不少人都以為RWD=Bootstrap<br /><br />如果你找過一些Blogger的RWD範本,你也可以發現很多範本也是用Bootstrap打造而成的。<br /><br />不過我個人並不是很喜歡Bootstrap,因為它的設定還蠻繁瑣的。雖然相較於全部自己打造RWD網站來說,Bootstrap已經幫你省下很多功夫,但它對許多使用者來說,依然相當難以駕馭。<br /><br />我現在主要使用的是另一個CSS框架:Semantic UI<br />https://semantic-ui.com/<br />Semantic UI也是一個發行多年的CSS框架,但是知名度遠不如Bootstrap。<br />Semantic UI的設定很簡單,各種標籤也相當容易理解。我可以用Semantic UI簡單地作出有RWD的現代風格網站。<br /><br />當然,這並不是全然是好事。設定簡單代表很多細節無法靠Semantic UI自己完成,有些手動CSS可能還是難以避免。<br />簡單的另一個問題就是大家都很像。就像是用Bootstrap做出來的網站大家都很「Bootstrap」,用Semantic UI也是如此。<br /><br />除了上述兩者之外,也有比它們更簡單的CSS框架,使用者幾乎不用額外加上其他class,直接就可以使用。也有比它們提供更多細節的框架,幾乎是在用class寫CSS程式碼了。<br />但這些我就沒有深入研究了。<br /><br />上述說的支援RWD的CSS框架只是提供外觀上的工具,它並沒有跟Blogger的程式語法結合。所以如果你要使用這些CSS框架的話,首先你必須要全面理解Blogger原始範本的每一個程式碼的意義。包括頁首、頁尾、文章、側邊欄等等。這樣才能在引入CSS框架後,知道要如何讓這些元素套用CSS框架中的樣式。<br /><br />這並不是一兩句話就可以解決的問題。<br />姑且不論Blogger,如果你有志朝向網頁開發的話,我蠻推薦你學一兩個CSS框架,這對不管開發什麼網站來說都很好用。布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-9849802129036122652019-08-09T20:14:21.992+08:002019-08-09T20:14:21.992+08:00對我來說還是好複雜阿~~~~>< 這篇文章還是對初學者來說很難!
我也很想將我的BLOG...對我來說還是好複雜阿~~~~>< 這篇文章還是對初學者來說很難!<br />我也很想將我的BLOG變成RWD的形態讓讀者更好讀、版面更漂亮。<br />彈幕前BLOGGER官方的版本感覺就只是為了RWD而出的版型、其他功能、排版方面似乎都還是要有能力修改範本的人去作變更...<br />超難OTZ<br /><br />如果想要讓我目前的BLOG能夠轉型成為RWD的模式,是否有怎樣的書籍或教學文可以學呢?<br /><br />PS:我目前的BLOG是看WFU站上的各種教學、以及其他網站的教學組合而成<br /><br />網址https://www.wanghenry.com/<br /><br />另外,不知道從何時開始、BLOGGER的網址會直接顯示頂層網域、而沒有www開頭的子網域@@不知道為何會有這樣的改變Wang Henry娛樂數位https://www.blogger.com/profile/07159998208675729269noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-82992412906556987762019-04-22T13:00:25.584+08:002019-04-22T13:00:25.584+08:00To Wayne Fu,
我對webpack的瞭解也還不夠。實際上,很多webpack使用者都只是...To Wayne Fu,<br /><br />我對webpack的瞭解也還不夠。實際上,很多webpack使用者都只是遵循既有專案的設定來打包程式碼,webpack還有很多問題值得深思。<br /><br />最大的問題是,JavaScript在webpack中是以ECMA的方式在執行,這跟瀏覽器上的執行不太一樣。這個差異主要是全域物件的綁定。在瀏覽器中的全域物件是window,各個JavaScript宣告的函數(function)跟變項(variable)大多都可以直接綁定在window上,這樣就可以在不同的JavaScript中彼此使用、溝通。<br /><br />但是在webpack中,基本上各個JavaScript的函數與變項是各自獨立,需要透過額外的引用或是設計模式,才能讓JavaScript程式使用另一個檔案裡面宣告的函數。<br /><br />換句話說,有些在網頁上執行得好好的JavaScript,可能會在webpack打包時出現錯誤。在使用babel轉換JavaScript寫法的時候,特別容易出現這樣的錯誤。反之,能夠在webpack裡面打包的JavaScript程式碼,有些也已經不能在瀏覽器裡面直接執行。<br /><br />雖然都是以JavaScript語言撰寫,但是在網頁上直接執行,以及給webpack編譯的程式碼,這兩者之間已經有所不同。webpack遵循的是標準的ECMAScript,而大多瀏覽器並未實作大多標準裡面的功能。因此webpack的使用者多是認爲總有一天瀏覽器會支援完整的ECMAScript,我們還是繼續堅持標準,在這之前就先用webpack轉換、打包就好。這樣的想法就見仁見智了。<br /><br />種高度模組化的方式,能夠避免不同程式之間因爲變數名稱重疊而相互污染。這在C++、Java這種傳統的程式語言中很常見,但是對於像我們這種主要開發給瀏覽器執行的網頁程式來說,要適應得花一些功夫。<br /><br />還有一個問題是webpack的引用太過好用,我不是很確定這樣層疊引用、重複引用,或是引用Node.js裡面的既有套件,會不會讓最後打包的檔案大小急速膨脹。<br /><br />https://hackernoon.com/optimising-your-application-bundle-size-with-webpack-e85b00bab579<br />這篇有提到webpack很多細部調整的方式,不過這也是早期的webpack,現在有些功能是直接整合了。每個版本的webpack設定上都不太一樣,這也是webpack難以掌控的原因之一。<br /><br />雖然我自己使用webpack讓程式碼的管理變得十分輕鬆,不過這個方法要怎麽使用,還需要更多的時間考驗。<br />布丁布丁吃布丁https://www.blogger.com/profile/18000418899714977849noreply@blogger.comtag:blogger.com,1999:blog-16607461.post-28846609558381227032019-04-17T21:06:09.685+08:002019-04-17T21:06:09.685+08:00感謝布丁詳盡的心得,我也一直為 js/css 等等的管理感到頭痛,有了這篇介紹,大致可以了解 Net...感謝布丁詳盡的心得,我也一直為 js/css 等等的管理感到頭痛,有了這篇介紹,大致可以了解 NetBeans Webpack 這些工具的運作,有時間要來好好研究這些工具 :DWayne Fuhttps://www.blogger.com/profile/12708224105348267539noreply@blogger.com