هل يمكنني وضع نموذج البحث في أعلى صفحة 404 الخاصة بنا؟

الدعم
1

يركز التصميم الحالي على الموضوعات الشائعة، والتي تميل بطبيعتها إلى أن تكون عامة. من المحتمل أن شخصًا ما يصادف خطأ 404 يبحث بدلاً من ذلك عن شيء محدد. بعيدًا عن التخمين السحري لما كان ذلك، يبدو أن توفير مربع بحث بشكل بارز سيكون مثاليًا. أعرف أنه موجود في الأسفل، ولكن… من الصعب العثور عليه بعض الشيء.) هل هناك طريقة سهلة لإعادة ترتيب هذا؟

وبينما نحن في ذلك، شيء يمتد عبر الصفحة بدلاً من الصندوق الصغير الحالي في الأسفل.

قد يكون من الجميل أيضًا ملء البحث مسبقًا بشيء تم إنشاؤه من عنوان URL الذي لم يتم العثور عليه. لكنني لم أفكر في الآثار الكاملة لذلك.

4 إعجابات
3

شيء كهذا؟

Screen Shot 2021-12-01 at 13.22.18
Screen Shot 2021-12-01 at 13.22.181152×761 71.1 KB

أعتقد أنه يجب أن يكون ممكنًا عن طريق إخفاء المكون page-not-found-search في الأسفل باستخدام display: none ثم إدراج الكود الخاص بمربع البحث في الأعلى باستخدام نقاط توصيل الإضافات: Using Plugin Outlet Connectors from a Theme or Plugin

يمكنك أيضًا إضافة بعض CSS لتعديل عرض منطقة النص. لاحظ أنني لم أختبر أيًا من هذا حقًا، لقد جربته مباشرة في وحدة تحكم المتصفح.

هذا هو الكود الخاص بمربع البحث:

<div class="row">
    <div class="page-not-found-search-top">
      <h2>Search this site</h2>
      <p>
        </p><form action="/search" id="discourse-search">
          <input type="text" name="q" value="">
          <button class="btn btn-primary">Search</button>
        </form>
      <p></p>
    </div>
</div>
3 إعجابات
4

نعم، أحببت ذلك كثيراً، شكراً! سأجرب ذلك لاحقاً اليوم.

إعجابَين (2)
5

هل يمكنك مساعدتي في معرفة المخرج الصحيح هنا؟ لقد استخدمت المفهوم من قبل لإضافة بعض النصوص التوضيحية إلى صفحة الشارات، ولكن (deprecated) Plugin outlet locations theme component لا يبدو أنه يعمل على صفحة 404 ولا يمكنني معرفة ما يجب وضعه في غلاف script.

إعجابَين (2)
6

يبدو أنه لا توجد منافذ إضافات في صفحة 404، ووفقًا لـ How to add custom JS code to the 404 pages? يجب عليك استخدام JavaScript نقي.

جرب إضافة شيء مثل هذا إلى علامة التبويب Body، في مكون سمة:

    <script type="text/javascript">
        var x = document.getElementsByClassName("page-not-found");
        var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
        x.item(0).innerHTML += search
    </script>

قد تحتاج إلى إجراء بعض التعديلات على CSS، جرب:

.page-not-found-search {
    display: none;
}

.page-not-found-search-top button {
    margin-left: 10px;
}

.page-not-found-search-top input {
    width: 600px;
}

آمل أن يساعد هذا!

8 إعجابات
7

نعم، لا توجد منافذ إضافات في صفحة 404 غير موجودة، تعمل بشكل رائع مع تعليماتك

الصق هذا داخل علامة BODY:

    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    x.item(0).innerHTML += search

والصق هذا في جزء CSS:

.page-not-found-search {
    display: none;
}

.page-not-found-search-top button {
    margin-left: 10px;
}

.page-not-found-search-top input {
    width: 600px;
}

تعمل على الهاتف المحمول أيضًا…

وشكراً على ردك

مع خالص التقدير،

6 إعجابات
8

هذا يعمل بشكل رائع. حان الوقت لأقوم بتخصيصه أكثر.

:+1:

تعديل: تسبب هذا في ظهور أخطاء في سجل الأخطاء الخاص بي.

TypeError: null is not an object (evaluating 'x.item(0).innerHTML') Url: https://mysite.com/theme-javascripts/33ba1ce8896576423974ff03c875fe32931690cc.js?__ws=mysite.com Line: 2

إعجاب واحد (1)
9

أرد على نفسي. لقد وضعت استدعاء .innerHTML في كتلة try/catch

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found");
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    try {
        x.item(0).innerHTML += search
    } catch (error) {
    }
</script>
3 إعجابات
10

نحن نعمل ونحن لا نملك أي خطأ من جانبنا
مع خالص التقدير.

إعجاب واحد (1)
11

شكرا @hhlp :slight_smile:

ويبدو رائعا! فريق Discourse، هل هناك سبب لعدم كون هذا هو الافتراضي؟

إعجاب واحد (1)
15

بالنظر إلى الالتزامات القديمة، يبدو أن موضع شريط البحث قد حدث للتو؟ موروث من المكان الذي كان فيه بحث جوجل سابقًا، والذي تمت إضافته مع الإصدار الأولي لـ Discourse.

أتفق على أنه يبدو أفضل في الأعلى.

4 إعجابات
16

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.