記錄了自定義博客園的過程。 js框架學習了這位博主分享的主題中的交互代碼,包括頁面標題設置,回到頂部和評論區頭像載入。 "Silence 專註於閱讀的博客園主題" 在此表示感謝。 佈局和樣式定義 禁用了原本的標題欄和導航欄,在頁首自定義html中自己寫了標題欄和導航欄。導航欄中的關於我的頁面還沒寫, ...
記錄了自定義博客園的過程。
js框架學習了這位博主分享的主題中的交互代碼,包括頁面標題設置,回到頂部和評論區頭像載入。Silence - 專註於閱讀的博客園主題 在此表示感謝。
佈局和樣式定義
禁用了原本的標題欄和導航欄,在頁首自定義html中自己寫了標題欄和導航欄。導航欄中的關於我的頁面還沒寫,打算直接寫markdown文件上傳到文章中弄個鏈接過去。
寫了個主頁信息展示,在js中控制只在主頁時載入。這裡有一個問題就是主頁信息部分最後載入,頁面會跳一下。直接將這部分代碼寫在html中的話又可能會導致每個頁面都會載入這部分代碼,比較費時,並且在js中控制它隱藏的話又會導致頁面跳一下。這個問題還沒有解決。
將側邊欄的公告部分隱藏(CSS中除了display:none以外,可以隱藏頁面元素的幾種方法)只顯示加關註的鏈接,並設置其定位(CSS中的絕對定位(absolute)誤區)居中(【CSS】absolute 元素完全居中的兩種方法),做成按鈕。關註按鈕的樣式學習了這個網頁The Barber Theme,是Jekyll的一個theme demo。
列表界面的發佈信息上邊框長度隨文字長度變化:CSS float和position屬性
標簽顯示界面表格一行4個只顯示3個不曉得怎麼回事,為了看起來不明顯直接將表格居中了(table表格整體居中和table表格中各行各列內容居中)
首頁的圖標和回到頂部的圖標都來自於easyicon,為了實現關註圖標的點擊事件,我js怎麼都寫不對,就用了一個投機取巧的辦法,點擊關註圖標後直接觸發頁尾的關註事件(jq實現點擊按鈕觸發另一個按鈕的點擊事件)。提示文字應當有關註和取消關註兩種,這裡想通過讀取頁尾關註鏈接的文本來設置提示文字的狀態,但是讀取的html文本顯示未定義,調試後發現是未載入,不了了之了,還沒找到解決辦法。
回到頂部按鈕背景設置透明(CSS背景透明文字不透明或者子節點不透明)
我的字體 "Lucida Sans Unicode", "Lucida Grande", sans-serif
常用到的工具或教程網站
less中文文檔 LESS相當於CSS的預處理語言
css樣式素材:100素材網
踏得網,可以線上運行css和js代碼:懸浮時變模糊的按鈕
待完成
- 設置Title上的圖標:標簽頁圖標設置
- 主頁png格式的圖標懸浮變色(未成功)純CSS實現任意格式圖標變色的研究
- 主頁加關註圖標提示文字
- 關於我的頁面還沒寫
- 主頁會跳一下
- 博客園首頁的鏈接找個地方加
- 頁尾信息欄高度可能不夠
- 標簽界面table一行只顯示3個
- 簽名部分
還可能會有後續出現的一些bug等待修複。