বিষয়বস্তু ক্ষেত্রে ক্লাস যুক্ত করুন (লিঙ্ক)

Question

আমি <a>একটি ক্ষেত্রের ট্যাগে একটি শ্রেণি যুক্ত করতে চাই যাতে একটি লিঙ্ক এবং পাঠ্য থাকে। (এটি লিঙ্কের ধরণের ক্ষেত্র )) ক্ষেত্রের নাম বিষয়বস্তু.ফিল্ড_সি_বাটন_লিঙ্ক।

টেমপ্লেট ফাইলে, আমি নীচের মতো কিছু যুক্ত করতে চাই।

{{ content.field_c_button_link.0.addClass('button blue') }}

আমি কীভাবে সঠিকভাবে একটি ক্লাস যুক্ত করতে পারি?

প্যাট্রিক শেফারের উত্তর অনুসারে, আমি এমন একটি ক্ষেত্রের সেটিংসের দিকে চেয়েছিলাম যেখানে আমি অতিরিক্ত সিএসএস ক্লাস যুক্ত করতে পারি, তবে আমি কোনও খুঁজে পেলাম না। এটি লিঙ্ক ক্ষেত্রে আমি কী সম্পাদনা করতে পারি তার একটি স্ক্রিনশট।

Answer 1

এটি আমি খুঁজে পেয়েছি এমন একটি সমাধান, তবে এটি ব্যবহার করা সত্যিই সহজ নয় ... ডাবল টেম্পলেটগুলির থেকে সরাসরি কিছুটা করার মতোই আমি সত্যিই আরও ভাল সমাধান চাই।

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'button';
  }
}

Comments

এটি এর '#field_name'পরিবর্তে হওয়া উচিত '#name'।

— লেম্যানমান্স

Answer 2

এটি অর্জনের সবচেয়ে সহজ উপায় হ'ল এই দুটি মডিউলটির যে কোনও একটি ব্যবহার করে।

1. লিঙ্ক ক্লাস - লিঙ্ক ক্লাস মডিউল ক্ষেত্রের ধরণের লিঙ্কের জন্য একটি নতুন উইজেট ফর্ম সরবরাহ করে। এই উইজেটটি সম্পাদককে ক্ষেত্রগুলিতে শ্রেণি যুক্ত করার অনুমতি দেয় তাদের লিখিত সামগ্রীতে লিঙ্কযুক্ত।

2. লিংক বৈশিষ্ট্য - লিঙ্ক বৈশিষ্ট্য উইজেট ড্রুপাল কোরে লিঙ্ক ক্ষেত্রের জন্য একটি অতিরিক্ত উইজেট সরবরাহ করে। উইজেট ব্যবহারকারীদের তাদের লিঙ্কে অ্যাট্রিবিউট সেট করতে দেয়।

এছাড়াও মডিউলটি এই উইজেটটি ব্যবহার করতে ডিফল্ট মেনু লিঙ্ক সামগ্রীর লিঙ্ক ক্ষেত্রটিকে পরিবর্তিত করে মেনু লিঙ্কগুলিকেও বৈশিষ্ট্যযুক্ত করতে দেয়

আইডি, শ্রেণি, নাম, লক্ষ্য, রিল, অ্যাক্সেসকি

দু'জনের মধ্যে একবার সক্ষম হয়ে গেলে আমরা নির্দিষ্ট লিঙ্ক ফিল্ডের জন্য "লিঙ্ক" ক্ষেত্রের জন্য "ফর্ম প্রদর্শন পরিচালনা করুন" এর অধীনে উইজেট সেটিংস সেট করতে পারি।

রেফারেন্সের জন্য সংযুক্ত চিত্র দেখুন।

একবার এটি সেট হয়ে গেলে বিষয়বস্তু তৈরির সময় উপস্থিত ক্ষেত্রের একটি জায়গার দ্বারা পৃথক করে প্রতিটি শ্রেণি প্রবেশ করান।

Comments

বিস্তারিত লেখার জন্য অনেক ধন্যবাদ, খুব সহায়ক। উভয় ভাল সমাধান।

— ymdahi

Answer 3

