使用Laravel的Blade Templates相當好用，用久了還滿習慣的，
但有一點就是當建立了很多的blade時，
搞的自己似乎不太好找，在這裡提供了我最近的原創作法，
如果雷同純屬巧合了。

先來看我弄了什麼:
如果您直接開啟下方的連結，因為網址後有帶了?border的參數，您就能看到我貼的標籤，label的名稱是blade 的view名稱。

https://www.ccc.tc/article/tag-my-laravel-blade-view?border

別外也補了drag的功能 ，並且點兩下可以拷貝。

https://www.ccc.tc/article/tag-my-laravel-blade-view?drag

本文中的程式碼可能無法完全適合您的網站，我只是提供一種想法跟參考的。
 

我的作法如下:

在自己的layout的head tag內加了border_component

    @if (isset($_GET['border']) || isset($_GET['drag']))
        @include('partials.border_component')
    @endif

我的border_component的內容如下:

<style>
    .root {
        position: relative;
        border: 2px solid red;
    }

    .root>label {
        border-radius: 3px;
        position: absolute;
        display: block !important;
        top: 0.2em;
        left: 10ex;
        z-index: 9999999;
        max-width: 220px;
        white-space: pre-wrap;
        color: white;
        border: 2px solid black;
        background-color: rgba(2, 2, 2, 0.55);
        padding-right: 2ex;
        padding-left: 2ex;
    }
</style>
<script>
    var randomColor = function() {
        var colors = ['#58508d', '#bc5090,#ff6361',
            '#ffa600', '#485cab', '#d7e6f7',
            '#19274b', '#869bfc', '#140f07',
        ];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    document.addEventListener("DOMContentLoaded", () => {

        document.querySelectorAll(".root>label").forEach(function(elm) {
            if (elm.tagName == "LABEL") {
                random_color = randomColor();
                elm.style.borderColor = random_color;
                elm.left = "300px";
                var rootElm = elm.closest('.root');
                if (rootElm) {
                    rootElm.style.borderColor = random_color;
                    //elm.style.left='0px';
                    @if (isset($_GET['drag']))
                        dragElement(elm);
                        elm.addEventListener("dblclick", (event) => {
                            event.preventDefault();
                            var x = document.createElement("INPUT");
                            x.setAttribute("type", "text");
                            x.value = event.target.innerHTML;
                            document.body.appendChild(x);
                            x.select();
                            /* Copy the text inside the text field */
                            document.execCommand("copy");
                            /* Alert the copied text */
                            alert("已拷貝: " + x.value);
                            x.remove();
                        });
                    @endif
                }
            }
        });
        Livewire.hook('element.initialized', (el, component) => {
            if (el.tagName == "LABEL") {
                random_color = randomColor();
                el.style.borderColor = random_color;

                var rootElm = el.closest('.root');
                if (rootElm) {
                    rootElm.style.borderColor = random_color;
                }
                @if (isset($_GET['drag']))
                    el.style.cursor = "grab";
                    dragElement(el);
                @endif
            }
        });

    });




    function dragElement(elmnt) {
        var pos1 = 0,
            pos2 = 0,
            pos3 = 0,
            pos4 = 0;

        elmnt.onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
</script>

註: 上方的class會抓root後的第一個label。

然後在您自己的ViewServiceProvider建立一個view_name出來。

我目前這個網站使用的Laravel為9.40.1，如果您使用舊版本，請自行Google相關語法。
為何下方要把.換成斜線，因為拷貝貼到VSCode時，開檔方便 。

關於ViewServiceProvider及ViewComposer您還不是很了解可到官網查看，或看我之前的文章後半有提到:

https://www.ccc.tc/article/my-browser-trait

View::composer('*', function ($view) {

    #把.換成斜線
    $view_name = str_replace(".","/",$view->name());

    $view->with([
        "view_name"=>$view_name,
    ]);

});

也就是說，所有的$view都能取得$view_name這個變數囉。

最後找到您想貼標籤的blade，在最上的TAG補上class="root"
然後緊接一個隱藏label，我是bootstrap環境，所以用class="d-none"就搞定啦。

@if ($paginator->hasPages())
    <div class="d-flex justify-content-center row root">
        <label class="d-none">{{$view_name}}</label>
        <div>
            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-sm m-0 float-right">

所以當URL傳入border時，就會載入HTML head中的partials.border_component，該檔案的CSS及Javascript就能替每個您覺的重要的View打標籤囉。