博客園-真夠意思

来源:https://www.cnblogs.com/xunhanliu/archive/2019/02/27/10443767.html
-Advertisement-
Play Games

1、word書寫blog 使用word的blog模板，可以上傳到博客園的隨筆上去。上傳後，在word繼續編輯，再上傳的話，就會覆蓋掉同一篇隨筆。 上傳配置 如果找不到模板的話，可以在上圖中的搜索框內，搜索‘博客文章’，聯網的話，一定能搜到。 如果從未添加過賬戶的話，點擊下圖中的‘新建’按鈕。 賬戶信 ...


1、word書寫blog

使用word的blog模板，可以上傳到博客園的隨筆上去。上傳後，在word繼續編輯，再上傳的話，就會覆蓋掉同一篇隨筆。

上傳配置

如果找不到模板的話，可以在上圖中的搜索框內，搜索‘博客文章’，聯網的話，一定能搜到。

如果從未添加過賬戶的話，點擊下圖中的‘新建’按鈕。

賬戶信息填你自己登錄時候的賬號密碼，URL 填寫： http://www.cnblogs.com/XXX/services/metaweblog.aspx   (XXX是你的用戶名)。

如果不能發不成功，請檢查下圖的Blog地址名是不是與URL鏈接中的XXX一致。

如果有多個賬戶的話，在文章里選擇相應賬戶即可。點擊左上角 ‘發佈’ 即可。

 

 2、博客園的自定義

與市面上常用的blog相比，有以下優勢：

  1.  基本沒有廣告，對比CSDN.
  2. 發佈文章不用審核，對比CSDN
  3. 頁面高度自定義(最關鍵)，對比簡書，CSDN。支持CSS, html script植入。

在cnblog的設置頁面，

我選擇的風格是：

3、支持script腳本植入

這個功能需要在"設置"中申請一下。在工作日，大概一天就能申請下來。這樣，你就能對頁面中所有元素就行操作了。

4、牛刀小試-添加文章目錄

1) 頁面CSS

 1 #main {
 2     margin-right: calc(50% - 610px);
 3 }
 4 
 5 #ad_t2, #under_post_news, #under_post_kb, #cnblogs_c1 {
 6     display: none;
 7 }
 8 
 9 .xh-treemenu li {
10     list-style: none;
11 }
12 
13 .xh-treemenu .xh-toggler {
14     cursor: pointer;
15 }
16 
17 .xh-treemenu .xh-toggler:before {
18     display: inline-block;
19     margin-right: 2pt;
20 }
21 
22 li.xh-tree-empty > .xh-toggler {
23     color: #aaa;
24 }
25 
26 li.xh-tree-empty > .xh-toggler:before {
27     content: "\263A";
28 }
29 
30 li.xh-tree-closed > .xh-toggler:before {
31     content: "\263B";
32 }
33 
34 li.xh-tree-opened > .xh-toggler:before {
35     content: "\263A";
36 }
37 
38 #xh-aside {
39     position: fixed;
40     top: 4%;
41     left: calc(50% - 691px);
42     width: 243px;
43     overflow: hidden;
44     text-overflow: ellipsis;
45     white-space: nowrap;
46 }
47 
48 .xh-tree {
49     color: #46CFB0;
50     width: 800px;
51     margin: 100px auto;
52 }
53 
54 .xh-tree li > a,
55 .xh-tree li > span {
56     padding: 0 4pt;
57     border-radius: 2px;
58 }
59 
60 .xh-tree li a {
61     color: #46CFB0;
62     text-decoration: none;
63     line-height: 20pt;
64 
65 }
66 
67 .xh-tree li a:hover {
68     background-color: #34BC9D;
69     color: #fff;
70 }
71 
72 .xh-active {
73     background-color: #34495E;
74     color: white !important;
75 }
76 
77 a.xh-active {
78     color: #fff;
79 }
80 
81 .xh-tree li a.xh-active:hover {
82     background-color: #34BC9D;
83 }
84 
85 ul {
86     padding-left: 30px;
87 }

 

2) script

註：cnblog內部已經把jquery載入進來了。

關於第三方鏈接資源，一定要https開頭，否則載入不進來。關於網頁資源（圖片，js）的存儲,可以採取以下兩種方案：

　　1、放到cnblog中。不過有文件類型限制。

