0.前言

在上一篇中，我們提到了如何創建一個UnitOfWork並通過ActionFilter設置啟用。這一篇我們將簡單介紹一下ActionFilter以及如何利用ActionFilter，順便補齊一下上一篇的工具類。

1. ActionFilter 介紹

ActionFilter全稱是ActionFilterAttribute，我們根據微軟的命名規範可以看出這是一個特性類，看一下它的聲明：

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = true, Inherited = true)]
public abstract class ActionFilterAttribute : Attribute, IActionFilter, IFilterMetadata, IAsyncActionFilter, IAsyncResultFilter, IOrderedFilter, IResultFilter

這是一個允許標註在類和方法上的特性類，允許多個標記，標註之後子類會繼承父類的特性。然後，這個類是一個抽象類，所以我們可以通過繼承ActionFilterAttribute來編寫自己的ActionFilter。

1.1 ActionFilter的四個方法

對於一個ActionFilter而言，最重要的是它的四個方法：

public virtual void OnActionExecuted(ActionExecutedContext context);
public virtual void OnActionExecuting(ActionExecutingContext context);

public virtual void OnResultExecuted(ResultExecutedContext context);
public virtual void OnResultExecuting(ResultExecutingContext context);

上圖是這四個方法在一次請求中執行的順序。在一次請求真正執行之前，想要攔截這個請求，應該使用OnActionExecuting。

為什麼單獨說這個呢？因為這個方法的出鏡率很高，大多數時候都會使用這個方法進行請求過濾。

1.2 在ActionFilter中我們能做什麼

我們來簡單介紹一下，四個方法中的四種上下文類型，看一看裏面有哪些我們可以利用的方法：

1.2.1 ActionExecutingContext

這是一個Action執行前的上下文，表示Action並未開始執行，但是已經獲取到了控制器實例：

public class ActionExecutingContext : FilterContext
{
    public virtual IDictionary<string, object> ActionArguments { get; }
    public virtual object Controller { get; }
    public virtual IActionResult Result { get; set; }
}

ActionExecutingContext繼承自FilterContext，我們暫且不關注它的父類，只看一下它自己的屬性。

• ActionArguments 表示Action的參數列表，這裏面放着各種從用戶接到請求參數以及其他中間處理程序添加的參數
• Controller 表示執行該請求的控制器，在之前我們提過，asp.net core 對於控制器的限制很小，所以控制器什麼類型都可能，故而這裏使用object作為控制器類型
• Result 執行結果，正常情況下，在此處獲取這個屬性的值沒有意義。但是我們可以通過修改這個屬性的值，來讓我們攔截請求

1.2.2 ActionExecutedContext

ActionExecutedContext 表示Action執行完成后的上下文，這時候Action已經執行完成，我們可以通過這個獲取Action執行結果：

public class ActionExecutedContext : FilterContext
{
    public virtual bool Canceled { get; set; }
    public virtual object Controller { get; }
    public virtual Exception Exception { get; set; }
    public virtual ExceptionDispatchInfo ExceptionDispatchInfo { get; set; }
    public virtual bool ExceptionHandled { get; set; }
    public virtual IActionResult Result { get; set; }
}

同樣，繼承自FilterContext，暫且忽略。

• Canceled 表示是否被設置短路
• Controller 處理請求的控制器
• Exception 執行過程中是否發生異常，如果有異常則 有值，否則為Null
• ExceptionHandled 異常是否被處理
• Result 此處對Result進行修改不會屏蔽執行的ActionResult，但是可以向用戶隱藏對應的實現

1.2.3 ResultExecutingContext

這是在Result渲染之前執行的上下文，這時候Action已經執行完畢，正準備渲染Result：

public class ResultExecutingContext : FilterContext
{
    public virtual bool Cancel { get; set; }
    public virtual object Controller { get; }
    public virtual IActionResult Result { get; set; }
}

• Cancel 取消當前結果執行以及後續篩選器的執行
• Controller 控制器
• Result 處理結果

1.2.4 ResultExecutedContext

Result已經執行完成了，獲取執行結果上下文：

public class ResultExecutedContext : FilterContext
{
    public virtual bool Canceled { get; set; }
    public virtual object Controller { get; }
    public virtual Exception Exception { get; set; }
    public virtual ExceptionDispatchInfo ExceptionDispatchInfo { get; set; }
    public virtual bool ExceptionHandled { get; set; }
    public virtual IActionResult Result { get; }
}

