無料で美しい個人ブログサイトをすばやく取得する方法は？ここを見てください！

1概要

ブログ、言い方、書き方などのメリットは常にあります。CSDN、ブログパーク、ナゲット、オープンソースチャイナ、SegmentFault、51CTO、Jianshuなど、中国には同様のブログプラットフォームが数多くあります。 Leanote（クロスプラットフォーム、オープンソース、Githubは現在9.3k、1か月間は無料、多くのテーマがあります）などのいくつかの個人ブログクライアントもあり、Gridea（無料、 （静的なブログ作成クライアント、Githubは現在5.3kであり、テーマはそれほど多くありません。構築チュートリアルについては、この著者の記事を参照してください）。

もちろん、自分でWordPressから構築を開始することもできます。WordPressはPHPによって開発されたブログプラットフォームです。非常に強力ですが、サーバーを自分で購入し、ドメイン名を購入し、証明書を購入する必要があります。手順はもっと面倒です

。この記事は、主に「無料」+「見栄えの良い」個人ブログサイトを「すばやく」取得する方法を教えることを目的としています。

• 高速：他の人が作成したフレームワークを使用する
• 無料：サーバーやドメイン名などを購入する必要はありません。もちろん、ユニバーサルGithubと切り離せません。
• 見栄え：他の人が作成したテーマを使用します。もちろん、自分で変更できます。

これは、ブログガーデンによって提供されるカスタムテーマ関数を使用したブログです。最初の画像は上にあります。これは元のブロガーのブログです。

静的な画像は少し単調に見え、次にいくつかのgifが表示されます。

2実装

この大物はテーマコードをここでオープンソース化しているので、ドキュメントに従って直接使用してください。

2.1ブログパークの設定

まずブログパークに移動してアカウントを登録し、ブログ設定でjs権限を開きます。

スキンをSimpleMemoryに変更します。

テンプレートのデフォルトCSSを無効にします。

次に、オプションでお知らせを開きます。

2.2コピー

githubに移動してコードをコピーし、最新の

タグに切り替えます。現在は1.2.9です。src/スタイルの下の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/[email protected]/src/script/simpleMemory.min.js"></script>

2.3テスト

自分のWebサイトを開いて、たとえば、何も変更していないことを確認できます。

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クラスを選択し、リンクを表示して生成：


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:
{
    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
    }
}

デフォルトの読み込み：

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"
    ],
}

複数ある場合は、一度に1つずつランダムに更新します。

3.9.2スローガン

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

デフォルトは空で、毎回自動的に取得され、設定後に表示されます。
スローガンのソースは、1日1文または一度に1文を選択できます。

window.cnblogsConfig = {
    homeBannerTextType: "one",//每日一句,另一个取值为jinrishici,每次一句古诗词
}

3.10記事ページ

3.10.1バナー

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

複数ある場合は、一度に1つ選択できます。

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",//大小
    },
}

ギャングスター氏によると、現在、これらの設定は2つしかありません。

3.12.3ハイライト

このドキュメントでは、3つの強調表示方法を提供しています。1つはブログガーデンのデフォルトの強調表示方法、1つはhighlightjsを使用したレンダリング、もう1つはprettifyを使用したレンダリングです。2番目の最初のスタイルを使用することをお勧めします... .... 3番目のタイプには現在、選択できるスタイルが5つしかありません

。

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",

テーマはモノカイを使用します（このテーマを吹き飛ばす必要がありますがとても美しいです）、14pxのサイズで十分です。フォントはFiraコードです。何も必要ない場合は、不等号（ほんとうにクールに見えます）が必要です。

3.13フッター

3.13.1スタイル