2、放到github中，但是比較慢。可以放到碼雲上（github在中國的托管）。至於如何生成靜態鏈接自己搜。

 

  1 <script>
  2     $(".catListTitle").text('');
  3     $('.newsItem').prepend('<img src="https://xunhanliu.gitee.io/js/cnblog-profile.png" alt="xunhanliu" style=" width: 116px;margin: 0 auto;display: block;border: solid 1px #00ff2b;border-radius: 50%;">');
  4 </script>
  5 <script src="https://xunhanliu.gitee.io/js/d3.v4.min.js"></script>
  6 <script>
  7     console.log('謝謝啊');
  8     (function ($) {
  9         $.fn.openActive = function (activeSel) {
 10             activeSel = activeSel || ".xh-active";
 11 
 12             var c = this.attr("class");
 13 
 14             this.find(activeSel).each(function () {
 15                 var el = $(this).parent();
 16                 while (el.attr("class") !== c) {
 17                     if (el.prop("tagName") === 'UL') {
 18                         el.show();
 19                     } else if (el.prop("tagName") === 'LI') {
 20                         el.removeClass('xh-tree-closed');
 21                         el.addClass("xh-tree-opened");
 22 
 23                     }
 24 
 25                     el = el.parent();
 26                 }
 27                 el = $(this).parent();
 28                 if (el.find('li').length > 0) { //不是葉子
 29                     el.removeClass('xh-tree-opened');
 30                     el.addClass("xh-tree-closed");
 31                 }
 32             });
 33 
 34             return this;
 35         }
 36 
 37         $.fn.treemenu = function (options) {
 38             options = options || {};
 39             options.delay = options.delay || 0;
 40             options.openActive = options.openActive || false;
 41             options.activeSelector = options.activeSelector || "";
 42 
 43             this.addClass("xh-treemenu");
 44             this.find("> li").each(function () {
 45                 e = $(this);
 46                 var subtree = e.find('> ul');
 47                 var button = e.find('span').eq(0).addClass('xh-toggler');
 48 
 49                 if (button.length == 0) {
 50                     var button = $('<span>');
 51                     button.addClass('xh-toggler');
 52                     e.prepend(button);
 53                 } else {
 54                     button.addClass('xh-toggler');
 55                 }
 56 
 57                 if (subtree.length > 0) {
 58                     subtree.hide();
 59 
 60                     e.addClass('xh-tree-closed');
 61 
 62                     e.find(button).click(function () {
 63                         var li = $(this).parent('li');
 64                         li.find('> ul').slideToggle(options.delay);
 65                         li.toggleClass('xh-tree-opened');
 66                         li.toggleClass('xh-tree-closed');
 67                         li.toggleClass(options.activeSelector);
 68                     });
 69 
 70                     $(this).find('> ul').treemenu(options);
 71                 } else {
 72                     $(this).addClass('xh-tree-empty');
 73                 }
 74             });
 75 
 76             if (options.openActive) {
 77                 this.openActive(options.activeSelector);
 78             }
 79 
 80             return this;
 81         }
 82     })(jQuery);
 83 
 84 </script>
 85 
 86 <script>
 87     $(function () {
 88         var lastHeadTag = 0;
 89         var el = d3.select('#main').append('div').attr('id', 'xh-aside').append('ul').attr("class", "xh-tree");
 90         var children = $("#cnblogs_post_body").children()
 91         for (var i = 0; i < children.length; i++) {
 92             tagNameL = $(children[i]).prop("tagName").split('');
 93             if (tagNameL.length == 2 && tagNameL[1] > 0 && tagNameL[1] < 7)  //取出H標簽
 94             {
 95                 //為這些children添加id
 96                 $(children[i]).attr('id', $(children[i]).text().trim());
 97                 addTagTree(tagNameL[1], $(children[i]).text().trim(), lastHeadTag);
 98                 lastHeadTag = tagNameL[1];
 99             }
100         }
101         var tagTree = {};
102 
103         function addTagTree(tagNum, text, lastHeadTag) {
104             if (lastHeadTag == 0) {
105                 el = el.append('li').data(tagNum)
106                 el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
107                 return;
108             }
109             if (lastHeadTag < tagNum)//下一級
110             {
111                 el = el.append('ul').append('li')
112                 el.data(tagNum).append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
113                 ;
114             } else if (lastHeadTag == tagNum) {//同一級
115                 el = d3.select(el._groups[0][0].parentNode).append('li').data(tagNum);
116                 el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
117                 ;
118             } else { //上溯添加
119                 //1、parent同級，完美
120                 //2、parent<tagNum  接著上溯
121                 //3、parent>tagNum  放到parent的下一級
122                 el = d3.select(el._groups[0][0].parentNode);
123                 var addFlag = 0;
124                 while (el.attr("class") == null || el.attr("class").search("xh-tree") == -1) {
125                     if (el._groups[0][0].tagName === 'UL') {
126                     } else if (el._groups[0][0].tagName === 'LI') {
127                         if (el.data() == tagNum) {
128                             el = d3.select(el._groups[0][0].parentNode).append('li').data(tagNum);
129                             el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
130                             ;
131                             addFlag = 1;
132                             break;
133                         }
134                         else if (el.data() < tagNum) {
135                             el = el.select('ul').append('li').data(tagNum);
136                             el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
137                             addFlag = 1;
138                             break;
139                         }
140                     }
141                     el = d3.select(el._groups[0][0].parentNode);
142                 }
143                 if (addFlag == 0) { //未添加上
144                     el.append('li').data(tagNum).append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
145                     ;
146                 }
147             }
148         }
149 
150         $(".xh-tree").treemenu({delay: 300, openActive: true, activeSelector: ".xh-open"});
151         $('.xh-tree a').click(function () {
152             $('.xh-active').removeClass('xh-active');
153             $(this).addClass('xh-active');
154         })
155     });
156 
157 </script>

 3）效果

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • react 源碼之setState
    今天看了react源碼，僅以記錄。 1：monorepo （react 的代碼管理方式） 與multirepo 相對。 monorepo是單代碼倉庫， 是把所有相關項目都集中在一個代碼倉庫中，每個module獨立發佈，每個module都有自己的依賴項（package.json），能夠作為獨立的npm ...
  • 簡單JavaScript小程式
    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var count=0; //初始化變數 function guess(){ //自定義一個函數 for(s= pa ...
  • 基於element-tree-table樹型表格點擊節點請求數據展開樹型表格
    效果： 引用CSS、JS： Vue、element-ui、Axios treeTable: https://github.com/ProsperLee/element-tree-grid 模擬根據父id請求子數據的JSON： HTML部分： JS部分：// 註意屬性表格要顯示展開箭頭需要加入 chi ...
  • js判斷當前瀏覽器是否是源生app的webview
    有些時候，我們在開發過程中需要判斷，當前頁面被打開是否是處於源生的webview裡面，或者NODEJS做伺服器後端支持的時候，判斷請求來源是否來至於源生webview裡面被打開的頁面請求GET/POST/.. 於是寫了一個輪子，用javascript的形式判斷當前設備android或者ios，是不是 ...
  • 前端一些小知識點
    一，主流瀏覽器及內核 Chrome Webkit/blink IE Trident Firfox Gecko Safari Webkit Opera presto 二，css權重 ！importent Infinity（正無窮） 行間樣式 1000 id 100 class/屬性/偽類 10 標簽/ ...
  • 移動端利用chrome瀏覽器在PC端進行調試方法
    由於最近工作中遇到需要在電腦上調試手機端的功能和樣式，之前也沒有遇到過，所以就各種百度和試驗。最後終於功夫不負有心人，成功了。（那一刻心情真滴很雞凍啊~~~~~~~~~）。所以暫時記錄下來。以免雞凍過度再給忘記了。 好，接下來就是具體的步驟啦。由於沒有什麼筆墨經驗，所以都是大白話啦。
  • CSS中的一下小技巧1之CSS3三角形運用
    使用CSS3實現三角形： 在前端頁面中有很多時候會遇到需要三角形圖案的時候，以前不知道可以用CSS3實現三角形的時候，一般都是叫UI把三角形圖案切出來。 後來知道原來可以用CSS3實現三角形，可是用過一次後很容易忘記，所以想把這個小技巧記錄起來~ CSS3是如何實現三角形的呢？——答案是通過邊框，也 ...
  • 前端非同步編程之Promise和async的用法
    傳統的非同步解決方案採用回調函數和事件監聽的方式，而這裡主要記錄兩種非同步編程的新方案： ES6的新語法Promise ES2017引入的async函數 Generator函數（略） Promise的含義 是非同步變成的一種解決方案，屬於ES6的語法。 簡單的說，promise就是一個容器，裡面包含著一個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類