Next.js қолданбаларын орналастыру

Осы уақытқа дейін Tailwind көмегімен мақаланы, құжатты немесе блог жазбасын жасауға тырысу типографияны және көптеген күрделі CSS-ті түсінуді қажет ететін жалықтыратын тапсырма болды.

Әдепкі бойынша, Tailwind абзацтардан, тақырыптардан, тізімдерден және басқалардан барлық әдепкі шолғыш мәнерлерін жояды. Сайып келгенде, бұл қолданбаның пайдаланушы интерфейстерін жасау үшін өте пайдалы, өйткені сіз пайдаланушы агентінің стильдерін жоюға аз уақыт жұмсайсыз, бірақ CMS немесе markdown файлындағы пішімделген мәтіндік редактордан алынған кез келген мазмұнды сәндеуге тырысқанда, бұл таңқаларлық және интуитивті емес болуы мүмкін.

Біз бұл туралы көптеген шағымдар аламыз, өйткені адамдар бізге үнемі сұрақтар қояды:

Неліктен Tailwind менің h1 элементтерім үшін әдепкі мәнерлерді жояды? Мұны қалай өшіруге болады? Мен барлық басқа негізгі стильдерді жоғалтқан кезде не айтасыз? Біз сізді естиміз, бірақ біздің негізгі стильдерімізді өшіру сіз шынымен қалайтын нәрсе екеніне сенімді емеспіз. Бақылау тақтасының пайдаланушы интерфейсінің бөлігі ретінде p элементін пайдаланған сайын тітіркендіргіш өрістерді жойғыңыз келмейді. Мен сіздің блог жазбаларыңызда пайдаланушы агентінің стильдерін қолданғыңыз келетініне күмәнданамын - сіз олардың қорқынышты емес, таңқаларлық көрінуін қалайсыз.

@tailwindcss/typography плагині-бұл біздің негізгі стильдерімізді өшіру сияқты кез-келген ақымақтықты жасаудағы кемшіліктерсіз Сізге өзіңіз қалаған нәрсені беруге тырысуымыз.

Ол кәдімгі HTML мазмұнының кез келген блогына қолдануға және оны әдемі, жақсы пішімделген құжатқа айналдыруға болатын жаңа prose класын қосады:

<article class="prose">
  <h1>Ірімшік қосылған сарымсақ наны: ғылым бізге не айтады</h1>
  <p>
    Көптеген жылдар бойы ата аналар сарымсақ нанының денсаулыққа пайдасы туралы
    айтты балаларына арналған ірімшікпен, осындай культтік мәртебеге ие болған
    тағаммен біздің мәдениетімізде балалар жиі жылы ірімшік орамында киінеді
    Хэллоуин.
  </p>
  <p>
    Бірақ жақында жүргізілген зерттеу көрсеткендей, әйгілі тағамдар мыналармен
    байланысты болуы мүмкін бүкіл елде пайда болатын құтыру жағдайларының
    сериясы.
  </p>
</article>

Плагинді және оған кіретін мүмкіндіктерді пайдалану туралы қосымша ақпарат алу үшін құжаттаманы қараңыз.

Осы сәттен бастап не күтуге болады

Осыдан шығатын нәрсе-бұл плагиннің өзін тамақтандыру үшін жазған абсолютті бос сөз. Ол Мен ойлаған барлық ақылға қонымды типографиялық элементтерді қамтиды, мысалы қалың мәтін, ретсіз тізімдер, реттелген тізімдер, код блоктары, блок тырнақшалары және тіпті курсив.

It's important to cover all of these use cases for a few reasons:

1. Біз бәрі жақсы қораптан көрінгенін қалаймыз.
2. Бұл шын мәнінде бірінші себеп, бұл плагиннің барлық мәні.
3. Міне, үш тармақтан тұратын тізімнің екі тармақтан гөрі шынайы болып көрінуінің үшінші себебі.

Енді біз басқа тақырып стилін қолданамыз.

Типография қарапайым болуы керек

Сонымен, бұл сізге арналған тақырып — егер Біз бақытты болсақ және жұмысты дұрыс орындасақ, бұл өте орынды көрінеді.

Бір дана адам маған типография туралы былай деді:

Егер сіз материалдарыңыздың қоқыс сияқты көрінуін қаламасаңыз, типография өте маңызды. Мұны жақсы жасаңыз, сонда ол жаман болмайды.

Бұл жерде суреттердің әдепкі бойынша жақсы көрінуі маңызды шығар:

Танымал пікірге қарамастан, Lorem Ipsum тек кездейсоқ мәтін емес. Ол біздің дәуірімізге дейінгі 45 жылы классикалық латын әдебиетінен бастау алады, демек ол 2000 жылдан асқан.

Енді Мен сізге жақсы көрінетініне көз жеткізу үшін ретсіз тізімнің мысалын көрсетемін:

• Міне, осы тізімдегі бірінші тармақ.
• Бұл мысалда біз элементтер санын азайтамыз.
• Кейінірек біз ұзын және күрделі тізім элементтерін қолданамыз.

Және бұл бөлім аяқталады.

Егер біз тақырыптарды бірінен артынан бірін қойсақ ше?

Біз оны да жақсы көрінетініне көз жеткізуіміз керек.

Кейде тақырыптар бір-бірінің астында орналасады. Мұндай жағдайларда сіз көбінесе екінші тақырыптың жоғарғы өрісін алып тастауыңыз керек, өйткені әдетте тақырыптар абзацтан кейін тақырыптан гөрі бір-біріне жақынырақ болса жақсы көрінеді.

Тақырып абзацтан кейін болғанда …

Тақырып абзацтан кейін болған кезде, жоғарыда айтқанымдай, бізге көбірек орын қажет. Енді неғұрлым күрделі тізім қандай болатынын қарастырайық.

• Мен мұны тізім элементтерінің тақырыптары болған кезде жиі жасаймын.

  Қандай да бір себептермен, менің ойымша, бұл керемет көрінеді және бұл өкінішті, өйткені стильдерді дұрыс таңдау өте қиын.

  Бұл тізім элементтерінде менде жиі екі немесе үш абзац болады, сондықтан ең қиыны - абзацтар арасындағы интервалдарды, тізім элементінің тақырыбын және жеке тізім элементтерін мағыналы ету. Шынымды айтсам, өте қатал, сіз бұлай жазбауыңыз керек деген күшті дәлел келтіре аласыз.

• Бұл тізім болғандықтан, маған кем дегенде екі элемент қажет.

  Мен тізімнің алдыңғы тармағында не істеп жатқанымды түсіндірдім, бірақ тізім тек бір элемент болса, тізім болмас еді және біз оның шынайы көрінгенін қалаймыз. Сондықтан мен осы екінші тізім элементін қостым, сондықтан стильдерді жазу кезінде шынымен назар аударатын нәрсе болды.

• Үшінші тармақты қосу жақсы болар еді.

  Менің ойымша, екі элементті пайдалану жақсы болар еді, бірақ үшеуі одан да жаман емес, және менде ерікті енгізу элементтерін жасауда қиындықтар болмағандықтан, мен оны да қосар едім.

Мұндай тізімнен кейін менде әдетте қорытынды мәлімдеме немесе абзац болады, өйткені ол тақырыпқа бірден ауысып, біртүрлі көрінеді.

Әдепкі бойынша, код жақсы көрінуі керек.

Менің ойымша, адамдардың көпшілігі highlight.js немесе Prism немесе егер олар өздерінің код блоктарын сәндегісі келсе, бірақ синтаксисті бөлектемей-ақ, оларды қораптан жақсы етіп көрсетуге кедергі жасамас еді.

Міне, әдепкі tailwind.config.js файл жазу сәтіне ұқсайды:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Сізге бұл өте тартымды болады деп үміттенемін.

Кірістірілген тізімдер туралы не деуге болады?

Кірістірілген тізімдер, негізінен, әрқашан нашар көрінеді, сондықтан Medium сияқты редакторлар сізге мұны істеуге мүмкіндік бермейді, бірақ менің ойымша, сіздердің кейбіреулеріңіз мұны істегіңіз келетіндіктен, біз ең болмағанда оны іске қосудың ауыртпалығын өз мойнымызға алуымыз керек.

1. Кірістірілген тізімдер сирек жақсы идея.
   • Сіз өзіңізді шынымен "ұйымдастырылған" немесе басқа нәрсе сияқты сезінуіңіз мүмкін, бірақ сіз экранда оқуға қиын өрескел пішінді жасайсыз.
   • Пайдаланушы интерфейсіндегі кірістірілген навигация да жаман идея, бәрін мүмкіндігінше тегіс етіп жасаңыз.
   • Бастапқы кодқа көптеген қалталарды салу да көмектеспейді.
2. Бізге көбірек заттар қажет болғандықтан, міне, тағы біреуі.
   • Біз өзімізді екі деңгейден астам терең төсеумен алаңдайтынымызға сенімді емеспін.
   • Екеуі тым көп, үшеуі жаман идея болатынына кепілдік береді.
   • Егер сіз төрт деңгейдің тереңдігінде ұя салсаңыз, сіз түрмеде отырасыз.
3. Екі тармақ шын мәнінде тізім емес, бірақ үшеуі жақсы.
   • Тағы да, егер сіз адамдар сіздің мазмұныңызды шынымен оқығанын қаласаңыз, тізімдерді орналастырмаңыз.
   • Ешкім оған қарағысы келмейді.
   • Мен мұны төсеу туралы өзімізді алаңдатуымыз керек деп ренжідім.

