玩轉CSDN之自定義博客欄目

時間 2021-08-13

標籤 javascript php html java git 程序員 github 微信 markdown app 欄目 JavaScript 简体版

原文原文鏈接

玩轉CSDN之自定義博客欄目

不得不說，CSDN在IT界仍是很是不錯的，不論是文章數量仍是質量，都很是不錯，不少程序猿也在CSDN建了窩，那麼如何把CSDN的主頁設置的更加符合本身的口味，就是咱們今天要作的事。javascript

CSDN博客的欄目指的是這塊內容：php

這裏面，有的是CSDN博客自帶的內容，好比我的資料、博客專欄等，還有些內容，咱們能夠自定義，首先，咱們須要進入我的的博客首頁，點擊管理博客，並切換到博客欄目選項卡，這裏，就是咱們修改自定義欄目的主戰場了。html

自定義連接

咱們首先來看最簡單的，增長一個欄目，並增長一些自定義的連接選項。java

首先，咱們點擊添加欄目，如圖：
git

標題就是咱們自定義欄目的名字，隨便取一個看的順眼的名字便可。
下面的內容，纔是咱們的重點，白話文咱們就不說了，你能夠在內容中輸入相似「公告」、「聲明」、「通緝」、「懸賞」等等，不用任何修飾的白話文，這些東西，相信小學畢業證書拿到的朋友應該都會。
那麼如何輸入帶連接的內容呢？幾個大字看見沒！支持HTML格式！！！有了這幾個字，還怕咱們有什麼作不出嗎?
OK。上連接：程序員

<a title="友情連接" href="http://www.hztalk.com/" target="_blank"><br>
聊科技 遊戲 電影 美食 請訪問 HZtalk
</a>
<br>

相信這些最基本的HTML語言，大部分開發者都應該看得懂，看不懂就不用繼續往下看了。github

自定義帶框框的連接

一樣是一個連接，以下圖的這個標題樣式，是否是顯得略高級點呢？微信

若是不寫標題，那麼默認就是一行文字，因此咱們給它增長一個系統的欄目纔有的標題框markdown

注意，是紅色框框裏面的內容，不是紅色的框框。。。app

<a title="友情連接" href="http://www.hztalk.com/" target="_blank"><br>
聊科技 遊戲 電影 美食 請訪問 HZtalk
</a>
<br>
<a title="Github" href="https://github.com/xuyisheng" target="_blank"><br>
<ul class="panel_head"><span>個人Github</span></ul><br>
歡迎Follow、Fork、Star
</a>

代碼中把前面的內容代碼一塊兒貼了出來，讓你們把結構更看的清楚一點。咱們只是加了一個

<ul class="panel_head">

而已。

貼圖

高大上的邊欄怎麼能沒有圖片，惋惜的是，CSDN不容許引用站外圖片。。。
因此，咱們只能寄但願於CSDN本身的相冊中的圖片，可是。。。CSDN的相冊隱藏的如此之好，以致於咱們只能經過源代碼來找到它的位置。。。因此，這裏仍是直接告訴你們吧：
點擊進入個人CSDN首頁——把鼠標放到個人收藏旁邊的下拉箭頭上——個人相冊出來了，不知道這是怎麼設計出來的，太反人類了。當咱們把圖片上傳到相冊中後，就可使用相冊中的圖片了。選中圖片，右鍵選擇，在新窗口中打開圖片，就得到了圖片的地址，有了站內的圖片，引用就很是簡單了。

<ul class="panel_head"><span>個人微信公衆號</span></ul>
<ul class="panel_body">
爲你推薦最新的博文~更有驚喜等着你
<img style="width:95%;" src="https://img-my.csdn.net/uploads/201503/15/1426428496_7596.jpg">
</ul>

效果就是這樣：

若是你想居中的話：

<center><img src='imgurl'></center>

其實這些都是最基本的HTML語句，我這樣的半吊子Web開發者都能寫。相信大半吊子的程序猿應該能夠用HTML寫出更好的內容。

Flash

添加Flash與使用圖片幾乎沒有太大差異：
例如咱們要顯示凱子哥頁面上的這個動畫效果：

咱們能夠這樣：

<div id="custom_column_28798789" class="panel">
<ul class="panel_head"><span>我的說明</span></ul>
<ul class="panel_body">
<div height="120" width="150" align="center"><embed height="120" width="150" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" autostart="1" wmode="transparent"></div>

仍是那句話，都是HTML。

新浪微博

新浪微博也是程序員交（zhuang）流（bi）的好東西，因此，這裏咱們再來配置下新浪微博，可是，這個東西咱們很差直接用HTML來作，畢竟寫上去畢竟難看，不信邪你能夠試試。
那麼咱們怎麼作呢？首先，咱們須要幫助。。。
打開微博工具，直接給地址：戳我戳我

上面都是廣告，咱們要的是下面。

看見沒，多麼貼心，還給咱們準備好了複製。

咱們把這個代碼直接複製到欄目中：

<iframe width="100%" height="550" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&amp;width=0&amp;height=550&amp;fansRow=2&amp;ptype=1&amp;speed=0&amp;skin=1&amp;isTitle=1&amp;noborder=1&amp;isWeibo=1&amp;isFans=1&amp;uid=1904977584&amp;verifier=05864e99&amp;dpc=1"></iframe>

OK，微博已經自動獲取了，不信能夠貼上上面的代碼，給我宣傳宣傳，thanks。
是否是so easy：

郵我

像QQ郵箱這樣的鵝廠產品，大多都會帶有一些社交類的元素，咱們一樣能夠在頁面中設置這樣的信息，好比給我發郵件：

點擊後，會跳到這樣一個界面：

點擊開發平臺，你也可使用這樣的功能，跟使用微博同樣，咱們可讓它自動生成咱們須要的樣式，一鍵獲取代碼：

真的是so easy。

固然要注意，代碼中會帶有站外的圖片，你一樣須要傳到本身的CSDN相冊。

HTML代碼示例

除了咱們上面列舉的這些經常使用的設置，下面咱們再從網上拔一些經常使用的代碼來，供你們參考：

貼圖：&lt;img src=&quot;圖片地址&quot;&gt;

加入鏈接：&lt;a href=&quot;所要鏈接的相關地址&quot;&gt;寫上你想寫的字&lt;/a&gt;

貼圖：<img src="圖片地址">

加入鏈接：<a href="所要鏈接的相關地址">寫上你想寫的字</a>

在新窗口打開鏈接：<a href="相關地址" target="_blank">寫上要寫的字</a>

消除鏈接的下劃線在新窗口打開鏈接：

<a href="相關地址" style="text-decoration:none" target="_blank">寫上你想寫的字</a>

移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

字體加粗：<b>寫上你想寫的字</b>

字體斜體：<i>寫上你想寫的字</i>

字體下劃線: <u>寫上你想寫的字</u>

字體刪除線: <s>寫上你想寫的字</s>

字體加大: <big>寫上你想寫的字</big>

字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

消除鏈接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

貼音樂：<embed src=音樂地址 width=300 height=45 type=audio/mpeg autostart="false">

貼flash: <embed src="flash地址" width="寬度" height="高度">

貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

換行：<br>

段落：<p>段落</p>

原始文字樣式：<pre>正文</pre>

換帖子背景：<body background="背景圖片地址">

固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body bgproperties=fixed>

定製帖子背景顏色：<body bgcolor="#value">(value值見10)

帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

貼網頁：<iframe src="相關地址" width="寬度" height="高度"></iframe>