by Devin Yang
(This article was automatically translated.)

Published - 2 years ago ( Updated - 1 year ago )

Using Laravel's Blade Templates is quite easy to use, and you can get used to it after a long time.
But one thing is that when you build a lot of blades,
it seems not easy to find yourself, so I provide it here My recent original method,
if the similarity is purely coincidental.

Let's see what I did first:
If you open the link below directly, because there is a parameter with ?border after the URL, you can see the label I posted. The name of the label is The blade's view name.

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

In addition, the function of drag is also added, and it can be copied with two clicks.

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

The code in this article may not be completely suitable for your website, I just provide an idea and reference.
 

My approach is as follows:

Add border_component to the head tag of my layout

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

The content of my border_component is as follows:

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

Note: The above class will capture the first label after the root.

Then create a view_name in your own ViewServiceProvider.

The Laravel I am currently using on this website is 9.40.1. If you use an older version, please Google the relevant syntax yourself.
Why should . be replaced with a slash below, because when copying and pasting to VSCode, it is convenient to open the file.


About ViewServiceProvider and ViewComposer If you don’t know much about it, you can go to the official website to check it, or read the second half of my previous article:< /p>

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

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

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

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

});

In other words, all $views can get the variable $view_name.

Finally find the blade you want to label, and add class="root" to the top TAG
Then follow with a hidden label, I am in a bootstrap environment, so use class="d-none" Done.

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


So when the URL is passed to the border, it will load the partials.border_component in the HTML head, and the CSS and Javascript of this file can label each View that you think is important.

Tags: laravel teaching blade

Devin Yang

Feel free to ask me, if you don't get it.:)

No Comment

Post your comment

Login is required to leave comments