碼上歡樂
相關內容    簡體    繁體

如何快速獲取一個免費又好看的個人博客網站?看這里!

本文轉載自   查看原文   2020-04-19 02:23   749    博客/ CSS

1 概述

博客這種東西,怎么說呢,多點寫寫吧,總會有好處的.國內有很多這種類似的博客平台,比如CSDN,博客園,掘金,開源中國,SegmentFault,51CTO,簡書等等.還有一些個人博客客戶端,比如Leanote(跨平台,開源,Github目前9.3k,個人免費一個月,有不少主題),還有利用Github Pages搭建博客的客戶端,比如Gridea(免費,一個靜態博客寫作客戶端,Github目前5.3k,主題還算不上很多,搭建教程可以看這篇筆者的文章).
在這里插入圖片描述
在這里插入圖片描述

當然還可以自己從WordPress開始搭建,WordPress是PHP開發的博客平台,非常強大,不過需要自己購買服務器,買域名,買證書,步驟比較繁瑣.
在這里插入圖片描述
好了,說了這么多,好像還沒進入正題.這篇文章主要是教你如何"快速"獲取"免費"+"好看"的個人博客網站.

  • 快速:利用別人已搭建好的框架
  • 免費:不需要買服務器,買域名等等,當然也離不開萬能的Github
  • 好看:利用別人做好的主題,當然你自己可以魔改,emmmm....

這里用的是博客園提供的自定義主題功能的博客,先上圖,這是原博主的博客:在這里插入圖片描述
在這里插入圖片描述
可能靜態圖看的有點單調,那就來幾張gif:
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

2 實現

由於這個大佬已經把主題的代碼開源了,Github這里,所以直接按文檔拿來用就行.

2.1 博客園設置

首先去博客園注冊一個賬號,然后在博客設置里開通js權限:
在這里插入圖片描述
把皮膚改成SimpleMemory:
在這里插入圖片描述
禁用模板默認的CSS:
在這里插入圖片描述
然后開啟選項中的公告:
在這里插入圖片描述

2.2 復制

去github上面復制代碼,切換到最新的標簽,目前是1.2.9:
在這里插入圖片描述
復制src/style下的base.min.css到自己的頁面定制CSS中:
在這里插入圖片描述
在這里插入圖片描述
復制以下代碼到博客側邊欄公告中:

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.2.9', // 版本
        blogUser      : "userName", // 用戶名
        blogAvatar    : "https://xxxx.png", // 用戶頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.2.9/src/script/simpleMemory.min.js"></script>

在這里插入圖片描述
在這里插入圖片描述

2.3 測試

可以打開自己的網站看看了,比如沒修改過任何東西的:
在這里插入圖片描述

3 個性化

好吧,這個才是文章的重點.(以下是文檔的教程,官方文檔可以戳這里)

3.1 基礎信息

在window.cnblogsConfig中:

  • 用戶名:blogUser
  • 用戶頭像:blogAvatar
  • 入園時間:blogStartDate

在這里插入圖片描述

3.2 標簽

  • 失去焦點標簽文字:webpageTitleOnBlur
  • 失去焦點變化延時:webpageTitleOnBlurTimeOut
  • 獲取焦點標簽文字:webpageTitleFocus
  • 獲取焦點變化延時:webpageTitleFocusTimeOut
  • 標簽圖標:webpageIcon

直接在上面的cnblogsConfig中加上即可:

window.cnblogsConfig={
	webpageTitleOnblur: '(oﾟvﾟ)ノ Hi',
	webpageTitleOnblurTimeOut: 500,
	webpageTitleFocus: '(*´∇｀*) 歡迎回來！',
	webpageTitleFocusTimeOut: 1000,	
	webpageIcon: "https://xxxxx.xxxx"
};

3.3 日夜模式

window.cnblogsConfig={
	switchDayNight:
	{
		enable:true,//開啟切換按鈕
		auto:
		{
			enable:true//開啟自動切換
			dayHour:5//日間模式開始時間,整數,24小時制
			nightHout:19//類似上面,夜間
		}
	}
};

3.4 圖標

