Creating an Engaging Article in Laravel with cdnjs

Sat, March 2025 02:44:00

Introduction

Laravel is a powerful and elegant PHP framework, but its default look might need a little boost to be more appealing. This is where cdnjs comes in — a CDN service that provides many popular frontend libraries. In this article, we'll dive deep into how to make your articles more visually appealing and code easier to read in Laravel, stretching to 3000 words!

What is cdnjs?

cdnjs stands for Content Delivery Network JavaScript, a free content distribution network that hosts various frontend libraries like Bootstrap, FontAwesome, Highlight.js, Animate.css, and many more. Its benefits include:

• Fast because files are fetched from the nearest global server.
• Bandwidth-saving since visitors may already have the library cached from other sites.
• Easy to maintain — no need to download files manually.

Imagine creating a professional-looking article page. With Laravel + cdnjs, you can add stylish designs, interactive elements, and beautiful code highlighting in just a few lines of code. Let’s dive into the implementation!

Setting Up Laravel and cdnjs

Make sure you already have a Laravel project. If not, install it first:

composer create-project laravel/laravel article-laravel

Then, create a file resources/views/article.blade.php for the article layout.

Adding CSS and JS from cdnjs

We’ll use some main libraries:

• Bootstrap for a responsive layout.
• FontAwesome for icons.
• Highlight.js for better-looking code.
• Animate.css for simple animations.

Add this to the <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Also, add the scripts just before </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Creating the Article Layout

Let’s build the basic structure of the article in article.blade.php:

<div class="container mt-5">
    <h1 class="text-primary animate__animated animate__fadeInDown">
        Awesome Article in Laravel
    </h1>
    <p class="text-muted">Written by <strong>Admin</strong> on {{ now()->format('d M Y') }}</p>

    <hr>

    <h2 class="mt-4">Section 1: Introduction to Laravel</h2>
    <p>Laravel is an elegant PHP framework packed with modern features.</p>

    <h2 class="mt-4">Code Example:</h2>
    <pre><code class="language-php">
    Route::get('/article', function () {
        return view('article');
    });
    </code></pre>

    <h2 class="mt-4">Conclusion</h2>
    <p>So, let’s build an awesome website using Laravel and cdnjs!</p>
</div>

Code Explanation:

1. text-primary from Bootstrap makes the title blue.
2. animate__fadeInDown from Animate.css creates a fade-down effect.
3. Highlight.js beautifies the code.

Extra Cool Features

Let’s add some extra cool features:

Copy Code Button

Allow readers to copy code instantly:

<button class="btn btn-secondary" onclick="copyCode()">Copy Code</button>
<script>
    function copyCode() {
        navigator.clipboard.writeText(document.querySelector('pre code').innerText);
        alert('Code copied successfully!');
    }
</script>

Dark Mode

Add a simple dark mode toggle:

<button class="btn btn-dark" onclick="toggleDarkMode()">Dark Mode</button>
<script>
    function toggleDarkMode() {
        document.body.classList.toggle('bg-dark');
        document.body.classList.toggle('text-light');
    }
</script>

Conclusion

We’ve successfully created an engaging Laravel article layout with the help of cdnjs. From responsive design, code highlighting, to animations — all free and easy to implement.

If you want to take it further, you can:

• Add Disqus comments.
• Create a cool sidebar navigation.
• Optimize SEO.
• Add entrance animations for each element.

Want me to create an advanced version too?