window.cnblogsConfig = {
    footerStyle: 1,//1或2,默认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を独自のNetEase Cloud MusicのIDに置き換えます。IDを
取得します。独自のプレイリストをクリックして外部リンクプレーヤーを生成し、

その後に0がIDです

4これはカスタム変更と呼ばれます

さて、これらは元の作者が提供した単純な変更構成オプションです。これらは実際のカスタム変更と呼ばれます。サイドバーとプレーヤーの2つの主な変更があります。

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が毎回正常に削除できない可能性があります。エッジおよび携帯電話のテストは完全に不可能です。そのため、ネイティブjsを直接使用する方法はありません。長い間、$ではなくdocument.getElementByIdを見てください。

4.2サイドバー

元のサイドバーはあまり美しくないと思い

ます：変更後：

著者はより簡潔なスタイルを好み、アバターと4つの外部リンクのみを残し、他のすべてのカレンダー、エッセイ、アーカイブなどをすべて削除し、アバターをクリックするとホームページにジャンプします。
まず、元のサイドバー効果とカレンダーそれを削除し、同時に背景を変更し

てから、外部リンクを追加します。

最後に、ボタンイベントを変更します。元のデザインがボタンをブロックしたため、ボタンを半透明のサイドバーに設定すると、ボタンが表示される

ので、変更する必要があります。ボタンは非表示です：

css：

4.3プレーヤー

4.3.1修正効果

最初の変更は非常に単純です。fixedをfalseに変更して、プレーヤーのフッターを埋め

ます。元の効果：

変更後：

しかし、それを考えても、プレーヤーはまだ大きすぎます（再生の左下隅も）著者がミニマリストスタイルを好きになる方法はありません）、私はもともとそれを3つのボタンに置​​き換えることを考えていました。それから、Iconfontに行ってボタンのいくつかの写真を見つけました：

次に...画像に直接：

フッターには再生画像が1つしかありません。サスペンションはスムーズなズーム効果があります。再生をクリックすると、次の曲と前の曲が自動的に表示されます。同時に、再生は一時停止に変更されます。一時停止をクリックすると、次と前のボタンは非表示になり、一時停止は再生に変更されます。

4.3.2画像を準備する

これは難しいことではなく、再生、一時停止、次の曲、前の曲の4つのボタンの画像を用意するだけで、ここで使用したサイズは32px * 32pxです。

4.3.3 APlayer

このアイデアはまだ非常に優れていますが、最初は実装方法がわかりませんでした。いくつかのボタンを追加することは難しくありません。CSSを追加することも難しくありません。問題は、APIが見つからないことです。
このテーマを作成した大きな男が提供しているためこれは、meeting-jsによって実装されたプレーヤーです（公式のgithub ここ、現在319stars）。

クイックスタートは非常に簡単です。js とcssを導入したら、meeting-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を見ることができます。

テストページに戻ると、この曲

が表示されます。作成者はプレーヤーを表示する必要がないため、カバー、名前、アーティストを追加する必要はなく、URLのみが必要です。URLはIDにのみ関連しているため、1つ準備してください音楽IDリストを作成し、ドキュメントに付属のlist.addメソッドを使用して追加します


。ap.list.switchは、ランダムな再生ごとに音楽を開始するためのもので、毎回固定の曲を開始するためではありません。

4.3.5追加ボタン

この手順では、4つのボタンを追加します（基本的には3つで、再生/一時停止は単なる画像の置き換えです）。最初に、新しく追加したプレーヤーを非表示にする必要があります。

次に3つの画像を挿入します。

4.3.6クリックイベントの追加

クリックイベントには3つの関数が必要です。

• 再生状態の切り替え：トグル（）
• 前：skipBack（）
• 次の曲：skipForward（）

再生/一時停止の画像を表示し、前/次の曲の表示/非表示を表示するために使用される、再生ステータスを決定するための属性も必要です。

ap.audio.paused

一時停止するかどうかを返します。

次の曲と前の曲のクリックイベント：

4.3.7スムーズな回転ズーム

2つの単純なcss属性が使用されます：変換と遷移：

これで完了です！

5ソースコード

github
コードクラウド

6ブログアドレス

是非、注文してください!!!