這個主題用的是Iconfont上的圖標,可以使用自己自定義擴展的圖標,先進入Iconfont,選中自己喜歡的圖標進行收藏,然后沒有項目的話新建項目,有項目的話添加到項目:
在這里插入圖片描述
然后點擊自己的收藏:
在這里插入圖片描述
新建/添加到項目:
在這里插入圖片描述
選中Font class,查看並生成鏈接:
在這里插入圖片描述
在這里插入圖片描述
添加到fontIconExtend即可:

window.cnblogsConfig={
	fontIconExtend:"//at.alicdn.com/t/xxxx.css",
};

3.5 菜單

使用menuCustomList包含:

window.cnblogsConfig={
	menuCustomList:
	{
		"標題":
		{
			"data":
			[
				["name1","url1"],
				["name2","url2"]
			],
		},
		"icon":"Fonticon中的icon名字,需要前一步引入"
	},
};

比如筆者的:
在這里插入圖片描述

menuCustomList:
{
	"知乎":
	{
		"data":
		[
			["氷泠酒","https://www.zhihu.com/people/blue-69-47"],
		],
		"icon":"icon-zhihu"
	},
	"Github":
	{
		"data":
		[
			["bingling","https://github.com/2293736867"]
		],
		"icon":"icon-Github1"
	}
},

菜單導航用menuNavList:

window.cnblogsConfig = {
    menuNavList: [
        ['name1', 'url1'],
        ['name2', 'url2'],
    ],
}

默認在"管理"的下面:
在這里插入圖片描述
背景用:

window.cnblogsConfig = {
    menuUserInfoBgImg: 'https://xxx,jpg',
}

不過好像有點.....
在這里插入圖片描述

3.6 進度條

window.cnblogsConfig = {
    progressBar: {
         color   : '#77b6ff',
    	 height  : '2px',
 	     duration: 0.2,//單位s,是頁面滑動后進度條移動到相應位置的時間,比如頁面從0滑動到50%,進度條花0.2s從0到達50%
    },
}

3.7 Loading

這里是頁面剛進去的圖形旋轉的配置.

loading:
{
    rebound: {//以下兩項控制旋轉速度
        tension: 16,
        friction: 5,
    },
    spinner: {
        id: 'spinner',
        radius: 90,//圖形半徑,控制圖形大小
        sides: 3,//邊數,3是三角形,4是正方形
        depth: 4,//深度,也就是有多少圖形堆疊在一起旋轉
        colors: {
            background: '#f0f0f0',//整個頁面的背景
            stroke: '#272633',//旋轉圖形邊緣顏色
            base: null,//原始位置的顏色,比如如果設成紅色,未開始旋轉的位置對應的有一個紅色的圖形(取決於上面的sides,n邊形),不過看起來效果...
            child: '#272633',//旋轉圖形的顏色
        },
        alwaysForward: true, // false的話會加一點看起來回旋的效果,由於速度太快這個設為true/false看起來差別不大
        restAt: 0.5,         //0.1-0.9,null為完全旋轉
        renderBase: false,//如果上面設置了base的顏色要把這個設為true
    }
}

默認loading:

window.cnblogsConfig = {
    loading: {
         rebound: {
             tension: 16,
         },
         spinner: {
             id: 'spinner',
             radius: 90,
         }
    },
}

3.8 動效

3.8.1 主頁(氣泡效果)

開啟:

window.cnblogsConfig = {
    homeTopAnimationRendered: true,//默認true
}

設置:

window.cnblogsConfig = {
    homeTopAnimation: {
    	radius: 15,//半徑
    	density: 0.2,//密度,越大越密
   	 	color: 'rgba(255,255,255, .2)', // 顏色設置，“random” 為隨機顏色
	    clearOffset: 0.3,//移動到距離頁面底部百分比多少就消除
    },
}

3.8.2 文章頁

開啟:

window.cnblogsConfig = {
    essayTopAnimationRendered: true,
}

設置:

window.cnblogsConfig = {
    essayTopAnimation: {
		  triW : 14,//三角形寬
		  triH : 20,//高
		  neighbours: ["side", "top", "bottom"],//隨機鄰居三角形的位置,三角形豎直放置
		  speedTrailAppear : .1,//路徑出現速度
		  speedTrailDisappear : .1,//路徑消失速度
		  speedTriOpen : 1,//三角形打開的時間,時間快的話打開得很快,慢的話可能沒有完全打開路徑就消失
		  trailMaxLength : 30,//路徑最大長度
		  trailIntervalCreation : 100,//路徑創建的時間間隔,單位ms
		  delayBeforeDisappear : 2,//消失之前延遲2s
		  colorsRandom: false, //是否開啟隨機顏色,其實開啟隨機色的話筆者覺得效果不怎么好(不信可以自己試試...)
		  colors: [
		  //三角形的顏色從這八種顏色中隨機取值,若自定義的顏色不滿八種會使用默認值填滿八種顏色
		  //也可以直接在八種的基礎上增加自己的顏色,建議配合背景設置
		      '#96EDA6', '#5BC6A9',
		      '#38668C', '#374D84',
		      '#BED5CB', '#62ADC6',
		      '#8EE5DE', '#304E7B'
		  ],
	},
}

3.8.3 頁面背景

開啟:

window.cnblogsConfig = {
    bgAnimationRendered: true,
}

設置:

window.cnblogsConfig = {
    backgroundAnimation: {
        colorSaturation: "60%",//顏色飽和度
    	colorBrightness: "50%",//顏色亮度
	    colorAlpha: 0.5,//顏色透明度
	    colorCycleSpeed: 5,//顏色循環速度,慢的話會趨近同一種顏色,快的話有類似彩虹的效果(針對每條絲帶)
	    verticalPosition: "random",//隨機垂直位置
	    horizontalSpeed: 200,//水平移動速度
	    ribbonCount: 3,//"折"的數量
	    strokeSize: 0,//筆觸大小,建議調小,調大的話會有比較明顯的直線痕跡
	    parallaxAmount: -0.2,//這個不清楚
	    animateSections: true//是否斷開,true為斷開
    },
}

3.9 主頁

3.9.1 圖片

圖片:

window.cnblogsConfig = {
    homeTopImg: [
        "https://xxx.png",
        "https://xxx.png"
    ],
}

多張的話每次隨機刷新一張.

3.9.2 標語

window.cnblogsConfig = {
    homeBannerText: "text",
}

默認為空,每次自動獲取,設置了之后會固定顯示.
標語獲取源可以選擇每日一句或每次一句古詩詞:

window.cnblogsConfig = {
    homeBannerTextType: "one",//每日一句,另一個取值為jinrishici,每次一句古詩詞
}

3.10 文章頁

3.10.1 banner

window.cnblogsConfig = {
    essayTopImg: [
        "https://xxx.png",
        "https://xxx.png"
    ],
}

多張的話每次隨機一張.

3.10.2 文章尾

window.cnblogsConfig = {
    essaySuffix: {
        codeImgUrl   : '', //左側圖片設置，不配置使用 window.cnblogsConfig.blogAvatar
    	aboutHtml    : '關於博主', // 關於博主，不配置使用默認
    	copyrightHtml: '版權聲明', // 版權聲明，不配置使用默認
    	supportHtml  : '聲援博主', // 聲援博主，不配置使用默認
    },
}

在這里插入圖片描述

3.11 打賞

window.cnblogsConfig = {
	reward: {
        enable: true,//開啟
        wechatpay: 'url',//微信收款碼url
        alipay: 'url',//支付寶收款碼url
    },
}

會在右下角:
在這里插入圖片描述

3.12 代碼

3.12.1 限制高度

window.cnblogsConfig = {
    codeMaxHeight: true,
}

代碼框高度不會超過頁面可視區域的70%,隱藏部分通過滾動的方式查看,默認不開啟.

3.12.2 樣式統一設置

window.cnblogsConfig = {
    essayCode: {
	    fontFamily: "'Ubuntu Mono',monospace"//字體
        fontSize: "16px",//大小
    },
}

大佬說目前只有這兩項設置.

3.12.3 高亮

文檔提供了三種高亮的方式,一種是默認的博客園的高亮方式,一種通過highlightjs渲染,一種通過prettify渲染,建議使用第二種,第一種的樣式....嗯.....第三種目前只有五個樣式可以選擇:
在這里插入圖片描述
使用highlighjs的話,加上:

window.cnblogsConfig = {
    essayCodeHighlightingType: "highlightjs",
    essayCodeHighlighting: "從下面列表選擇喜歡的主題",
}

