How do I add additional social media platforms to the social media block in this theme?

I have found the zymphonies.com theme: composer require 'drupal/drupal8_parallax_theme:^2.0 a useful addition to my toolkit.

It comes with a banner slideshow built in, is designed to be mobile-first responsive, and being built on top of the bootstrap framework has proven useful to helping me learn a small bit of how to use bootstrap to easily enhance the stock framework provided by the theme/framework. Many questions are easily resolved by adding bootstrap to my query strings in search engines, leading to half or one hour fixes to address client requests.

One of the features offered out of the box by this theme is a block exposed in the footer region with icons linking a site visitor to the sites' channels on various social media platforms.

And that leads me to this question, and the answer I offer below for its resolution.

How do I add support for additional social media platforms not available out-of-the-box?

ฉันเริ่มต้นด้วยการใช้แบบสอบถาม grep แบบถดถอยของธีมเพื่อเรียนรู้ว่าแพลตฟอร์มที่สนับสนุนโดยฐานรหัสที่มีอยู่นั้นได้รับการพิจารณาอย่างไร

jenkins@efc9c26-01112:~/sites/my_client/web/themes/contrib/drupal8_parallax_theme$ ลิงก์ grep ใน -R 
ไฟล์ไบนารี ./includes/fontawesome/fonts/FontAwesome.otf ตรงกัน 
ไฟล์ไบนารี ./includes/fontawesome/fonts/fontawesome-webfont.ttf ตรงกัน 
./includes/fontawesome/css/font-awesome.css:.fa-linkedin-square:before {
./includes/fontawesome/css/font-awesome.css:.fa-linkedin:ก่อน {
./templates/layout/page.html.twig: {% if LinkedIn_url %}
./templates/layout/page.html.twig: <a href="{{ linkin_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'] = array(
./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'

นั่นให้เบาะแสที่จำเป็นในการทำวิศวกรรมย้อนกลับสิ่งที่มีอยู่ เพื่อให้ฉันสามารถจำลองสิ่งที่ต้องเพิ่มได้ นอกจากนี้ยังเผยให้เห็นว่าฉันต้องแตะไฟล์ใดบ้างเพื่อให้งานสำเร็จลุล่วง

ฉันหันความสนใจไปที่ธีมย่อยของฉันซึ่งการปรับแต่งของฉันถูกเก็บไว้ใน git repo ดังนั้นฉันจึงไม่จำเป็นต้องทำซ้ำการเปลี่ยนแปลงเหล่านี้ในการสร้างใหม่ทุกครั้ง ฉันยังคิดไม่ออกว่าจะปรับแต่งอย่างไรให้ทับธีมพื้นฐาน และใช้วิธีคัดลอกมันลงในธีมพื้นฐานในการอัปเกรดแต่ละครั้ง แต่หวังว่าเร็ว ๆ นี้จะได้รับการจัดการที่ดีขึ้นสำหรับวิธีการทำงานนี้ที่สง่างามยิ่งขึ้น เสร็จแล้ว.

งานนี้ทำที่เส้นทางนี้:

~/sites/my_client/web/themes/contrib/drupal8_parallax_theme_my_client

การสนับสนุน YouTube เป็นเรื่องง่าย:

ในไฟล์: drupal8_parallax_theme_my_client.themeฉันเพิ่มบรรทัดนี้: $variables['youtube_url'] = theme_get_setting('youtube_url');

จากนั้นเพิ่มบทนี้ซึ่งดัดแปลงมาจากธีมหลักเพื่อคัดลอกลงในไฟล์ที่เกี่ยวข้องในธีมพื้นฐานซึ่งเป็นส่วนหนึ่งของ drupal8_parallax_theme_form_system_theme_settings_alter() การทำงาน:

    $form['drupal8_parallax_theme_settings']['social_icon']['youtube_url'] = array(
        '#type' => 'ช่องข้อความ',
        '#title' => t('YouTube URL'),
        '#default_value' => ธีม_get_setting('youtube_url'),
    );

สิ่งนี้ควรเปิดเผยตัวเลือกการกำหนดค่าที่: ผู้ดูแลระบบ/ลักษณะที่ปรากฏ/การตั้งค่า/drupal8_parallax_theme_my_client.

ใน templates/layout/page.html.twig ไฟล์ทันทีหลังจาก facebook stanza

    {% ถ้า youtube_url %}
        <a href="{{ youtube_url }}" class="youtube" target="_blank" ><i class="fa fa-youtube"></i></a>
    {% เอนดิฟ %}

สิ่งนี้ควรเปิดเผยไอคอนที่กำหนดค่าในบล็อกโซเชียลมีเดียที่เปิดเผยในส่วนท้าย

ถัดไป ดรัช crกำหนดค่า URL ในส่วนติดต่อผู้ใช้ตามเส้นทางที่กล่าวถึงข้างต้น และอื่นๆ ดรัช crควรเปิดเผยการเปลี่ยนแปลงต่อผู้ใช้ที่ไม่ระบุตัวตน

ใช้งานได้เนื่องจากไอคอนของ youtube ได้รับการสนับสนุนในเวอร์ชันเริ่มต้นของ fontAwesome ที่มาพร้อมกับธีม เห็นได้ชัดว่ามีการเพิ่มไอคอนเพิ่มเติมในแพ็คเกจ fontAwsome เป็นประจำ แต่การรอรอบการเปิดตัวของทีมไม่ใช่การเริ่มต้นสำหรับลูกค้าที่ต้องการฟังก์ชันดังกล่าวในขณะนี้ การอัปเกรดแพ็คเกจ fa ในขณะนี้ดูเหมือนจะต้องเสียค่าธรรมเนียมใบอนุญาต บวกกับค่าใช้จ่ายในการแยกแยะวิธีทำให้การอัปเกรดเป็นกระบวนการสร้างของฉันโดยอัตโนมัติ

ดังนั้นฉันจึงโทรหา Adam Muehlhausen ในรัฐอินเดียนา ซึ่งฉันกำลังทำงานร่วมกันเกี่ยวกับความต้องการส่วนหน้าสำหรับไซต์ที่อยู่ระหว่างการพัฒนา ฉันหวังว่าจะได้สนทนาทางโทรศัพท์กับเขาเพื่อแจ้งฉันเกี่ยวกับการรวมการเปลี่ยนแปลงเหล่านี้เข้ากับธีมย่อยที่ควบคุมเวอร์ชัน เพื่อขยาย ./includes/fontawesome/css/font-awesome.css รวมไฟล์เป็นส่วนหนึ่งของธีมพื้นฐาน สิ่งที่ได้รับคืออีเมลขอให้ตรวจสอบผลงานของเขา

เราได้ใช้โมดูลที่อนุญาตให้เก็บ css และ js ในการกำหนดค่าฐานข้อมูลแล้ว เพื่อรวมเข้ากับการสร้างเพจตามความจำเป็น ( นักแต่งเพลงต้องการ 'drupal/asset_injector:^2.10' ). หากไม่มีสิทธิ์เข้าถึงแบ็กเอนด์ Adam ก็ใช้การเข้าถึง gui ที่มีอยู่ เครื่องมือ firebug/ ตรวจสอบองค์ประกอบในเบราว์เซอร์ของเขา และทดลองหนึ่งชั่วโมงหรือมากกว่านั้นเพื่อเพิ่มสิ่งนี้ลงใน .css ซึ่งได้รับการสนับสนุนโดยไอคอนที่เขาเก็บเกี่ยวจากแต่ละไซต์และอัปโหลด ลงในโหนดที่เผยแพร่แต่ไม่ได้เชื่อมโยงซึ่งสร้างขึ้นเพื่อจุดประสงค์นี้

/* ไอคอนโซเชียลไม่ได้อยู่ในฟอนต์ที่ยอดเยี่ยม */
.footer-menu .fa-gettr {
  พื้นหลัง: url('/sites/default/files/inline-images/gettr.png') ตรงกลางไม่ซ้ำ;
}

.footer-menu .fa-gettr {
  ขนาดพื้นหลัง: มี;
  ความกว้าง: 12px;
  ความสูง: 12px;
  จัดแนวตั้ง: กลาง;  
}

.footer-menu .gettr:hover{
  -webkit-filter: กลับด้าน (100%) ระดับสีเทา (100%) ความสว่าง (50%) ซีเปีย (60%) สี หมุน (250 องศา) อิ่มตัว (700%)
  -moz-filter: กลับด้าน (100%) ระดับสีเทา (100%) ความสว่าง (50%) ซีเปีย (60%) สีหมุน (250deg) อิ่มตัว (700%)
  ตัวกรอง: กลับด้าน (100%) ระดับสีเทา (100%) ความสว่าง (50%) ซีเปีย (60%) สีหมุน (250 องศา) ความอิ่มตัว (700%)  
}

ด้วยการทำซ้ำสิ่งนี้ เราสามารถแสดงไอคอนที่เชื่อมโยงสำหรับแพลตฟอร์มโซเชียลมีเดียทั้งหมดแปดแพลตฟอร์ม โดยสามแพลตฟอร์มรองรับโดยธีมเริ่มต้น อีกอันไม่รองรับ แต่กระนั้นก็รองรับโดยโครงการ fontAwesome และอีกสี่อันใหม่ซึ่งไม่รองรับเช่นกัน