আপনি যদি আপনার লিখিত ক্ষেত্রটি আপনার সামগ্রীর ধরণের (অ্যাডমিন / স্ট্রাকচার / প্রকার / পরিচালনা / আপনার_ কনটেন্টটাইপ / ক্ষেত্রগুলি / ক্ষেত্র / ক্ষেত্র_সি_বাটন_লিঙ্ক) সম্পাদনা করেন তবে একটি ক্ষেত্র অতিরিক্ত সিএসএস-ক্লাস রয়েছে ।

তবে, এখানে প্রবেশ করা ক্লাসগুলি 'ফিল্ড_সি_বুটন_লিঙ্ক' দিয়ে তৈরি সমস্ত লিঙ্কের জন্য প্রযোজ্য। আপনি যদি একটি নির্দিষ্ট অবস্থানে ক্লাস যুক্ত করতে চান তবে আপনি হুক_প্রিপ্রসেস_ফিল্ড] বা থিম_লিংকের দিকে নজর দিতে পারেন।

সম্পাদনা:

ড্রুপাল 8 এ একটি থিম_প্রসেস_ফিল্ডও রয়েছে । সুতরাং আমি মনে করি আপনি এরকম কিছু করতে পারেন:

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['attributes']['class'][] = 'button';
    $variables['attributes']['class'][] = 'blue';   
  } 
}

আমি এটি পরীক্ষা করিনি তাই আমার মনে হয় এই কাজটি করার জন্য আপনার কিছু সামঞ্জস্য করা দরকার।

Comments

আপনার উত্তরের জন্য ধন্যবাদ তবে আমি এরকম ক্ষেত্রটি খুঁজে পাচ্ছি না: :(

— maidi

লিঙ্ক ক্ষেত্র সম্পাদনা করার সময় কোন ক্ষেত্রগুলি উপলব্ধ?

— প্যাট্রিক শেফার

আমি আমার প্রশ্নের সাথে একটি স্ক্রিনশট যুক্ত করেছি

— maidi

আমি দেখছি, আপনি লিঙ্ক মডিউলটির কোন সংস্করণ ব্যবহার করবেন?

— প্যাট্রিক শেফার

আমি কোথায় খুঁজে পাব? আমি ড্রুপাল 8 ব্যবহার করি তাই লিঙ্ক মডিউলটি মূল অংশ ছিল।

— maidi

Answer 4

উপরের টনি ফিসলারের উত্তর যুক্ত করতে, দ্রুপাল ৮.১.২ এ আমার ক্লাস যুক্ত করার জন্য নামের পরিবর্তে # ফিল্ড_নামের জন্য পরীক্ষা করা দরকার । এটি আমার জন্য কাজ করে কি না।

function yourthemename_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#field_name'] == 'field_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'blarg';
  }
}

আপনি যদি <a>ট্যাগটিতে ক্লাস চান তা এটি । প্রদত্ত লিঙ্ক ক্লাস সমাধানটি সহজ, তবে আমি যখন চেষ্টা করেছি তখন এটি কেবলমাত্র এর মোড়কে ক্লাসে প্রয়োগ করা হয়। সুতরাং, আপনি উদাহরণস্বরূপ বুটস্ট্র্যাপ ব্যবহার করলে লিঙ্ক ক্লাস মডিউলটি কাজ করবে না।

Comments

ধন্যবাদ! এটি খুব সহায়ক, তবে অনুমান করে ক্ষেত্রটিতে কেবল একটি আইটেম রয়েছে। যদি ক্ষেত্রটিতে একাধিক আইটেম থাকে তবে তাদের মাধ্যমে লুপ করা দরকার। যেমনif ($element['#field_name'] == 'field_link') { foreach ($variables['items'] as $key => $item){ $variables['items'][$key]['content']['#options']['attributes']['class'][] = 'blarg'; } }

— উইলিয়াম মুর্তাদা

Answer 5

আপনি লিংক ফিল্ডে ক্লাস যুক্ত করার অনুমতি দেয় এমন প্রকল্প লিঙ্ক শ্রেণি ব্যবহার করতে পারেন । আপনার উইজেটটি "ক্লাসের সাথে লিঙ্ক করুন" এ সেট করা উচিত। স্ক্রিনশট দেখুন।

Answer 6

ক্ষেত্রের টেমপ্লেটটি ব্যবহার করে দ্বিধাবিঘ্নে এটি করতে (যেমন field--field-c-button-link.html.twig )

