ugurakcil / voyager-booster
一个包含Laravel-Voyager修复和增强功能的Laravel包
v0.1.9
2024-04-25 12:11 UTC
Requires
- php: ^5.5 || ^7.0 || ^8.0
- tcg/voyager: ^1.6
Requires (Dev)
- laravel/framework: ~6.0|~7.0|~8.0|~9.0|~10.0
README
Laravel Voyager是一个快速安装和配置的框架。为了创建规范、易于开发的代码,必须遵守现有模式的规则。
这里详细描述了初始安装步骤以及在开发过程中需要注意的事项。
TODO:编写版本信息
初始安装
- 定义一个数据库名称,如dex_website。
- 设置为utf8mb4_unicode_ci
- 然后导入项目根目录下的database.sql文件
在终端中执行以下操作;
# virtual host tanımlamalarınızı yaptıktan sonra # bu repoyu klonlayın # sondaki voyager-base kurulacak klasörün adıdır, # proje adına göre değiştirin git clone https://github.com/ugurakcil/voyager-base.git voyager-base # kurulum yapılan dizine girin cd voyager-base # bağımlılıkları yükleyin composer install # env dosyasını kopyalayın cp .env.example .env
调整Env文件中的以下区域;
APP_NAME APP_URL DB_DATABASE DB_USERNAME DB_PASSWORD MAIL_MAILER MAIL_HOST MAIL_PORT MAIL_USERNAME MAIL_PASSWORD MAIL_ENCRYPTION MAIL_FROM_ADDRESS MAIL_FROM_NAME NOCAPTCHA_SECRET NOCAPTCHA_SITEKEY
执行Artisan操作;
# Cookie'ler için sabit tekil anahtar yaratır php artisan key:generate # Storage klasörünü public_html altına symlinkler php artisan storage:link
如果在Linux上遇到权限错误,请为相关文件夹运行chmod。
前端使用
一般前端使用信息
- 所有样式、图像和脚本都在
public_html/assets/front
文件夹中 - HTML层在
resources/viewa/front
文件夹中 - 第三方插件在
public_html/assets/front/addons
文件夹中。请不要在此文件夹中定义自定义脚本或样式、添加图像等。第三方插件可能会被删除、更新到新版本,在这种情况下,您添加的代码将会丢失。请使用简短且易于理解的插件名称。使用小写字母。在任何文件名中不要使用中文字符和空格。如果您需要添加新版本,请像在public_html/assets/front/addons/fontawesome
文件夹中那样,使用完整版本号添加。 - 将图像按类别放入
public_html/assets/front/img
文件夹中。例如,由于存在不同尺寸的favicon,因此所有favicon都在public_html/assets/front/img/favicons
文件夹中。默认favicon是public_html/assets/front/img/favicons/favicon.ico
文件。 - 在js文件夹中,将网站中肯定会使用并且在网站开发后仍然可能继续使用的脚本添加到
main.js
中。如果您为某个特定的section准备了特定的代码,那么尽管这些代码在网站的几乎所有地方都可能存在,但您仍然需要将它们添加到单独的脚本文件中。例如,如果您有一个contact section,那么您应该像这样将contact.js
分开。将页面特有的功能或section的(slider、testimonials等)脚本写在这里。然后将其添加到包含该section的资源中,而不是全局区域,如layout、foot-tags或head-tags。 - JavaScript语言术语通过
LOCALIZE
全局变量以对象的形式传入。您可以通过将语言术语添加到lang
文件夹中的script.php
文件来本地化JavaScript文件。然后,例如,您可以以LOCALIZE.hello_world
的形式访问它们。contact.js
文件中有一个示例。
实时SASS编译器设置
当您在screens
文件夹中进行了更改时,Live Sass Compiler会尝试重新编译系统中的所有SCSS。这包括SCSS备份、第三方插件的样式、Bootstrap插件等,这会花费很长时间。为了避免这种情况,我们应该特别指定除外文件夹
。同时,如果您在minified文件中遇到问题,请使用以下设置;
注意:savePath文件夹目前尚未激活,但正在计划中。该文件夹可用于将CSS输出到SCSS所在目录之外的目录。
{ "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", //"savePath": "~/../css/" }, // You can add more { "format": "compressed", "extensionName": ".css", //"savePath": "/assets/styles/css" }, // More Complex { "format": "compressed", "extensionName": ".min.css", //"savePath": "~/../css/" } ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", "**/addons/**", "**/History/**", "**/vendor/**", "**/front/fonts/**", ], "editor.mouseWheelZoom": true, "editor.fontSize": 14, "window.zoomLevel": 1, "editor.renderWhitespace": "all", /* // Linux'da bash hatası için "terminal.integrated.profiles.linux": { "bash": { "path": "/bin/bash" } }, */ }
SCSS操作
- 所有自定义样式都在
public_html/assets/front/css
文件夹中 - 在
public_html/assets/front/css/screens
文件夹中,开发是从以下文件进行的:_desktop.scss, _global.scss, _tablet.scss, _mobile.scss
。 _global.scss
文件几乎不使用。这里仅包含影响所有屏幕尺寸的字体定义、按钮颜色等操作。- 使用
_desktop.scss
开始设计开发,然后过渡到_tablet.scss
。将所有影响所有尺寸且不发生变化的定义移动到_global.scss
中。例如,蓝色和带有 10px 内边距的主按钮可以在全局中找到,如果您想为滑动部分添加 10px 外边距并使其在所有分辨率下都发生变化,则不应在全局中这样做。 - 对于 RTL 兼容性,left、right、padding:x x x x 等有一些特定的用法。
- Left 和 Right:在 Key 方面使用
#{$left}
,在 Value 方面使用$left
。例如:margin-#{$left}:10px;
或position:absolute;
时的#{$left}:20px;
。在 Value 方面,使用float: $left;
或text-align:$left;
。最初以此方式编写代码,然后不要说“稍后再说”,因为这总是会遗漏,您将在 RTL 语言中花费数小时来寻找错误。将 Left 和 Right 想象成拉丁语言中的用法,它们在阿拉伯语和波斯语等 RTL 语言中会自动反转。 - 例如,使用
padding-${left}: 10px; padding-${right}: 20px;
这样的操作在padding: 0 20px 0 10px;
的写法中也会出现 RTL 问题。要解决这个问题,请将其写为@include padding(0, 20, 0, 10);
。对于单行的margin
,也可以使用这个 mixin。 - 如果第三方软件没有使用
!important
并且需要覆盖它,那么可以使用它。除此之外,绝不要使用!important
!非常重要 - 所有必需的内容都已用示例详细地写入文档中。编写这些文章花费了数小时,请务必阅读。
后端使用
TODO:将解决一般使用和缓存问题等问题的方法详细说明。
后端使用一般信息
- 要整理、添加网站的固定语言术语,请使用
lang
目录中的site.php
文件。 - JavaScript语言术语通过
LOCALIZE
全局变量以对象的形式传入。您可以通过将语言术语添加到lang
文件夹中的script.php
文件来本地化JavaScript文件。然后,例如,您可以以LOCALIZE.hello_world
的形式访问它们。contact.js
文件中有一个示例。