這個類與 ActionExecutedContext類似，就不做介紹了。

1.2.5 FilterContext

在上面的四個上下文都繼承自 FilterContext，那麼我們來看一下FilterContext中有哪些屬性或者方法：

public abstract class FilterContext : ActionContext
{
    public virtual IList<IFilterMetadata> Filters { get; }
    public TMetadata FindEffectivePolicy<TMetadata>() where TMetadata : IFilterMetadata;
}

可以看到FilterContext繼承了另一個ActionContext的類。小夥伴們應該對這個類要有一定的概念，這個類是Action的上下文類。它完整存在於一個Action的生命周期，所以有時候可以通過ActionContext進行Action級的數據傳遞（不推薦）。

那麼，繼續讓我們回過頭來看看ActionContext里有什麼：

public class ActionContext
{
    public ActionDescriptor ActionDescriptor { get; set; }
    public HttpContext HttpContext { get; set; }
    public ModelStateDictionary ModelState { get; }
    public RouteData RouteData { get; set; }
}

• ActionDescriptor 執行的Action描述信息，包括Action的显示名稱、一些參數等，具體用到的時候，再為大夥詳細說
• HttpContext 可以通過這個屬性獲取此次請求的Request和Response對象
• ModelState 模型校驗信息， 這部分在後續再為小夥伴們細說
• RouteData 路由信息，asp.net core 在處理請求時解析出來的路由信息，包括在程序中修改的路由信息

2. 使用ActionFilter

在《【asp.net core 系列】9 實戰之 UnitOfWork以及自定義代碼生成》也就是上一篇中，介紹到了ActionFilter與普通特性類一致，可以通過標註控制器然後啟用該ActionFilter。

因為大多數情況下，一個ActionFilter並不會僅僅局限於一個控制器，而是應用於多個控制器。所以這時候，我們通常會設置一個基礎控制器，在這個控制器上進行標註，然後讓子類繼承這個控制器。通過這種方式來實現一次聲明多次使用。

當然，在asp.net core 中添加了另外的一種使用ActionFilter的方式，Setup.cs中

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
}

默認是這樣的，我們可以通過設置參數來添加一個全局應用的Filter，例如說我們上一篇中創建的 UnitOfWorkFilterAttribute：

services.AddControllersWithViews(options=>
{
    options.Filters.Add<UnitOfWorkFilterAttribute>();
});

通過這種方式可以啟用一個全局ActionFilter。如果需要使用asp.net core的默認依賴注入可以使用 AddService進行配置。（依賴注入的內容在後續會講解）。

3. 工具類生成

繼續上一篇遺留的內容：

public static void CreateEntityTypeConfig(Type type)
{
    var targetNamespace = type.Namespace.Replace("Data.Models", "");
    if (targetNamespace.StartsWith("."))
    {
        targetNamespace = targetNamespace.Remove(0);
    }
    var targetDir = Path.Combine(new[] { CurrentDirect, "Domain.Implements", "EntityConfigures" }.Concat(
        targetNamespace.Split('.')).ToArray());

    if (!Directory.Exists(targetDir))
    {
        Directory.CreateDirectory(targetDir);
    }
    var baseName = type.Name.Replace("Entity", "");
    if (!string.IsNullOrEmpty(targetNamespace))
    {
        targetNamespace = $".{targetNamespace}";
    }

    var file = $"using {type.Namespace};" +
        $"\r\nusing Microsoft.EntityFrameworkCore;" +
        $"\r\nusing Microsoft.EntityFrameworkCore.Metadata.Builders;" +
        $"\r\nnamespace Domain.Implements.EntityConfigures{targetNamespace}" +
        "\r\n{" +
        $"\r\n\tpublic class {baseName}Config : IEntityTypeConfiguration<{type.Name}>" +
        "\r\n\t{" +
        "\r\n\t\tpublic void Configure(EntityTypeBuilder<SysUser> builder)" +
        "\r\n\t\t{" +
        $"\r\n\t\t\tbuilder.ToTable(\"{baseName}\");" +
        $"\r\n\t\t\tbuilder.HasKey(p => p.Id);" +
        "\r\n\t\t}\r\n\t}\r\n}";
    File.WriteAllText(Path.Combine(targetDir, $"{baseName}Config.cs"), file);
}