সাধারণত ক্ষেত্রের টেম্পলেটটি আপনার লিঙ্কগুলি ব্যবহার করে লুপ নেবে:

  {% for item in items %}
    {{ item.content }}
  {% endfor %}

তবে আপনি এটির মতো কিছুতে এটি পরিবর্তন করতে পারেন:

  {% for item in items %}
    <a class="btn btn-secondary btn-lg m-1" href="{{ item.content['#url'] }}">{{ item.content['#title']}}</a>
  {% endfor %}

লিঙ্ক শিরোনাম এবং url আলাদাভাবে ডিল করে dealing

Answer 7

আপনার নিজস্ব ফর্ম্যাটর তৈরি করা সহজ যা লিঙ্ক ফর্ম্যাটারটিকে ওভাররাইড করে। যদিও, এখন আমি দেখতে পাচ্ছি যে এটির ( লিঙ্ক ) জন্য একটি মডিউল রয়েছে , আপনি ফর্ম্যাটারে সেটিংস না করে ক্ষেত্রের স্তরে সেট করতে পারেন বলে আপনি এটি ব্যবহার করতে চাইতে পারেন। তবে আমি ভেবেছিলাম এটি কারও পক্ষে উপকারী হতে পারে, যিনি এমন কোনও লিঙ্কের জন্য নিজের ফর্ম্যাটর তৈরি করতে চান যেখানে আপনি কোনও শ্রেণি যুক্ত করতে পারেন।

namespace Drupal\mymodule\Plugin\Field\FieldFormatter;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;
use Drupal\link\LinkItemInterface;
use Drupal\link\Plugin\Field\FieldFormatter\LinkFormatter;

/**
 * Plugin implementation of the 'link' formatter.
 *
 * @FieldFormatter(
 *   id = "link_with_class",
 *   label = @Translation("Link with Custom Class"),
 *   field_types = {
 *     "link"
 *   }
 * )
 */
class LinkClassFormatter extends LinkFormatter {

  /**
   * {@inheritdoc}
   */
  public static function defaultSettings() {
    return parent::defaultSettings() +
    ['class' => ''];

  }

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state) {
    $elements = parent::settingsForm($form, $form_state);

    $elements['class'] = array(
      '#type' => 'textfield',
      '#title' => t('Class on Link'),
      '#default_value' => $this->getSetting('class'),
    );

    return $elements;
  }

  /**
   * {@inheritdoc}
   */
  public function settingsSummary() {

    $summary = parent::settingsSummary();

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $summary[] = t('Class(es) on button = "@classes"', array('@classes' => $settings['class']));
    }

    return $summary;
  }

  /**
   * {@inheritdoc}
   */
  protected function buildUrl(LinkItemInterface $item) {
    $url = parent::buildUrl($item);

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $options = $url->getOptions();
      $options['attributes']['class'] = $settings['class'];
      $url->setOptions($options);
    }

    return $url;
  }

}

Answer 8

আমি এখনও এটি কোনও বাগের জন্য পরীক্ষা করছি, তবে এটি আপনার। থিম ফাইলে রাখলে ক্ষেত্রের নামটি সমস্ত ক্ষেত্রের শ্রেণি হিসাবে যুক্ত হবে। এটি ড্রুপাল 8.2 এর জন্য:

function mytheme_preprocess_field(&$variables, $hook) {
  $variables['attributes']['class'][] = $variables['element']['#field_name'];
}

স্টাইলিংকে আরও সহজ করার জন্য প্রতিটি থিমের কিছু অন্তর্ভুক্ত থাকা উচিত।

Answer 9

অন্যান্য সমস্ত সমাধান ক্ষেত্রের মোড়কে ক্লাস যুক্ত করে। এটি একটি <a>ট্যাগ নিজেই একটি ক্লাস যুক্ত :

/*
 * Implements hook_preprocess__HOOK().
 */
function hook_preprocess_field(&$variables) {
  $classes = [
    'button',
    'blue'
  ];
  $variables['items'][0]['content']['#url']->setOption('attributes', ['class' => $classes]);
}

Answer 10

এখানে সহজ সমাধান -

function THEME_preprocess_file_link(&$variables)
{
  $variables['attributes']->addClass(array('your_custom_class'));
}