توجد عندي مشكله عند ارسال الايميل الى جيميل

Mansour Hussen · 10 ديسمبر

ما السبب يظهر هكذا تنسيقات

Mustafa Suleiman · 10 ديسمبر

أرجو توضيح الكود لديك وما الذي قمت به، حاول استخدام inline CSS ولديك مكتبة laravel-mail-css-inliner للقيام بذلك.

محمد عاطف17 · 10 ديسمبر

هل تقوم بتضمين ملفات ال css من روابط خارجية ؟ إذا كان كذلك فغالبا هذا هو سبب المشكلة حيث لن يقوم ال gmail أو أى بريد أخر بتحميل تلك الملفات الخاصة بالتنسيقات ولن يتم تطبيقها ، حيث يجب أن تكون التنسيقات (inline) في البريد نفسه.

لذلك إذا كنت تستخدم view خاص بك يجب تضمين التنسيقات هكذا مثلا :

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان البريد</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            direction: rtl;
        }
        .container {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .content {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>مرحبا،</h2>
        <div class="content">
            <p>نص البريد</p>
        </div>
    </div>
</body>
</html>

أما إذا كنت تستخدم القوالب الخاصة بلارافيل وأردت إضافة تنسيقات يمكنك تحقيق ذلك أولا من خلال تنفيذ الأمر التالي :

php artisan vendor:publish --tag=laravel-mail

ستجد أنه قد تم إضافة مجلد resources/views/vendor/mail لديك وبداخله ملفات المكونات والتنسيقات .

ولتعديل التنسيق ستجد ملف resources/views/vendor/mail/html/themes/default.css وهو الملف الإفتراضي الذي يستخدمه لارافيل في التنسيق الخاص بالإيميلات لذلك يمكنك إستخدام هذا الملف لتعديل التنسيقات.

أما إذا أردت إستخدام تنسيقات خاصة بك يمكنك إنشاء ملف في مجلد resources/views/vendor/mail/html/themes وفي ملف config/mail.php قم بتغير theme إلى إسم الملف الجديد الذي أنشأته.

Mansour Hussen · 10 ديسمبر

بتاريخ 25 دقائق مضت قال محمد عاطف17:
هل تقوم بتضمين ملفات ال css من روابط خارجية ؟ إذا كان كذلك فغالبا هذا هو سبب المشكلة حيث لن يقوم ال gmail أو أى بريد أخر بتحميل تلك الملفات الخاصة بالتنسيقات ولن يتم تطبيقها ، حيث يجب أن تكون التنسيقات (inline) في البريد نفسه.

لذلك إذا كنت تستخدم view خاص بك يجب تضمين التنسيقات هكذا مثلا :
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان البريد</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            direction: rtl;
        }
        .container {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .content {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>مرحبا،</h2>
        <div class="content">
            <p>نص البريد</p>
        </div>
    </div>
</body>
</html>
أما إذا كنت تستخدم القوالب الخاصة بلارافيل وأردت إضافة تنسيقات يمكنك تحقيق ذلك أولا من خلال تنفيذ الأمر التالي :
php artisan vendor:publish --tag=laravel-mail
ستجد أنه قد تم إضافة مجلد resources/views/vendor/mail لديك وبداخله ملفات المكونات والتنسيقات .

ولتعديل التنسيق ستجد ملف resources/views/vendor/mail/html/themes/default.css وهو الملف الإفتراضي الذي يستخدمه لارافيل في التنسيق الخاص بالإيميلات لذلك يمكنك إستخدام هذا الملف لتعديل التنسيقات.

أما إذا أردت إستخدام تنسيقات خاصة بك يمكنك إنشاء ملف في مجلد resources/views/vendor/mail/html/themes وفي ملف config/mail.php قم بتغير theme إلى إسم الملف الجديد الذي أنشأته.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إعادة تعيين كلمة المرور🔑</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap');

        body {
            background-color: #f5f4f1;
            color: #333;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            border: #e5e3e0 solid 1px;
            width: 50%;
            margin: auto;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        h1 {
            font-size: 24px;
            color: #333;
        }

        p {
            font-size: 16px;
            color: #555;
        }

        a {
            background-color: #00464d;
            text-align: center;
            color: white;
            padding: 5px;
            text-decoration: none;
            font-size: 16px;
            border-radius: 5px;
            display: inline-block;
            margin-top: 20px;
        }

        img {
            margin: auto;
            width: 200px;
        }
    </style>
</head>
<body>
<img src="{{asset('logo.png')}}" alt="">
<div class="container">
    <h1>إعادة تعيين كلمة المرور🔑</h1>
    <p>
        مرحبا
        <br/>
        لقد تلقينا طلبا لإعادة تعيين كلمة المرور الخاصة بك, إذا كنت أنت من طلب ذلك فقط انقر على الزر أدناه واختر كلمة
        مرور جديدة.
    </p>

    <a href="{{ $url }}">
        إعادة تعيين كلمة المرور
    </a>

    <p style="font-size: 16px; color: #555; margin-top: 20px;">
        إذا لم تطلب تغيير كلمة المرور، فلا تقلق! كلمة المرور الخاصة بك لا تزال امنة ويمكنك حذف هذا البريد الإلكتروني
    </p>

    <p style="font-size: 16px; color: #555;">
        شكرا،
        <br/>
        فريق منصة الابتعاث
    </p>
</div>
</body>
</html>

<?php

namespace App\Notifications;

use Illuminate\Auth\Notifications\ResetPassword as ResetPasswordNotification;
use Illuminate\Notifications\Messages\MailMessage;

class CustomResetPassword extends ResetPasswordNotification
{
    public function toMail($notifiable)
    {
        $url = url(env('CLIENT_URL')."password-reset/".$this->token."/".urlencode($notifiable->email));

        return (new MailMessage)
            ->subject('إعادة تعيين كلمة المرور')
            ->view('emails.reset', ['url' => $url]);
    }
}

تقريبا نفس فكرة بس تظهر زي مافي صورة لكن في ميلتراب تظهر تنسيقات

محمد عاطف17 · 10 ديسمبر

بتاريخ 3 دقائق مضت قال Mansour Hussen:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إعادة تعيين كلمة المرور🔑</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap');

        body {
            background-color: #f5f4f1;
            color: #333;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            border: #e5e3e0 solid 1px;
            width: 50%;
            margin: auto;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        h1 {
            font-size: 24px;
            color: #333;
        }

        p {
            font-size: 16px;
            color: #555;
        }

        a {
            background-color: #00464d;
            text-align: center;
            color: white;
            padding: 5px;
            text-decoration: none;
            font-size: 16px;
            border-radius: 5px;
            display: inline-block;
            margin-top: 20px;
        }

        img {
            margin: auto;
            width: 200px;
        }
    </style>
</head>
<body>
<img src="{{asset('logo.png')}}" alt="">
<div class="container">
    <h1>إعادة تعيين كلمة المرور🔑</h1>
    <p>
        مرحبا
        <br/>
        لقد تلقينا طلبا لإعادة تعيين كلمة المرور الخاصة بك, إذا كنت أنت من طلب ذلك فقط انقر على الزر أدناه واختر كلمة
        مرور جديدة.
    </p>

    <a href="{{ $url }}">
        إعادة تعيين كلمة المرور
    </a>

    <p style="font-size: 16px; color: #555; margin-top: 20px;">
        إذا لم تطلب تغيير كلمة المرور، فلا تقلق! كلمة المرور الخاصة بك لا تزال امنة ويمكنك حذف هذا البريد الإلكتروني
    </p>

    <p style="font-size: 16px; color: #555;">
        شكرا،
        <br/>
        فريق منصة الابتعاث
    </p>
</div>
</body>
</html>

<?php

namespace App\Notifications;

use Illuminate\Auth\Notifications\ResetPassword as ResetPasswordNotification;
use Illuminate\Notifications\Messages\MailMessage;

class CustomResetPassword extends ResetPasswordNotification
{
    public function toMail($notifiable)
    {
        $url = url(env('CLIENT_URL')."password-reset/".$this->token."/".urlencode($notifiable->email));

        return (new MailMessage)
            ->subject('إعادة تعيين كلمة المرور')
            ->view('emails.reset', ['url' => $url]);
    }
}

تقريبا نفس فكرة بس تظهر زي مافي صورة لكن في ميلتراب تظهر تنسيقات

بما أنه يظهر بشكل صحيح في mailtrap أعتقد أن سبب المشكلة أن الرسالة تصل إلى البريد الغير مرغوب فيه . يرجى نقل الرسالة من البريد ال spam إلى البريد الأساسي وأنظر هل يظهر البريد بالشكل الصحيح أم لا.