工具類其實本質上就是一次文件寫入的方法，本身沒什麼難度。

不過，這裏還有有個小問題，每次調用都會覆蓋原有的文件，還有就是這裏面有很多可以優化的地方，小夥伴們可以自己試試去優化一下，讓代碼更好看一點。

4 總結

到目前為止，實戰系列也有了幾篇，很多小夥伴問我能提供一下源碼嗎？當然，能呀。不過不是現在，容我留個謎底。當主要框架功能完成之後，我就會給小夥伴們發代碼的。

其實也是因為現在還沒個完整的，開放給小夥伴們也沒啥意義。當然了，跟着一塊敲，也是能實現的哈。關鍵地方的代碼都有。

更多內容煩請關注我的博客《高先生小屋》

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司“嚨底家”!

※推薦評價好的iphone維修中心

※聚甘新

cute-cnblogs 自定義博客園樣式美化二期來啦~

說明

cute-cnblogs 可愛的博客園樣式美化、自定義博客園樣式 二期樣式已經編寫完畢了，如果說 一期樣式 給人的感覺是簡潔清爽的小嬰兒的話，那麼 二期樣式 就是一個有自己小個性（花樣）的小朋友了~

與一期一樣，需要文件的可以來 github ，喜歡我寫的樣式可以幫我點個 star 喔 ღゝ◡╹)ノ

（PS：有什麼問題也可以留言到 github issues 中喔~）

好了，讓我們擼起袖子開始更換二期樣式吧~

博客示例

ღゝ◡╹)ノ 麋鹿魯喲的博客園

介紹

可愛的博客園樣式美化、自定義博客園樣式 ღゝ◡╹)ノ

• 本樣式以簡約可愛為核心，美化博客園的显示效果，增加自定義導航；
• 基於博客園主題“Custom”進行的樣式修改；
• 閱讀目錄導航；
• 支持響應式；

功能

一期功能