default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic
、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark
、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark
、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light
、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light
、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light
、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far
、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch
、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair
、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque
、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple
、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright
、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn

可以在這里在線查看效果.

以下是筆者的代碼配置:

codeMaxHeight: true,
essayCode: {
        fontFamily: "Fira Code",
        fontSize: "14px",
},
essayCodeHighlightingType: "highlightjs",
essayCodeHighlighting:"monokai-sublime",

主題用的是monokai(不得不吹一下這個主題真的漂亮),大小14px應該足夠了,字體選用的是Fira Code,不貪圖什么,就貪圖一個不等於號(看起來真的太爽了):
在這里插入圖片描述

3.13 頁腳

3.13.1 樣式

window.cnblogsConfig = {
    footerStyle: 1,//1或2,默認2
}

提供了兩種樣式,1或2選擇即可,效果就不截圖了.

3.13.2 友鏈

window.cnblogsConfig = {
    bottomBlogroll: 
        ["name1", 'url1'],
        ["name2", 'url2'],
    ],
}

3.13.3 標語

window.cnblogsConfig = {
    bottomText: {
	    icon: "❤️",
        left : "沖沖沖",
        right: "繼續沖",
    },
}

在這里插入圖片描述
默認會在一對方括號中間.

3.14 控制台輸出

window.cnblogsConfig = {
    consoleList: [
         ['name1', 'url1'],
         ['name2', 'url2'],
    ],
}

在這里插入圖片描述

3.15 播放器

在頁腳加入:在這里插入圖片描述

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
        id="594243151"
        lrc-type="0"
        server="netease"
        order="random"
        type="playlist"
        fixed="true"
        list-olded="true">
</meting-js>

把其中的id換成自己網易雲音樂的id.
獲取id:點擊自己的歌單,生成外鏈播放器,
在這里插入圖片描述
0后面就是自己的id.
在這里插入圖片描述

4 這里的才叫自定義修改

好吧,上面的那些都是原作者提供的簡單修改配置選項,這里的才叫真正的自定義修改,主要修改兩個:側欄,播放器.

4.1 去除一些默認配置

筆者直接把頁腳與一些其他不需要的直接刪除或者隱藏:

getById("rightMenu").style.display = "none";
getById("footer").style.display = "none";
getById("sideBar").style = "height:0;width:0;";
var loginTips = getByClass("login_tips");
if (loginTips.length != 0)
	loginTips[0].style.display = "none";

其中getById就是document.getElementById,getByClass就是document.getElementsByClassName,你可能會問為什么不直接jQuery:

$("#rightMenu").remove();
$("#footer").remove();

默認自帶了2.2版本的jQuery,用了之后的效果很奇怪,chrome不一定每次都能刪除成功,edge與手機測試完全不行,所以,沒辦法了,直接用原生的js.(順便好好懷念一下很久沒用的document.getElementById而不是$).

4.2 側欄

感覺原來的側欄不怎么好看:
在這里插入圖片描述
修改后:
在這里插入圖片描述
在這里插入圖片描述

筆者喜歡比較簡潔的風格,只留下了一個頭像與四個外鏈,其他什么日歷,隨筆,歸檔之類的全部去掉了,點擊頭像會跳轉到首頁.
首先把原來的側欄效果與日歷什么的去掉,同時換背景
在這里插入圖片描述
然后加入外鏈:
在這里插入圖片描述
最后修改一下按鈕事件,因為原來的設計話背景圖片剛好把按鈕給遮擋住了,設成半透明側欄后,可以看到按鈕:
在這里插入圖片描述
因此需要把這個按鈕給隱藏掉:
在這里插入圖片描述
css:
在這里插入圖片描述

4.3 播放器

4.3.1 修改效果

一開始的修改很簡單,直接把fixed改成false就行,讓播放器充滿頁腳:
在這里插入圖片描述
原效果:
在這里插入圖片描述
修改后:
在這里插入圖片描述
但是想了一下感覺這個播放器還是太太太太大了(即使是原來的左下角的播放器,沒辦法筆者喜歡極簡風格),原本想着用三個按鈕代替就好了.然后筆者就去Iconfont找了一些按鈕的圖片:
在這里插入圖片描述
然后...直接上圖吧:
在這里插入圖片描述
頁腳只有一個播放圖片,懸浮有平滑縮放效果,點擊播放后會自動出現下一首與上一首,同時播放改成暫停,點擊暫停后隱藏下一首與上一首按鈕,並改暫停為播放.