Markdown-дағы тізімдердегі ең жағымсыз нәрсе, егер тізім элементінде бірнеше абзац болмаса, <li> элементтеріне <p> бала тегі берілмейді. Бұл менің де осы тітіркендіргіш жағдайды қалай сәндеу керектігі туралы алаңдауым керек дегенді білдіреді.

• Мысалы, тағы бір кірістірілген тізім.

  Бірақ бұл жолы екінші абзацпен.

  • Бұл тізім элементтерінде <p>тегтері болмайды
  • Өйткені олар әрқайсысында бір жолдан тұрады

• Бірақ жоғарғы деңгейдегі тізімнің осы екінші элементінде олар болады.

  Бұл абзацтағы бос орындарға байланысты әсіресе тітіркендіргіш.

  • Мұнда көріп отырғаныңыздай, мен екінші жолды қосқандықтан, бұл тізім элементінде <p> тегі бар.

    Айтпақшы, бұл мен айтып отырған екінші жол.

  • Соңында, міне, тізімнің тағы бір элементі, сондықтан ол тізімге көбірек ұқсайды.

• Тізімді жабу элементі, бірақ кірістірілген тізім жоқ, өйткені неге болмасқа?

Соңында, осы бөлімді жабатын сөйлем.

Біз сәндеуіміз керек басқа элементтер бар

Мен сілтемелерді атап өтуді ұмытып кеттім, мысалы Tailwind CSS веб-сайтына сілтеме. Біз оларды көгілдір етіп жасадық, бірақ бұл кеше болды, сондықтан біз қою сұр түсті таңдадық, ол өткір болып көрінеді.

Біз тіпті кесте мәнерлерін қостық, оны тексеріңіз:

Сондай-ақ, кірістірілген кодтың жақсы көрінетініне көз жеткізуіміз керек, мысалы, <span> элементтері туралы сөйлескім келсе немесе @tailwindcss/typographyтуралы жақсы жаңалықтар айтқым келсе.

Кейде мен тіпті тақырыптарда 'кодты' қолданамын

Бұл жаман идея болса да, мен оны тарихи түрде жақсы етіп көрсету қиынға соқты. Бұл трюк шын мәнінде _ "код блоктарын кері тырнақшаға орау" _ өте жақсы жұмыс істейді.

Бұрын жасаған тағы бір нәрсе-сілтеменің ішіне код белгісін қою, мысалы, егер Мен сізге tailwindcss/docs туралы айтқым келсе сақтау. Маған кері белгілердің астын сызу ұнамайды, бірақ бұл оны болдырмау үшін қажет ақылсыздықтың қажеті жоқ.

Біз әлі h4 қолданған жоқпыз

Бірақ қазір бізде бар. Мазмұныңызда h5 немесе h6 қолданбаңыз, Medium тек екі тақырып деңгейін қолдайды, сіз жануарлар емессіз. Шынымды айтсам, егер сіз h5 немесе h6 қолдансаңыз, сізге айқайлау үшін алдын ала жалған элементін қолдануды ойладым.

Біз оларды қораптан мүлдем шығармаймыз, өйткені h4 элементтері соншалықты кішкентай, олар негізгі көшірмемен бірдей. Біз h5 - пен не істеуіміз керек, оны негізгі көшірмеден кішірек жасауымыз керек пе? Жоқ, рахмет.

Дегенмен, біз әлі де күрделі тақырыптар туралы ойлануымыз керек.

Біз де 'h4' элементтерін бұрмайтынымызға көз жеткізейік.

Уф, егер сәттілік болса, біз осы мәтіннің үстінен тақырыптар шығардық және олар өте жақсы көрінеді.

Мұның бәрі лайықты өлшемдегі мәтін блогымен аяқталуы үшін соңғы абзацты осында қосайық. Неліктен бұлай болғанын қалайтынымды түсіндіре алмаймын, бірақ менің ойымша, егер тақырып құжаттың соңына тым жақын болса, бәрі біртүрлі немесе теңгерімсіз болып көрінеді деп ойлаймын.

Мен мұнда жазғаным жеткілікті ұзақ болуы мүмкін, бірақ бұл соңғы сөйлемді қосу зиян тигізбейді.

GitHub Flavored Markdown

Мен сондай-ақ remark-gfm көмегімен GitHub Flavored Mardown қолдауын қостым.

Remark-gfm көмегімен біз өз бағамызда бірнеше қосымша мүмкіндіктер аламыз. Мысал: Автоматты сілтеме литералдары.

Сілтеме сияқты www.example.com немесе https://example.com ол автоматты түрде a тегіне түрлендіріледі.

Бұл электрондық пошта сілтемелері үшін де жұмыс істейді: contact@example.com .