Tôi đã bắt đầu bằng cách sử dụng truy vấn grep hồi quy của chủ đề để tìm hiểu cách tính các nền tảng được hỗ trợ bởi cơ sở mã hiện có.
jenkins@efc9c26-01112:~/sites/my_client/web/themes/contrib/drupal8_parallax_theme$ grep linkin -R .
Tệp nhị phân ./includes/fontawesome/fonts/FontAwesome.otf khớp
Tệp nhị phân ./includes/fontawesome/fonts/fontawesome-webfont.ttf khớp
./includes/fontawesome/css/font-awesome.css:.fa-linkedin-square:before {
./includes/fontawesome/css/font-awesome.css:.fa-linkedin:before {
./templates/layout/page.html.twig: {% if Linkedin_url %}
./templates/layout/page.html.twig: <a href="{{linkedin_url }}" class="linkedin" target="_blank"><i class="fa fa-linkedin"></i>< /a>
./drupal8_parallax_theme.theme: $variables['linkedin_url'] = theme_get_setting('linkedin_url');
./drupal8_parallax_theme.theme: $form['drupal8_parallax_theme_settings']['social_icon']['linkedin_url'] = mảng(
./drupal8_parallax_theme.theme: '#default_value' => theme_get_setting('linkedin_url'),
./config/install/drupal8_parallax_theme.settings.yml:linkedin_url: 'http://www.linkedin.com/company/zymphonies'
Điều đó cung cấp manh mối cần thiết cho kỹ thuật đảo ngược những gì tồn tại để tôi có thể sao chép những gì tôi cần thêm vào. Nó cũng tiết lộ những tệp tôi phải chạm vào để hoàn thành công việc.
Tôi chuyển sự chú ý sang chủ đề phụ của mình, nơi các tùy chỉnh của tôi được lưu trữ trong kho lưu trữ git, vì vậy tôi không cần tạo lại những thay đổi này trong mỗi lần xây dựng lại. Tôi vẫn chưa tìm ra cách làm cho các tùy chỉnh của mình lấn át chủ đề cơ sở và đã sử dụng cách sao chép chúng vào chủ đề cơ sở trên mỗi lần nâng cấp, nhưng hy vọng sẽ sớm xử lý tốt hơn một phương tiện duyên dáng hơn để thực hiện công việc này xong.
Công việc này được thực hiện tại đường dẫn này:
~/sites/my_client/web/themes/contrib/drupal8_parallax_theme_my_client
Hỗ trợ cho youtube thật dễ dàng:
Trong file: drupal8_parallax_theme_my_client.theme, tôi đã thêm dòng này: $variables['youtube_url'] = theme_get_setting('youtube_url');
Và sau đó thêm khổ thơ này, phỏng theo chủ đề cơ sở, để sao chép vào tệp tương ứng trong chủ đề cơ sở như một phần của drupal8_parallax_theme_form_system_theme_settings_alter() chức năng:
$form['drupal8_parallax_theme_settings']['social_icon']['youtube_url'] = mảng(
'#type' => 'trường văn bản',
'#title' => t('URL YouTube'),
'#default_value' => theme_get_setting('youtube_url'),
);
Điều này sẽ hiển thị một tùy chọn cấu hình tại:
quản trị viên/giao diện/cài đặt/drupal8_parallax_theme_my_client.
bên trong mẫu/bố cục/page.html.twig tệp, ngay sau khổ thơ facebook.
{% nếu youtube_url %}
<a href="{{ youtube_url }}" class="youtube" target="_blank" ><i class="fa fa-youtube"></i></a>
{% endif %}
Thao tác này sẽ hiển thị biểu tượng được định cấu hình trong khối phương tiện xã hội được hiển thị ở chân trang.
Tiếp theo drush cr, định cấu hình url trong giao diện người dùng tại đường dẫn được đề cập ở trên và một đường dẫn khác drush cr, sẽ hiển thị các thay đổi cho người dùng ẩn danh.
Điều này hoạt động vì biểu tượng của youtube đã được hỗ trợ trong phiên bản mặc định của fontAwesome được đóng gói cùng với chủ đề. Các biểu tượng bổ sung dường như được thêm vào gói fontAwsome thường xuyên. Nhưng việc chờ đợi chu kỳ phát hành của nhóm anh ấy là điều không thể bắt đầu đối với một khách hàng cần chức năng đó ngay bây giờ. Hiện tại, việc nâng cấp gói fa dường như phát sinh phí giấy phép cộng với chi phí phân loại để tự động hóa quá trình nâng cấp vào quy trình xây dựng của tôi.
Vì vậy, tôi đã gọi điện cho Adam Muehlhausen, ở Indiana, người mà tôi đang cộng tác về các yêu cầu giao diện người dùng cho trang web đang được phát triển. Tôi đã hy vọng có một cuộc trò chuyện qua điện thoại với anh ấy để thông báo cho tôi về việc tích hợp những thay đổi này vào chủ đề phụ được kiểm soát theo phiên bản, để mở rộng ./includes/fontawesome/css/font-awesome.css tệp được bao gồm như một phần của chủ đề cơ sở. Thay vào đó, những gì tôi nhận được là một email yêu cầu tôi kiểm tra kết quả công việc của anh ấy.
Chúng tôi đã sử dụng một mô-đun cho phép một người lưu trữ css và js trong cấu hình cơ sở dữ liệu, được tích hợp khi xây dựng trang khi cần. ( nhà soạn nhạc yêu cầu 'drupal/asset_injector:^2.10' ). Không có quyền truy cập vào chương trình phụ trợ, Adam tiếp tục sử dụng quyền truy cập gui hiện có của mình, công cụ firebug/inspect-element trong trình duyệt của anh ấy và khoảng một giờ thử nghiệm để thêm phần này vào .css, được hỗ trợ bởi các biểu tượng anh ấy đã thu thập từ mỗi trang web và tải lên vào một nút đã xuất bản nhưng không liên kết được tạo cho mục đích này.
/* các biểu tượng xã hội không ở dạng font-awesome */
.footer-menu .fa-gettr {
nền: trung tâm url('/sites/default/files/inline-images/gettr.png') không lặp lại;
}
.footer-menu .fa-gettr {
kích thước nền: chứa;
chiều rộng: 12px;
chiều cao: 12px;
căn dọc: giữa;
}
.footer-menu .gettr:hover{
-webkit-filter: đảo ngược (100%) thang độ xám (100%) độ sáng (50%) nâu đỏ (60%) hue-rotate (250deg) bão hòa (700%);
-moz-filter: đảo ngược (100%) thang độ xám (100%) độ sáng (50%) nâu đỏ (60%) hue-rotate (250deg) bão hòa (700%);
bộ lọc: đảo ngược (100%) thang độ xám (100%) độ sáng (50%) nâu đỏ (60%) hue-rotate (250deg) bão hòa (700%);
}
Bằng cách sao chép điều này, chúng tôi có thể hiển thị các biểu tượng được liên kết cho tổng số tám nền tảng truyền thông xã hội, ba nền tảng được hỗ trợ bởi chủ đề mặc định, một nền tảng khác thì không, nhưng dù sao cũng được hỗ trợ bởi dự án fontAwesome và bốn nền tảng khác mới đến mức không được hỗ trợ.