• 頂部背景點點動效隨鼠標而動
• 導航欄自定義
• 頁面詩意詩句模塊
• 看板娘-貓(ฅ´ω`ฅ) （自行決定是否添加，因為這個有些影響加載速度）
• 音樂-網易雲 （自行決定是否添加）
• 上弔的貓（PS：回到頂部）（已用其餘按鈕代替此功能）
• 底部跳動的魚<・)))><<
• 點擊頁面跳動的小豆子及可愛的文字（自行決定是否添加可愛文字的點擊）
• 評論增加OωO聊天表情
• 頁面不同的導航背景及人物背景

二期增加功能

• 側邊欄显示
• 側邊欄公告欄及個人信息显示
• 閱讀目錄（標題 h1 > h2 > h3 寫了三級目錄）
• ️ 主題皮膚切換（淺白、暗黑、閱讀）
• 仿主播點贊功能點擊推薦
• ️ 讚賞模塊功能

模版選定

博客皮膚選定： 博客園 Custom 標準模板（與一期不同喔）

使用方法

基本操作

請按照順序進行操作喔~

• 首先記得申請JS權限

• 其次博客皮膚選擇 Custom

• 在此需要獲取數據（不然點擊頭像的關注會失敗）
  找一個沒有登陸的瀏覽器訪問自己的博客園，F12彈出窗口，找到 +加關注，複製follow括號里的內容，暫且先存在一個地方

• 勾選禁用模板默認CSS

• 創建一個新隨筆（這裏使用選項中的TinyMCE(推薦)來編寫的） —— “友鏈”；（注意，此處已與一期不同）
• 點擊 “編輯 HTML 源代碼” 插入以下代碼，修改自己的文本內容后，點擊更新；
• 只勾選 高級選項中的 “發布”、“允許評論”;

<p style="text-align: center;">歡迎來到我的友鏈小屋</p>
<div class="friendsbox">
<div id="app">
<h6 style="text-align: center; color: #2daebf;">展示本站所有友情站點，排列不分先後，均勻打亂算法隨機渲染的喔！</h6>
<div class="unionbox-box" style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.5rem; margin-top: 1.5rem;">&nbsp;</div>
<hr style="position: relative; margin: 1rem 0; border: 1px dashed #9eabb3; width: calc(100%); height: 0;" />
<h2 style="text-align: center;">友鏈信息</h2>
<h5 style="text-align: left; line-height: 30px;">博客名稱：<a href="javascript:void(0)">麋鹿魯喲</a><br />博客網址：<a href="javascript:void(0)">https://www.cnblogs.com/miluluyo/</a><br />博客頭像：<a href="javascript:void(0)">https://pic.cnblogs.com/avatar/1273193/20190806180831.png</a><br />博客介紹：<a href="javascript:void(0)">大道至簡，知易行難。</a></h5>
<h2 style="text-align: center;">join us</h2>
<h5 style="text-align: center; color: #2daebf;">如需友鏈，請添加微信（s978761）告知，格式如下</h5>
<table class="table friendstable" style="margin: 0 auto;">
<tbody>
<tr><th><strong>字段</strong></th><th><strong>字義</strong></th></tr>

</tbody>

</table>

</div>

</div>

• 最後分別複製以下區域代碼，並根據參數更改數據（PS：路徑可進行更改也可不更改，我覺得更改后速度會快一點，自行down文件上傳到博客園文件中，並更改引入路徑，文件都在 github 中，喜歡記得給我個star喔~）

頁面定製CSS代碼

複製 https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.css 的文件內容放到 頁面定製CSS代碼 區域

博客側邊欄公告

<link href="https://blog-static.cnblogs.com/files/miluluyo/tippy.min.css" rel="stylesheet">
<script src="https://blog-static.cnblogs.com/files/miluluyo/jquery2.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/tippy.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/milusidebar.js"></script>

<script>
milusidebar({
	'names' : '麋鹿魯喲',/*你的博客園名吶*/
	'notice' : '<b>溫馨提示</b><span><a href="https://github.com/miluluyo/cute-cnblogs" target="_black">cute-cnblogs</a> &nbsp;樣式已開源</span><b style="margin-top: 3px;"><a style="font-size:10px" href="https://www.cnblogs.com/IsAlpaca/" target="_black">查看一期樣式</a></b>',/*裏面文字自己可以更改喔*/
	'headerUrl' : 'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519075219notice5.png',/*這個是公告欄的背景圖啦，我覺得這個可愛，如果你有更好看的可以自行更改喔*/
	'follow' : 'a1e76459-101d-47af-a8b6-08d523685c8c', /*還記的開始讓你複製follow括號里的內容嗎，對，就放到這裏就好啦*/
	'sidebarInfo' : [[
	      {'icon':'#icon-github1','url':'https://github.com/miluluyo','title':'github'},
	      {'icon':'#icon-weixin','url':'','title':'微信','classname':'popper_weixin','click':false},
	      {'icon':'#icon-QQ','url':'http://wpa.qq.com/msgrd?v=3&uin=978761587&site=qq&menu=yes','title':'QQ'},
	      {'icon':'#icon-juejin','url':'https://juejin.im/user/5d18adce5188256e98090e33','title':'掘金'}
	  ],[
	      {'icon':'#icon-weibobangding','url':'https://www.weibo.com/6001406082/profile?topnav=1&wvr=6','title':'微博'},
	      {'icon':'#icon-csdn','url':'https://blog.csdn.net/qq_39394518','title':'CSDN'},
	      {'icon':'#icon-bilibili','url':'https://space.bilibili.com/100007925','title':'bilibili'},
	      {'icon':'#icon-yuquemianlogo','url':'https://www.yuque.com/miluluyo','title':'語雀'}
	]],/*這個模塊是個人信息內那些小圖標們，別忘記更改喔，具體參數，可以參考下面的表格喔*/
	'signature':'靡不有初  鮮克有終',/*來一句你自己喜歡的句子吧*/
	'popper_weixin':'<div class="popper_box"><p><b>很高興認識你鴨~  (づ｡◕ᴗᴗ◕｡)づ</b> </p><div class="popper_box_con"><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200614064005qrcode.jpg" alt="">公眾號：麋鹿魯喲</div><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1493340/t_wxh.jpg" alt="">微信號：s978761</div></div><p>（加我記得備註 博客園 喔）</div>',/*這裡是微信圖標的彈窗內容，可以自行更改內容喔*/
	'portrait':'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200515061851tx.jpg'
})/*這個是頭像圖片喔，你可以上傳到相冊里，然後F12獲取，或者使用博客園的那個鏈接也可以的撒~*/
</script>

參數說明

頁首Html代碼

  <div id="set_btn_box">
    <div class="set_btn fly_top fadeIn animated">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiding"></use></svg>
    </div>
    <div class="set_btn article_icon_btn catalogue_btn">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-dagang"></use></svg>
    </div>
    <div class="set_btn article_icon_btn comment">
        <a href="#comment_form_container"><svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-linedesign-01"></use></svg></a>
    </div>
    <div class="set_btn skin_btn">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-pifu"></use></svg>
    </div>
    <div class="set_btn gratuity">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-dashang"></use></svg>
    </div>
    <div class="set_btn article_icon_btn artice_recommend">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-tuijian2"></use></svg>
    </div>
     <canvas id="thumsCanvas" width="200" height="400" style="width:100px;height:200px"></canvas>
    <div class="set_btn catalogue">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-cebianlan-"></use></svg>
    </div>
</div>
<script src='https://blog-static.cnblogs.com/files/miluluyo/canvas2.js'></script>
<!--
<link href="//files.cnblogs.com/files/linianhui/lnh.cnblogs.css" rel="stylesheet"/>-->

頁腳Html代碼

  <style id="ceshicss">
@media (max-width: 767px){
#set_btn_box {width: 100vw;left: 0;right: 0;bottom: 0;background: hsla(0,0%,100%,.6);height: 49px;display: flex;justify-content: space-between;align-items: center;padding: 12px 40px;border-top: 1px solid #e8e8e8;box-sizing: border-box;}
.set_btn {margin-top: 0;}
.set_btn.fly_top.fadeIn.animated {position: absolute;right: 10px;bottom: 60px;}
.container{bottom:50px}}
#mainContent{width:90%}
</style>
<link href="https://blog-static.cnblogs.com/files/miluluyo/tippy.min.css" rel="stylesheet">
<script src="https://unpkg.com/@popperjs/core@2.4.2/dist/umd/popper.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/tippy.js"></script>
<link rel='stylesheet' href='https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'>
<script src="https://at.alicdn.com/t/font_1825850_klax1ao4o6.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/three.min.js"></script>
<script src='https://blog-static.cnblogs.com/files/miluluyo/star.js'></script>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/OwO.min.css" />
<script src="https://blog-static.cnblogs.com/files/miluluyo/OwO2.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/monitoring2.js"></script>

<script>

miluframe({
  Youself:'https://www.cnblogs.com/miluluyo/', /*個人的博客園鏈接*/
  /*博客園導航信息*/
    custom:[{
      name:'首頁',
      link:'https://www.cnblogs.com/miluluyo/',
      istarget:false
    },{
      name:'聯繫',
      link:'https://msg.cnblogs.com/send/%E9%BA%8B%E9%B9%BF%E9%B2%81%E5%93%9F',
      istarget:true
    },{
      name:'技能樹',
      link:'https://miluluyo.github.io/',
      istarget:true
    },{
      name:'留言板',
      link:'https://www.cnblogs.com/miluluyo/p/11578505.html',
      istarget:false
    },{
      name:'相冊',
      link:'https://www.cnblogs.com/miluluyo/gallery.html',
      istarget:false
    },{
      name:'友鏈',
      link:'https://www.cnblogs.com/miluluyo/p/11633791.html',
      istarget:false
    },{
      name:'維護',
      link:'https://www.cnblogs.com/miluluyo/p/12092009.html',
      istarget:false
    },{
      name:'投喂',
      link:'https://www.cnblogs.com/miluluyo/p/gratuity.html',
      istarget:false
    },{
      name:'管理',
      link:'https://i.cnblogs.com/',
      istarget:true
    }],
    /*向別人展示自己的友鏈信息*/
    resume:{
        "name":"麋鹿魯喲",
        "link":"https://www.cnblogs.com/miluluyo/",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg",
        "introduction":"大道至簡，知易行難。"
    },
    /*友鏈信息*/
    unionbox:[{
        "name":"麋鹿魯喲",
        "introduction":"生活是沒有標準答案的。",
        "url":"https://www.cnblogs.com/miluluyo",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg"
      },{
        "name":"麋鹿魯喲的技能樹",
        "introduction":"大道至簡，知易行難。",
        "url":"https://miluluyo.github.io/",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg"
      }],
    /*友鏈表格頭信息，這個可以忽略*/
    details:[{
        field: 'name',
        literal: '昵稱',
      },{
        field: 'introduction',
        literal: '標語',
      },{
        field: 'url',
        literal: '鏈接地址',
      },{
        field: 'headurl',
        literal: '頭像地址',
      }],
    /*瀏覽器頂部小圖標*/
    logoimg:'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519070633f12.png',
    /*文章頁面標題前的圖標，此處圖標有擴展，下面會提到圖標*/
    cuteicon:['icon-caomei','icon-boluo','icon-huolongguo','icon-chengzi','icon-hamigua','icon-lizhi','icon-mangguo','icon-liulian','icon-lizi','icon-lanmei','icon-longyan','icon-shanzhu','icon-pingguo','icon-mihoutao','icon-niuyouguo','icon-xigua','icon-putao','icon-xiangjiao','icon-ningmeng','icon-yingtao','icon-taozi','icon-shiliu','icon-ximei','icon-shizi'],
    /*讚賞，若true則显示此按鈕，false則不显示*/
    isGratuity:true,
    /*讚賞按鈕焦點显示讚賞內容，內容可自行更改*/
    gratuity:'<div class="popper_box"><p><b>要請我喝奶茶嗎  (づ｡◕ᴗᴗ◕｡)づ</b> </p><div class="popper_box_con"><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053817wx.png" alt="">微信掃碼</div><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053827zfb.png" >支付寶掃碼</div></div><p><b>留下一句你覺得很勵志與美的話給我吧~</b>&nbsp;&nbsp;<b><a href="https://www.cnblogs.com/miluluyo/p/12930946.html">GO</a></b></div>'
})
</script>
<!-- 點贊 -->
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas><script src="https://blog-static.cnblogs.com/files/miluluyo/mouse-click.js"></script>

<!-- 以下內容是否添加你隨意 -->

<script>
  /*在文章頁面添加古詩詞*/
  $("#navigator").after('<div class="poem-wrap"><div class="poem-border poem-left"></div><div class="poem-border poem-right"></div><h1>念兩句詩</h1><div id="poem_sentence"></div><div id="poem_info"></div></div>')
</script>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
  jinrishici.load(function(result) {
    var sentence = document.querySelector("#poem_sentence")
    var info = document.querySelector("#poem_info")
    sentence.innerHTML = result.data.content
    info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
  });
</script>

<script type="text/javascript">
/* 鼠標特效，我覺得太花哨了就註釋了，喜歡的自己打開註釋就可以 */
/*var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("去活出你自己。","今天的好計劃勝過明天的完美計劃。","不要輕言放棄，否則對不起自己。","緊要關頭不放棄，絕望就會變成希望。","如果不能改變結果，那就完善過程。","好好活就是干有意義的事，有意義的事就是好好活！","你真正是誰並不重要，重要的是你的所做所為。","你不想為你的信仰冒一下險嗎?難道想等你老了，再後悔莫及嗎?","有些鳥兒是關不住的，它的每一根羽毛都閃耀着自由的光輝。","決定我們成為什麼樣人的，不是我們的能力，而是我們的選擇。","掉在水裡你不會淹死，呆在水裡你才會淹死，你只有游，不停的往前游。","有些路，只能一個人走。","希望你眼眸有星辰，心中有山海。","從此以夢為馬，不負韶華。","人的成就和差異決定於其業餘時間。","佛不要你皈依，佛要你歡喜。","ダーリンのこと　大好きだよ","小貓在午睡時，地球在轉。","我，混世大魔王，申請做你的小熊軟糖。","決定好啦，要暗暗努力。","吶，做人呢最緊要開心。","好想邀請你一起去雲朵上打呼嚕呀。","永遠年輕，永遠熱淚盈眶。","我生來平庸，也生來驕傲。","我走得很慢，但我從不後退。","人間不正經生活手冊。","我是可愛的小姑娘，你是可愛。","數學里，有個溫柔霸道的詞，有且僅有。","吧唧一口，吃掉難過。","你頭髮亂了哦。","健康可愛，沒有眼袋。","日月星辰之外，你是第四種難得。","你是否成為了了不起的成年人？","大家都是第一次做人。","何事喧嘩？！","人間有味是清歡。","你笑起來真像好天氣。","風填詞半句，雪斟酒一壺。","除了自渡，他人愛莫能助。","昨日種種，皆成今我。","一夢入混沌 明月撞星辰","保持獨立 適當擁有","謝謝你出現 這一生我很喜歡","做自己就好了 我會喜歡你的","太嚴肅的話，是沒辦法在人間尋歡作樂的","願你餘生可隨遇而安，步步慢。","黃瓜在於拍，人生在於嗨","奇變偶不變，符號看象限。","從來如此，便對么？","今天我這兒的太陽，正好適合曬鈣 你呢","未來可期，萬事勝意。","星光不問趕路人 時光不負有心人","我當然不會試圖摘月，我要月亮奔我而來","女生要修鍊成的五樣東西： 揚在臉上的自信，長在心底的善良， 融進血里的骨氣，刻進命里的堅強，深到骨子里的教養","燕去燕歸，滄海桑田。縱此生不見，平安惟願","我想認識你 趁風不注意","我一直想從你的窗子里看月亮","長大應該是變溫柔，對全世界都溫柔。","別在深夜做任何決定","山中何事，松花釀酒，春水煎茶。","桃李春風一杯酒，江湖夜雨十年燈。","欲買桂花同載酒，終不似，少年游。");
        var le = Math.ceil(Math.random()*a.length); 
        var $i = $("<span></span>").text(a[le]);/*a[a_idx]*/
        /*a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        2000,
        function() {
            $i.remove();
        });
    });
});*/
</script>


<!--音樂，只在PC端寬度>1000px時显示-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3116636104" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
<script src="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/Meting.min.js"></script>

<!--貓，只在PC端显示，移動端不加載了，因為會卡頓頁面-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
  var mobile_flag = isMobile();
  if(mobile_flag){
    //console.info("移動端")
  }else{
    //console.info("PC端")
    L2Dwidget.init({
        "model": {
            "jsonPath": "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 100,
            "height": 200,
            "hOffset": 70,
            "vOffset": 0
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
    window.onload = function(){
      $("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
    }
  }

</script>

<script>

/*記錄訪問數據，我用了兩個，一個是這個在 https://clustrmaps.com/ 網站，另一個是 https://www.51.la/ 這個網站*/
/*
	第一種：https://clustrmaps.com/
	註冊賬號，添加自己博客園的鏈接，選擇自定義Customize,
	選擇 Image based (basic version for websites that don't support javascript)，調整到你喜歡的樣式，然後複製
	：這個我插入在了側邊欄的最底部，把生成的代碼粘貼到append內，這就完事了
*/
$('#sideBarMain').append('')

/*
	第二種：https://www.51.la/
	註冊賬號，點控制台，添加統計ID，統計圖標显示我是不显示的
	這個目前插入的js好像報錯，我的是很早之前生成的，還能用，因此還是推薦用第一種吧

	別的地方也有這種很多統計訪問數據的，可以自己找找看呢

*/
</script>

參數說明

更換頂部背景圖

當前框架使用了一張圖片，也可以自己進行更換成隨機圖片API

在css樣式中

 #blogTitle{background:url(https://images.cnblogs.com/cnblogs_com/miluluyo/1764887/o_20051406472117.jpg) center center / cover no-repeat #222;overflow:hidden;width:100%;height:40vh;max-height:40vh;box-shadow:0 1px 2px rgba(150,150,150,.7);       /*搜索這個 更換 background: url() 里的鏈接 即可*/

最後

更多內容請查看 cute-cnblogs 自定義番外篇
（PS：可以使用番外篇里的隨機圖片API喔~）

請吃糖

如果您喜歡這裏，感覺對你有幫助，並且有多餘的軟妹幣的話，不妨投喂一顆糖喔~

<(▰˘◡˘▰)> 謝謝老闆~

微信掃碼

支付寶掃碼

讚賞的時候，留下一句你覺得很勵志與美的話給我吧~

（也可以加一個博客園給我喔，會添加在名字的旁邊喔~點擊可以跳轉~ 例如：去瞧瞧都有誰讚賞了

為了響應大家的號召，方便大家技術交流，之前建立了一個微信群，如果大家有需要可以掃碼（或者搜我微信號：s978761）加我好友，我邀請你加入～本群是一個純交流學習工作的群，不準發布廣告、營銷相關的信息！對了，加我記得備註上：博客園+名稱 加群 喔~

微信號：s978761

公眾號：麋鹿魯喲

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司“嚨底家”!

※推薦評價好的iphone維修中心

※聚甘新