4.3.2 准備圖片

這個不難,准備四個按鈕的圖片就好了:播放,暫停,下一首,上一首.筆者這里用的大小是32px*32px.

4.3.3 APlayer

這個想法還是挺好的,但是一開始的時候並不知道怎么實現,加幾個按鈕倒是不難,css這些也不難加,問題是,找不到api.
因為做出這個主題的大佬提供的是meting-js實現的播放器(官方github這里,目前319stars).
在這里插入圖片描述
Quick Start這里很簡單,引入js與css后,加一個meting-js的標簽,然后改id就可以看到自己的歌單了.
問題是....接口在哪?
筆者需要的是播放/暫停的接口啊....
(然后又胡亂找了一通資料,終於功夫不負什么人...)
搜了一下資料得知Meting-js用的是APlayer(官方github這里,目前4.7k),看了一下APlayer的文檔(可以戳這里),結合原來的提供的meeting-js,就直接添加了一個播放器了:
在這里插入圖片描述
在這里插入圖片描述
為了方便直接新建了一個html測試:
在這里插入圖片描述
效果:
在這里插入圖片描述

4.3.4 添加音樂

因為什么音樂都沒有添加,所以只有上面這種效果,看一下文檔繼續完善:

window.ap = new APlayer({
    container: document.getElementById('aplayer'),
    loop: 'all',//列表循環
    order: 'random',//播放順序
    listFolded: false,//播放列表折疊
    audio: [
        {
            name: '你的酒館對我打了烊',//歌曲名
            artist: '陳雪凝',//歌手
            url: 'http://music.163.com/song/media/outer/url?id=1341964346.mp3',//音樂url
            cover: 'http://p1.music.126.net/LiRR__0pJHSivqBHZzbMUw==/109951163816225567.jpg?param=130y130',//封面
        },
    ]
});

這里說一下封面與url如何獲取,url很簡單,首先拿到音樂的id:
在這里插入圖片描述
然后url就是:

http://music.163.com/song/media/outer/url?id=xxxx.mp3

封面的話,直接看源碼,F12搜索

u-cover u-cover-6 f-fl

就可以看到img的src了.

在這里插入圖片描述
回到測試的頁面,就可以看到這首歌了:
在這里插入圖片描述
由於筆者這個不需要把播放器顯示出來,所以沒必要加cover,name與artist,只需要url,而url只與id有關,所以准備一個音樂id列表,然后使用文檔自帶的list.add方法添加:
在這里插入圖片描述
在這里插入圖片描述
ap.list.switch是為了每次隨機播放開始音樂,而不是每次固定某一首歌開始.

4.3.5 添加按鈕

這一步就是加上四個按鈕了(實質是三個,播放/暫停只是圖片更換),首先需要把新添加的播放器隱藏:
在這里插入圖片描述
然后插入三張圖片:
在這里插入圖片描述

4.3.6 添加單擊事件

單擊事件需要三個函數:

  • 切換播放狀態:toggle()
  • 上一首:skipBack()
  • 下一首:skipForward()

還需要一個屬性判斷播放狀態,用於顯示播放/暫停圖片以及上一首/下一首的顯隱:

ap.audio.paused

返回是否暫停.
在這里插入圖片描述
下一首與上一首的單擊事件:
在這里插入圖片描述

4.3.7 平滑旋轉縮放

用到了兩個簡單的css屬性:transform與transition:
在這里插入圖片描述
這樣就大功告成了!
在這里插入圖片描述

5 源碼

github
碼雲

6 博客地址

快來點我!!!


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 從零到一快速搭建個人博客網站（域名備案 + https免費證書）（一） 怎么樣免費搭建一個自己的網站 如何快速入侵一個網站 零基礎零成本制作一個好看的導航網站 免費好看的button按鈕 【博客建站】9 款最好的免費博客網站全對比 【實戰】如何通過html+css+mysql+php來快速的制作動態網頁（以制作一個博客網站為列） Docker快速搭建WordPress博客網站 基於django快速開發一個網站(二） 五分鍾免費搭建一個自己的網站
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM