Rails slimでaタグに変更するとパーシャルを囲むことができない

Question

以下のインスタンスに紐づいたパーシャルの_diary.html.slimとしていて、コンパイルされるように構成されていますが

下に記載いたしましたインスタンスのコードにaタグで囲って扱えるように変更したいです。
そのためにやったこととして、単純にdivをaに置き換えるようにa.card.mb-5.diary.diary_center[href="#{diary_path(diary)}"]
または、= link_to(diary_path(diary), class: 'card mb-5 diary diary_center diary_link') doなどでslimのaタグ出力に変更してもいずれもaタグが外に出て710x0として空白の要素になってしまいます。

元になるaタグで囲う前のインスタンスのパーシャル_diary.html.slimは以下の通りですが、どのようにしたらaタグ で扱えるようになるでしょうか？？
修正ポイントがありましたらご教授いただけたら幸いです！

.card.mb-5.diary.diary_center
    .card-header.d-flex.justify-content-between.align-items-center
        .diary__profile
            = image_tag 'profile-placeholder.png', size: '40x40', class: 'rounded-circle mr-2'
            = link_to diary.user.username, diary.user
        - if current_user&.own?(diary)
            .diary__user-links
                = link_to diary_path(diary), class: 'mr-3', method: :delete, data: { confirm: '本当に削除しますか？' } do
                    = icon 'far', 'trash-alt', class: 'fa-lg'
                = link_to edit_diary_path(diary) do
                    = icon 'far', 'edit', class: 'fa-lg'
    .card-body
        span.d-flex.justify-content-between
            span.diary__date
                = diary.date_sequence
                |日目
            span.diary__time-ago
                = time_ago_in_words(diary.created_at)
        p.diary__content
            = diary.body
            - if diary.check.present?
                br
                text.diary__check.diary__check-title
                    |〈チェック〉
                text.diary__check
                    = diary.check
    .diary__footer.pb-4.pr-4.d-flex.justify-content-end.align-items-center
        a.diary__comment-icon href="#"
            = icon 'far', 'comment', class: 'fa-lg fa-light'
            span.diary__comment 1件
        - if diary.image.present?
            = link_to diary.image.url, class: 'diary__image', "data-lightbox" => "image-#{diary.id}" do
                = image_tag diary.image.url, height: '40', width: '40'

<a href="diary/89" class="card mb-5 diary diary_center"><div class="card-header d-flex justify-content-between align-items-center"><div class="diary__profile"><img class="rounded-circle mr-2" src="/assets/profile-placeholder-646bf58e3695cd1e89bb55f531dfea783bf86e9eca61400792e15206bab8acaf.png" width="40" height="40"><a href="/users/1">foobar</a></div><div class="diary__user-links"><a class="mr-3" data-confirm="本当に削除しますか？" rel="nofollow" data-method="delete" href="/diaries/89"><i class="far fa-trash-alt fa-lg"></i></a><a href="/diaries/89/edit"><i class="far fa-edit fa-lg"></i></a></div></div><div class="card-body"><span class="d-flex justify-content-between"><span class="diary__date">14日目</span><span class="diary__time-ago">2日</span></span><p class="diary__content">今日は寒かったが畑作業に勤しむことができた。明日も頑張って畑を耕したい<br><text class="diary__check diary__check-title">〈チェック〉</text><text class="diary__check">寒かったのにも関わらず淡々と起床できたのは素晴らしい。</text></p></div><div class="diary__footer pb-4 pr-4 d-flex justify-content-end align-items-center"><a class="diary__comment-icon" href="#"><i class="far fa-comment fa-lg fa-light"></i><span class="diary__comment">1件</span></a></div></a>

Answer 1

はて、、、
link_to自体が aタグをつくるものなので、その中にさらにa タグというのがよく分かりません。
そのlink_to の部分でどのようなhtmlにしたいのか、を記述してください。
日本語の説明ではなく、codeで。
あと、
画像で示している部分とその下のcodeとが対応していないようにみえます。
対応している部分のがわかるようにしてください

Comments

[JuniorSirius]

ご回答ありがとうございます。
コードに対応する画像を差し替えさせていただきました。一番外側の`div`要素をaタグに変えてそこにリンクを付与したいイメージです。aタグの中にaタグは、一旦divを構成してその中にaタグを構成するやり方を[Qiita]( https://qiita.com/fukamiiiiinmin/items/7412b21c6df5de31cab1 )で見たので真似てみようかと。実現したいコードは以下のコードです。
お願いいたします。
```html
<a href="diary/89" class="card mb-5 diary diary_center"><div class="card-header d-flex justify-content-between align-items-center"><div class="diary__profile"><img class="rounded-circle mr-2" src="/assets/profile-placeholder-646bf58e3695cd1e89bb55f531dfea783bf86e9eca61400792e15206bab8acaf.png" width="40" height="40"><a href="/users/1">foobar</a></div><div class="diary__user-links"><a class="mr-3" data-confirm="本当に削除しますか？" rel="nofollow" data-method="delete" href="/diaries/89"><i class="far fa-trash-alt fa-lg"></i></a><a href="/diaries/89/edit"><i class="far fa-edit fa-lg"></i></a></div></div><div class="card-body"><span class="d-flex justify-content-between"><span class="diary__date">14日目</span><span class="diary__time-ago">2日</span></span><p class="diary__content">今日は寒かったが畑作業に勤しむことができた。明日も頑張って畑を耕したい<br><text class="diary__check diary__check-title">〈チェック〉</text><text class="diary__check">寒かったのにも関わらず淡々と起床できたのは素晴らしい。</text></p></div><div class="diary__footer pb-4 pr-4 d-flex justify-content-end align-items-center"><a class="diary__comment-icon" href="#"><i class="far fa-comment fa-lg fa-light"></i><span class="diary__comment">1件</span></a></div></a>
```

[winterboum]

参照には 内側の<a></a> は<object>で囲む とありますね

[JuniorSirius]

どうやら`link_to`や`a`要素が直接的に階層に含まれた状態で、親側でaタグがあると衝突してバグるので、objectを子要素に割り当てたらうまくいきました。
いきなり全て、加工しようとして混乱したので、まずはa要素を全て省いて親の階層に`= link_to(diary_path(diary), class: 'card mb-5 diary diary_center diary__link') do
`として適宜、子要素のa要素にobjectを中間に位置するの親として割り当てたら表示もバグらずうまくいきました。
パニクってやるべきことが、見えなくなるのはいけませんね。
おさわがせしました、ありがとうございました。