published: {{ post.published_date }}
-{{ post.title }}
-{{ post.text|linebreaksbr }}
-diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index c9341696806..0f9e33b9a56 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -17,16 +17,23 @@ concurrency: jobs: build: - runs-on: ubuntu-latest + runs-on: ubuntu-24.04 steps: - name: Checkout uses: actions/checkout@v4 with: persist-credentials: false + - uses: awalsh128/cache-apt-pkgs-action@v1 + with: + packages: calibre - name: Install and Build run: | + sudo apt install rename npm install npx honkit build + npx honkit epub + rename 's/^book/django-girls-tutorial/' book_*.epub + mv *.epub _book/ - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: @@ -40,7 +47,7 @@ jobs: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest + runs-on: ubuntu-24.04 steps: - name: Deploy to GitHub Pages id: deployment diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml new file mode 100644 index 00000000000..0b32ccf2020 --- /dev/null +++ b/.github/workflows/preview.yml @@ -0,0 +1,109 @@ +name: Preview + +on: + workflow_run: + workflows: + - Build + types: + - completed + +jobs: + preview-failed: + if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion != 'success' + runs-on: ubuntu-latest + steps: + - name: Download metadata artifact + run: gh run download '${{ github.event.workflow_run.id }}' --name pr + env: + GH_TOKEN: ${{ github.token }} + + - name: Read PR data + run: echo "PR_NUMBER=$(cat ./pr)" >> $GITHUB_ENV + + - name: Comment on PR + uses: marocchino/sticky-pull-request-comment@v2 + with: + number: ${{ env.PR_NUMBER }} + message: "The PR preview for ${{ github.event.workflow_run.head_sha }} could not be generated" + + preview: + if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' + runs-on: ubuntu-latest + steps: + # TODO: can this download from the existing pages or a cache? + - name: Checkout + uses: actions/checkout@v4 + with: + persist-credentials: false + + - name: Build current pages + run: | + npm install + npx honkit build + mv _book current + + - name: Download preview artifact + run: gh run download '${{ github.event.workflow_run.id }}' --name github-pages --dir preview + env: + GH_TOKEN: ${{ github.token }} + + - name: Remove indeterminism + run: | + find current/ preview/ -type f -exec sed -i '/gitbook.page.hasChanged/d' {} + + + - name: Create diff to current + run: | + diff -Nrwu --exclude search_index.json current/ preview/ > diff.patch || true + if [[ -s diff.patch ]] ; then + sudo apt-get update + sudo apt-get install -y diffstat python3-pygments + + mv diff.patch preview/diff.patch + pygmentize -o preview/diff.html -l diff -f html -O full preview/diff.patch + diffstat -l -p1 preview/diff.patch > preview/diff.txt + fi + + - name: Download metadata artifact + run: gh run download '${{ github.event.workflow_run.id }}' --name pr + env: + GH_TOKEN: ${{ github.token }} + + - name: Read PR data + run: echo "PR_NUMBER=$(cat ./pr)" >> $GITHUB_ENV + + - name: Set preview domain + run: echo "PREVIEW_DOMAIN=$(echo ${{ github.repository }} | tr / - )-${{ github.job }}-pr-${{ env.PR_NUMBER }}.surge.sh" >> $GITHUB_ENV + + - name: Install surge + run: npm install surge + + - name: Deploy to surge.sh + run: npx surge ./preview $PREVIEW_DOMAIN --token ${{ secrets.SURGE_TOKEN }} + + - name: Generate summary + run: | + echo "The PR preview for ${{ github.event.workflow_run.head_sha }} is available at [${{ env.PREVIEW_DOMAIN }}](https://${{ env.PREVIEW_DOMAIN }})" >> pr.md + echo "" >> pr.md + + if [[ -f preview/diff.txt ]] ; then + echo "The following output files are affected by this PR:" >> pr.md + sed -E "s#(.*)#- [\1](https://${{ env.PREVIEW_DOMAIN }}/\1)#" preview/diff.txt >> pr.md + else + echo "No diff compared to the current website" >> pr.md + fi + + if [[ -s preview/diff.patch ]] ; then + echo "" >> pr.md + echo "[show diff](https://${{ env.PREVIEW_DOMAIN }}/diff.patch)" >> pr.md + fi + + if [[ -f preview/diff.html ]] ; then + echo "" >> pr.md + echo "[show diff as HTML](https://${{ env.PREVIEW_DOMAIN }}/diff.html)" >> pr.md + fi + + - name: Comment on PR + uses: marocchino/sticky-pull-request-comment@v2 + with: + number: ${{ env.PR_NUMBER }} + path: pr.md diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index d70f6bad896..35fa00849fc 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -4,7 +4,7 @@ on: jobs: build: - runs-on: ubuntu-latest + runs-on: ubuntu-24.04 steps: - name: Checkout uses: actions/checkout@v4 @@ -15,3 +15,18 @@ jobs: run: | npm install npx honkit build + + - name: Upload artifact + uses: actions/upload-artifact@v4 + with: + name: github-pages + path: _book/** + + - name: Save PR metadata + run: | + echo ${{ github.event.number }} > ./pr + + - uses: actions/upload-artifact@v4 + with: + name: pr + path: ./pr diff --git a/LANGS.md b/LANGS.md index 751d6faf913..46a4163db80 100644 --- a/LANGS.md +++ b/LANGS.md @@ -1,20 +1 @@ * [🇺🇸 English](en/) -* [🇧🇬 Български (beta)](bg/) -* [🇨🇿 Čeština (beta)](cs/) -* [🇩🇪 Deutsch](de/) -* [🇬🇷 Ελληνικά (beta)](el/) -* [🇪🇸 Español (beta)](es/) -* [🇮🇷 فارسی (beta)](fa/) -* [🇫🇷 Français (beta)](fr/) -* [🇭🇺 Magyar (beta)](hu/) -* [🇦🇲 հայերեն (beta)](hy/) -* [🇮🇹 Italiano (beta)](it/) -* [🇯🇵 日本語](ja/) -* [🇰🇵/🇰🇷 한국어 (beta)](ko/) -* [🇵🇱 Polski](pl/) -* [🇧🇷 Português-brasileiro](pt/) -* [🇷🇺 Русский (beta)](ru/) -* [🇸🇰 Slovenčina (beta)](sk/) -* [🇹🇷 Türkçe (beta)](tr/) -* [🇺🇦 Українська](uk/) -* [🇨🇳 简体中文](zh/) diff --git a/README.md b/README.md index 1131903b568..75f6f9c1f29 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +[](https://app.codeanywhere.com/#https://github.com/DjangoGirls/tutorial) + # Django Girls Tutorial ~ 🖥 Source Code 🖥 ~ @@ -44,7 +46,7 @@ For contributing to the tutorial the following is needed to get started: * a [GitHub account](https://github.com) * in the case of complex edits familiarity with [Git command line basics](https://help.github.com/articles/set-up-git) or familiarity with an app ([Windows](https://windows.github.com/), [Mac](https://mac.github.com/)) to push your edits made on your computer to GitHub. -## Fork the repository +## Fork the repository {#fork-the-repository} First fork the [DjangoGirls/tutorial](https://github.com/DjangoGirls/tutorial) repository to your personal GitHub account: @@ -78,7 +80,7 @@ Markdown syntax is used to edit the individual pages of the tutorial. Save your changes and create a pull request as explained below. -## New content and complex changes +## New content and complex changes {#new-content-and-complex-changes} For adding new chapters, writing longer snippets of text or adding images, you need to get a copy of the tutorial to your local computer. @@ -132,8 +134,28 @@ Example: To git@github.com:miohtama/tutorial.git b37ca59..fe36152 contributing -> contributing -# Making a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) +# Restructuring the tutorial {#restructuring-the-tutorial} +Restructuring the tutorial is a major change that takes time so we have created a separate branch for these changes. + +To make contributions that address issues +[1777](https://github.com/DjangoGirls/tutorial/issues/1777) and [1792](https://github.com/DjangoGirls/tutorial/issues/1792), +[fork](#fork-the-repository) the repository your repository. + +Next you need to follow instructions for [cloning and setting up locally given in the section above](#new-content-and-complex-changes). + +Please make use of ["semantic linefeeds"](https://rhodesmill.org/brandon/2012/one-sentence-per-line/) a.k.a. +["semantic line breaks"](https://sembr.org/) for all paragraphs. +Though most of the Django Girls tutorial wasn't originally written that way, placing source line breaks at semantically meaningful spots in the text (and especially between sentences) facilitates both, commenting on individual statements or thoughts in the text as part of the review process, as well as future editing and diff-ing. + +As we restructure the tutorial, this would be a great change to introduce to the tutorial so please make sure the chapter you work on follow this pattern. + +All pull requests for changes aimed at restructuring the tutorial which address the issues +[1777](https://github.com/DjangoGirls/tutorial/issues/1777) and [1792](https://github.com/DjangoGirls/tutorial/issues/1792) +should be made to the `restructure-tutorial`. + +All other steps for creating a pull request are the same as those outlined in the section on [making a pull request below](#making-a-pull-request), just make sure you make the pull request against the `restructure-tutorial` branch. +# Making a pull request {#making-a-pull-request} After you have finished your changes you need to [create a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) on GitHub. DjangoGirls will get notified about the pull request, review your changes, suggest any corrections if needed and then *pull* your changes to the master version. In your own repository on GitHub press do *Compare & pull request* diff --git a/bg/GLOSSARY.md b/bg/GLOSSARY.md deleted file mode 100644 index 92a2c38234c..00000000000 --- a/bg/GLOSSARY.md +++ /dev/null @@ -1,3 +0,0 @@ -# редактор на код - -Редакторът на код е приложение, което ти позволява да съхраняваш своя код за да можеш да продължиш с него по-късно. Може да научиш откъде да свалиш от [главата Редактор на код](./code_editor/README.md) \ No newline at end of file diff --git a/bg/README.md b/bg/README.md deleted file mode 100644 index 43886769177..00000000000 --- a/bg/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# Django Girls ръководство - -[](https://gitter.im/DjangoGirls/tutorial) - -> Тази работа е лицензирана под Creative Commons Attribution-ShareAlike 4.0 International License. За да видите копие на този лиценз, посетете https://creativecommons.org/licenses/by-sa/4.0/ - -## Добре дошли - -Добре дошли в ръководството на Django Girls! Щастливи сме да те видим тук :) Ще те отведем на приключение зад кулисите на уеб-технологиите, като хвърлим бегъл поглед на всичко, което е необходимо за да накараме мрежата да проработи, така както я знаем. - -Както с всички непознати неща, това може да бъде малко трудно. Но не се притеснявай, вече имаш кураж да бъдеш тука, всичко ще бъде наред :) - -## Въведение - -Някога имал ли си чувтвото, че светът е свързан все повече и повече с технологиите и ти не си още част от него? Чудил ли си се как да създадеш уеб-сайт, но никога си нямал достатъчно мотивация да започнеш? Струвало ли ти се, че светът на софтуера е прекалено сложен за да започнеш да правиш нещо сам? - -Имаме добра новина за теб! Програмиране не е толкова трудно, колкото изглежда, и ние искаме да ти покажем колко лесно може да бъде това. - -Това ръководство няма магически да те превърне в програмист. Ако искаш да си добър ще ти трябват месеци или даже години учене и упражняване. Но ние искаме да покажем, че програмиране или създаване на уеб-сайтове не е толкова сложно, колкото изглежда. Ще се постараем да обясним в детайли, колкото се може по-добре, за да не се чувстваш уплашен от технологията. - -Надяваме се да те накараме да заобичаш технология толкова, колкото и ние я обичаме! - -## Какво ще научиш от това ръководство? - -След като приключиш с ръководството, ще имаш малко работещо уеб-приложение: твой собствен блог. Ще ти покажем как да го пуснеш в мрежата, така че другите да ти видят работата! - -Това ще изглежда (горе-долу) ето така: - - - -> Ако работиш с ръкводството сам, и нямаш инструктор който да ти помага в случай на някой проблем, имаме чат система за теб: [](https://gitter.im/DjangoGirls/tutorial). Помолихме нашите инструктори и миналите участници да са там от време на време и да помагат на другите с ръководството! Не се страхувай да задаваш въпроси тука! - -Добре, [хайде да започнем от начало...](./how_the_internet_works/README.md) - -## Следвайки ръководството вкъщи - -Изумително е да си част от занятията на Django Girls, но също разбираме, че не винаги е възможно да присъстваш на някое от тях. Затова ние те насърчаваме да пробваш да следиш ръководството вкъщи. За читатели у дома, понастоящем приготвяме видеа, които ще улеснят следването на ръководството само по себе си. Проектът е все още в процес на обработка, но все повече и повече неща скоро ще бъдат покрити на [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) YouTube канал. - -Във всяка вече покрита глава има линк, препращащ към съответното видео. - -## Относно и допринасяне - -Това ръководство е поддържано от [Django Girls](https://djangogirls.org/). Ако си намерил някакви грешки или искаш да актуализираш ръководството, моля, [следвай насоките за допринасяне](https://github.com/DjangoGirls/tutorial/blob/master/README.md). - -## Би ли искал да ни помогнеш да преведем ръководството на друг език? - -Понастоящем, преводите се съхраняват на платформа crowdin.com на този адрес: - -https://crowdin.com/project/django-girls-tutorial - -Ако твоят език не е изброен на [crowdin](https://crowdin.com/), моля [оставете заявка](https://github.com/DjangoGirls/tutorial/issues/new), информирайки ни за езика, за да можем да го добавим. \ No newline at end of file diff --git a/bg/SUMMARY.md b/bg/SUMMARY.md deleted file mode 100644 index c6859e9e51b..00000000000 --- a/bg/SUMMARY.md +++ /dev/null @@ -1,35 +0,0 @@ -# Обобщение - -* [Въведение](README.md) -* [Инсталиране](installation/README.md) - * [Команден ред](installation/README.md#command-line) - * [Python](installation/README.md#python) - * [Редактор на код](installation/README.md#code-editor) - * [Виртуална среда](installation/README.md#virtualenv) - * [Django](installation/README.md#django) - * [Git](installation/README.md#git) - * [GitHub](installation/README.md#github) - * [PythonAnywhere](installation/README.md#pythonanywhere) -* [Инсталиране (chromebook)](chromebook_setup/README.md) -* [Как работи интернет](how_the_internet_works/README.md) -* [Въведение в команден ред](intro_to_command_line/README.md) -* [Инсталиране на Python](python_installation/README.md) -* [Редактор на код](code_editor/README.md) -* [Въведение в Python](python_introduction/README.md) -* [Какво е Django?](django/README.md) -* [Инсталиране на Django](django_installation/README.md) -* [Вашият първи проект с Django!](django_start_project/README.md) -* [Django модели](django_models/README.md) -* [Администриране на Django](django_admin/README.md) -* [Внедряване!](deploy/README.md) -* [Django URL адреси](django_urls/README.md) -* [Django изгледи - време за създаване!](django_views/README.md) -* [Въведение в HTML](html/README.md) -* [Django ORM (Querysets)](django_orm/README.md) -* [Динамични данни в шаблони](dynamic_data_in_templates/README.md) -* [Django шаблони](django_templates/README.md) -* [CSS - направи го красиво](css/README.md) -* [Разширяване на шаблони](template_extending/README.md) -* [Разшири своето приложение](extend_your_application/README.md) -* [Django Форми](django_forms/README.md) -* [Какво следва?](whats_next/README.md) \ No newline at end of file diff --git a/bg/chromebook_setup/README.md b/bg/chromebook_setup/README.md deleted file mode 100644 index d21dc1f556d..00000000000 --- a/bg/chromebook_setup/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Настройка на Chromebook - -> **Бележка** Ако вече сте минали през стъпките за инсталиране, няма нужда да правите това отново - можете да прескочите направо към [Въведение в Python](../python_introduction/README.md). - -{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/bg/chromebook_setup/instructions.md b/bg/chromebook_setup/instructions.md deleted file mode 100644 index a9f353d61c7..00000000000 --- a/bg/chromebook_setup/instructions.md +++ /dev/null @@ -1,73 +0,0 @@ -Можеш да [пропуснеш този раздел](http://tutorial.djangogirls.org/en/installation/#install-python), ако не използваш Chromebook. Ако използвате, опитът ви в инсталацията ще бъде малко по-различен. Можете да игнорирате останалата част от инструкциите за инсталиране. - -### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9) - -Cloud IDE е инструмент, който ти дава редактор на код и достъп до компютър, работещ с Интернет, където можеш да инсталираш, пишеш и пускаш софтуер. За продължителността на ръководството, cloud IDE ще ти служи като твоя *локална машина*. Все пак ще пишеш команди в терминал, също като твоите съученици на OS X, Ubuntu или Windows, но той ще бъде свързан с компютър, работещ някъде другаде, който cloud IDE прави за теб. Ето инструкциите за cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9). Можете да изберете един от cloud IDE интерфейси и да следвате инструкциите за cloud IDE. - -#### PaizaCloud Cloud IDE - -1. Отиди на [PaizaCloud Cloud IDE](https://paiza.cloud/) -2. Направи акаунт -3. Натисни *New Server* и избери Django приложение -4. Натисни бутон на Терминал (от лявата страна на прозореца) - -Сега трябва да виждаш интерфейс със странична лента, бутони са отляво. Натисни бутона "Terminal" за да ви отвори прозорец със следния надпис: - -{% filename %}Terminal{% endfilename %} - - $ - - -Терминалът на PaizaCloud Cloud IDE е готов за твоите инструции. Можеш да увеличиш прозореца за да го направиш малко по-голям. - -#### AWS Cloud9 - -Понастоящем, Cloud 9 изисква от теб да се регистрираш с AWS и да въведеш информация за кредитната си карта. - -1. Инсталирай Cloud 9 от [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) -2. Отиди на [c9.io](https://c9.io) и натисни *Get started with AWS Cloud9* -3. Регистрирай се за AWS акаунт (изисква информация за кредитна карта, но можеш да го използваш безплатно) -4. В AWS Dashboard, напиши *Cloud9* в лентата за търсене и натисни -5. В Cloud 9 таблото, натисни *Create environment* -6. Наречи го *django-girls* -7. Конфигурирайки настройките, избери *Create a new instance for environment (EC2)* за "Environment Type" и *t2.micro* "Instance type" (трябва да пише "Free-tier eligible."). Настройката за икономия на разходи по подразбиране е добре, също може да запазиш и другите както са по подразбиране. -8. Натисни *Next step* -9. Натисни *Create environment* - -Сега трябва да видите интерфейс със странична лента, голям основен прозорец с малко текст и малък прозорец в долната част, който изглежда като нещо подобно: - -{% filename %}bash{% endfilename %} - - yourusername:~/workspace $ - - -Тази долна зона е вашият терминал. Можете да използвате терминала за изпращане на инструкции до отдалечения компютър Cloud 9. Можете да промените размера на прозореца, за да го направите малко по-голям. - -### Виртуална среда - -Виртуална среда (наричана още virtualenv) е като частна кутия, в която можем да запълним полезен компютърен код за проект, над който работим. Ние ги използваме, за да държим различните части от код, които искаме за отделните ни проекти, разделени, така че нещата да не се смесват между проектите. - -Пусни: - -{% filename %}Cloud 9{% endfilename %} - - mkdir djangogirls - cd djangogirls - python3.6 -mvenv myvenv - source myvenv/bin/activate - pip install django~={{ book.django_version }} - - -(имайте предвид, че на последния ред използваме тилд, последван от знак за равенство: `~=`). - -### GitHub - -Направи [GitHub](https://github.com) акаунт. - -### PythonAnywhere - -Урокът за Django Girls включва раздел за това, което се нарича Прехвърляне, което е процесът на приемане на кода, който захранва новото ви уеб приложение и го премества на обществено достъпен компютър (наречен сървър), за да могат другите хора да виждат работата ви. - -Тази част е малко странна, когато правим урока в Chromebook, тъй като вече използваме компютър, който е в Интернет (за разлика от, да речем, лаптоп). Въпреки това, все още е полезно, тъй като можем да мислим за работното пространство на Cloud 9 като място за нашата „текуща“ работа и Python Anywhere като място за показване на нашите неща, когато те станат по-завършени. - -По този начин се регистрирайте за нов акаунт в Python Anywhere на адрес [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/bg/code_editor/README.md b/bg/code_editor/README.md deleted file mode 100644 index 8d3daf476a1..00000000000 --- a/bg/code_editor/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Редактор на код - -> За читателите у дома: тази глава е разгледана във видеото [Инсталиране на Python & Редактор на код](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). - -На път сте да напишете първия си ред код, така че е време да изтеглите редактор на код! - -> **Забележка** Ако използвате Chromebook, пропуснете тази глава и се уверете, че следвате инструкциите [Настройка на Chromebook](../chromebook_setup/README.md). Облачният IDE, който сте избрали (PaizaCloud Cloud IDE или AWS Cloud9) включва редактор на код и когато отворите файл във вашия IDE от менюто File, автоматично ще използвате редактора. -> -> ** Забележка ** Може да сте направили това по-рано в главата за инсталиране - ако е така, можете да прескочите веднага до следващата глава! - -{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/bg/code_editor/instructions.md b/bg/code_editor/instructions.md deleted file mode 100644 index 283b179e98f..00000000000 --- a/bg/code_editor/instructions.md +++ /dev/null @@ -1,37 +0,0 @@ -Има много различни редактори и това до голяма степен се свежда до личните предпочитания. Повечето програмисти на Python използват сложни, но изключително мощни IDE (интегрирани среди за разработка), като PyCharm. Като начинаещ обаче това вероятно е по-малко подходящо; нашите препоръки са еднакво мощни, но много по-прости. - -Нашите предложения са по-долу, но не се колебайте да попитате ментора си какви са техните предпочитания - по-лесно ще получите помощ от тях. - -## Visual Studio Code - -Visual Studio Code е редактор за програмен код, разработен от Microsoft за Windows, Linux и macOS. Той включва поддръжка за отстраняване на грешки, вграден Git контрол, подчертаване на синтаксис, интелигентно попълване на код, фрагменти и рефакторинг на код. - -[Изтеглете го тук](https://code.visualstudio.com/) - -## Gedit - -Gedit е безплатен редактор с отворен код, достъпен за всички операционни системи. - -[Изтеглете го тук](https://wiki.gnome.org/Apps/Gedit#Download) - -## Sublime Text - -Sublime Text е много популярен редактор с безплатен период за ползване и е достъпен за всички операционни системи. - -[Изтеглете го тук](https://www.sublimetext.com/) - -## Atom - -Atom е друг популярен редактор. Той е безплатен, с отворен код и се предлага за Windows, OS X и Linux. Atom е разработен от [GitHub](https://github.com/). - -[Изтеглете го тук](https://atom.io/) - -## Защо инсталираме редактор на код? - -Може би се чудите защо инсталираме този специален софтуер за редактиране на код, вместо да използваме нещо като Word или Notepad. - -Първата причина е, че кодът трябва да бъде **обикновен текст**, а проблемът с програми като Word и Textedit е, че те всъщност не произвеждат обикновен текст, те създават богат текст (с шрифтове и форматиране), използвайки персонализирани формати като [RTF (формат на обогатен текст)](https://en.wikipedia.org/wiki/Rich_Text_Format). - -Втората причина е, че редакторите на код са специализирани за редактиране на код, така че те могат да предоставят полезни функции като подчертаване на код с цвят според значението му или автоматично затваряне на кавички. - -Ще видим всичко това в действие по-късно. Скоро ще помислите за надеждния си стар редактор на код като за един от любимите си инструменти. :) diff --git a/bg/css/README.md b/bg/css/README.md deleted file mode 100644 index f73e52a41be..00000000000 --- a/bg/css/README.md +++ /dev/null @@ -1,305 +0,0 @@ -# CSS - направи го красиво! - -Блогът ни все още изглежда доста грозен, нали? Време е да го направите хубав! За това ще използваме CSS. - -## Какво е CSS? - -Cascading Style Sheets (CSS) е език, използван за описание на външния вид и форматирането на уебсайт, написан на език за маркиране (като HTML). Отнасяйте се към него като грим за вашата уеб страница. ;) - -Но не искаме отново да започнем от нулата, нали? Още веднъж ще използваме нещо, което програмистите пуснаха в интернет безплатно. Преосмислянето на колелото не е забавно. - -## Нека използваме Bootstrap! - -Bootstrap е една от най-популярните фреймуорки за HTML и CSS за разработване на красиви уебсайтове: https://getbootstrap.com/ - -Той е написан от програмисти, които са работили за Twitter. Сега тя е разработена от доброволци от цял свят! - -## Инсталирайте Bootstrap - -За да инсталирате Bootstrap, отворете вашия файл `.html` в редактора на кода и го добавете в секцията `
`: - -{% filename %}blog/templates/blog/post_list.html{% endfilename %} - -```html - - -``` - -Това не добавя никакви файлове към вашия проект. Той просто сочи файлове, които съществуват в Интернет. Затова продължете напред, отворете уебсайта си и актуализирайте страницата. Ето го! - - - -Вече изглежда по-хубав! - -## Статични файлове в Django - -Накрая ще разгледаме по-подробно тези неща, които наричахме **статични файлове**. Статичните файлове са всички ваши CSS и изображения. Съдържанието им не зависи от контекста на заявката и ще бъде едно и също за всеки потребител. - -### Къде да сложа статични файлове за Django - -Django вече знае къде да намери статичните файлове за вграденото приложение "admin". Сега трябва да добавим статични файлове за нашето собствено приложение, `blog`. - -Правим това, като създаваме папка, наречена `static` в блог приложението: - - djangogirls - ├── blog - │ ├── migrations - │ ├── static - │ └── templates - └── mysite - - -Django автоматично ще открива всички папки, наречени 'static', в която и да е от папките на вашите приложения. Тогава той ще може да използва тяхното съдържание като статични файлове. - -## Вашият първи CSS файл! - -Нека сега създадем CSS файл, за да добавим свой собствен стил към вашата уеб страница. Създайте нова директория, наречена `css` във вашата `static` директория. След това създайте нов файл, наречен `blog.css` вътре в тази директория `css`. Готови? - - djangogirls - └─── blog - └─── static - └─── css - └─── blog.css - - -Време е да напишете малко CSS! Отворете файла `blog/static/css/blog.css` във вашия редактор на код. - -Тук няма да навлизаме твърде дълбоко в персонализирането и научаването на CSS. Има препоръка за безплатен CSS курс в края на тази страница, ако искате да научите повече. - -Но нека направим поне малко. Може би бихме могли да променим цвета на заглавията си? За да разберат цветовете, компютрите използват специални кодове. Тези кодове започват с `#`, последвани от 6 букви (A–F) и цифри (0–9). Например кодът за синьо е `#0000FF`. Можете да намерите цветовите кодове за много от цветовете тук: http://www.colorpicker.com/. Можете също така да използвате [предварително определени цветове](http://www.w3schools.com/colors/colors_names.asp), като ` red ` и ` green `. - -Във вашия `blog/static/css/blog.css` файл трябва да добавите следния код: - -{% filename %}blog/static/css/blog.css{% endfilename %} - -```css -h1 a, h2 a { - color: #C25100; -} - -``` - -`h1 a` е CSS селектор. Това означава, че прилагаме стиловете си към всеки `a` елемент вътре в елемент `h1`; селекторът `h2 a` прави същото за елементи `h2`. Така че, когато имаме нещо като `