CSS Almanac 재 작업

CSS-Tricks Almanac은 새로운 모습을 가지고 있습니다!

나는 당신이 이미 CSS- 트릭 의이 거대한 부분에 익숙하다고 생각합니다. Almanac (Almanac). 여기에서는 CSS 선택기 및 속성에 대한 참조 문서를 게시합니다. 우리는 고대부터 또는 2009 년 이후 (원래 작품의 대부분이 완성되었을 때) 이것을 출판했습니다. 웹 페이지의 시대에는 거의 시작이었습니다. 응답 디자인 (BR) 전 1 년 또는 응답 디자인 (AR) 후 14 년이라고 부를 수도 있습니다. 당신은 반응 형 디자인 이후 14 년째에 CSS를 쓰는 것이 이전과 매우 다르다는 것을 말해 줄 필요가 없습니다. 요컨대, Almanac은 속성과 선택기 이상의 CSS 속도를 유지하지 못했습니다. 사실, 우리는 백엔드에서 구성된 방식 때문에 Almanac을 수정하는 것을 꺼려했으며, 만질 때 유령을 보았을 것이라고 확신합니다. 이제 Almanac에 액세스하면 기존 속성 및 선택기 섹션 외에 의사 클래스 선택기, 함수 및 @ 규칙의 전용 섹션을 포함하여 더 넓은 범위의 CSS 정보가 있습니다. 우리는 여전히해야 할 일이 많지만 (도와야합니다!) 건축은 이미 존재하며 필요한 경우 확장 할 여지가 있습니다.

이 직업은 쉽지 않으며 내가 생각했던 것만 큼 무섭습니다. 내가하는 일 중 일부를 당신을 데려가겠습니다.

현재 상태 우리는 첫날부터 WordPress를 자랑스럽게 운영했습니다. 특히 템플릿과 관련하여 많은 이점이 있습니다. 모든 사람이 가장 좋아하는 것은 아니지만, 나는 그것에 매우 만족하고 모든 것에 단호하게 헌신합니다!

WordPress에 익숙하다면 내용은 주로 두 가지 유형으로 나뉘어져 있음을 알고 있습니다. 둘 사이의 차이는 동일한 편집 인터페이스를 사용하기 때문에 가장 구별 할 수없는 최소입니다. 물론 몇 가지 뉘앙스가 있지만 페이지 간의 주요 차이점은 계층화되어 있다는 것입니다. 즉, 부모-자식 페이지 관계를 설정하는 데 가장 적합하여 잘 구조화 된 사이트 맵을 만듭니다. 동시에 기사는 메타 데이터에 더 중점을두고 태그를 추가하거나 카테고리 그룹 또는 손가락 끝에서 얻을 수있는 커스텀 분류 체계로 컨텐츠를 구성 할 수 있습니다.

Almanac은 기사가 아닌 페이지에 구축되었습니다. Almanac은 계층 구조에서 탁월한 반면 Almanac은 알파벳 순서를 따르는 전형적인 사이트 맵 흐름을 가진 고도로 구조화 된 영역입니다. 예를 들어, 와 같은 CSS 속성에 대한 항목에는 다음 경로가 있습니다. Almanac → 속성 → A → 종횡비.

이것은 좋은 것 같네요? 나쁘지는 않지만 템플릿에서 페이지를 쿼리하는 것은 필터링을위한 메타 데이터가 더 많은 기사보다 어렵습니다. 반면에, 페이지는 그렇지 않습니다. (적어도 분명하지 않습니다.) 그들은 보통 계층 적 구조로 인해 구조화 된 물체로 반환됩니다. 그러나 이는 자동으로 아카이브를 생성하는 태그 및 카테고리와 달리 모든 페이지를 수동으로 만들어야한다는 것을 의미합니다. "속성"페이지의 하위 행위 인 문자 "A"에 대한 빈 페이지를 작성하여 Almanac의 하위 페이지 자체 - 문자 A로 시작하는 속성을 삽입 할 논리적 위치를 갖기에는 너무 어리석은 느낌이 듭니다. 속성과 선택기 모두에 대해 수행해야합니다.

실제 문제는 Almanac이 부적절하다는 것입니다. 기능 및 @ 규칙과 같은 다른 CSS 컨텐츠를 게시하려고하지만 Almanac은 원래 두 개의 컨텐츠 세트를 표시하도록 만들어졌습니다. 그래서 우리는 다른 것을 게시하지 않았습니다. 이것이 일반 선택기와 의사 선택기가 같은 버킷에있는 이유이기도합니다.

더 많은 것을 수용하기 위해 공간을 확장하는 것은 내 작업의 범위이며, 나는 그 과정에서 스타일링 할 기회가 있다는 것을 알고 있습니다.

하나의 템플릿은 모두 입니다 그게하는 일입니다. 초기 접근 방식은 단일 템플릿을 사용하여 Almanac 인덱싱 및 선택기 및 속성을 나열하는 알파벳 페이지를 처리하는 것이 었습니다. 이것은 매우 영리합니다. 페이지는 먼저 현재 페이지가 페이지 계층의 상단에있는 almanac 페이지인지 확인합니다. 이 페이지 인 경우 템플릿은 선택기의 결과를 출력하고 같은 페이지의 두 열에서 속성을 입력합니다.

이 쿼리는 매우 인상적입니다.

이것은 실제로 코드 스 니펫의 절반에 불과합니다.

만 표시됩니다. 다시 이상으로 루프됩니다.

거기에서 함수는 알파벳의 문자 당 1 회 26 번이라고 불러야합니다. 세 가지 매개 변수, 즉 문자 (예 : a)와 "a"페이지 (예 : 14146, 13712)의 페이지 ID가 필요하며, 이는 선택기 및 속성의 하위 페이지입니다.

현재 인덱스 페이지에 없다면 어떻게해야합니까? 템플릿은 해당 특정 부분 (예 : 속성)의 서브 페이지에 대한 문자 목록을 출력합니다. 하나의 템플릿으로 충분합니다.

쿼리 서브 페지 다른 부분의 문자 페이지를 표시하기 위해 더 많은 페이지 ID를 얻기 위해 함수를 수정할 수 있습니다. 그러나 솔직히, 나는 단지 그렇게하고 싶지 않습니다. 기능을 2 개 대신 한 페이지 ID 매개 변수로 줄인 다음 템플릿을 분할하기로 선택했습니다. 하나는 기본 색인 용 및 "하위 파트"(있는 경우). 그렇습니다. 그것은 내 WordPress 테마 디렉토리에 더 많은 템플릿이있을 것이지만, 이것은 주로 개인적으로 나에게 적합하며 신경 쓰지 않습니다. 켜져있는 하위 페이지 (속성 색인, 선택기 색인, @ 규칙 색인 등)를 확인하고 이러한 하위 페이지의 내용을 개별적으로 가져올 수 있습니다.

<?php function letterOutput($letter, $selectorID, $propertyID) {
  $selector_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'post_parent' => $selectorID,
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => "ASC"
  ));

  $html = '<div>';
  $html .= '<div><a>' . $letter . '</a></div>';
  $html .= '<div>';

  while ($selector_query->have_posts()) : $selector_query->the_post();

    $html .= '<details><summary>';
    $html .= '<h2><code>';
    $html .= get_the_title();
    $html .= '</code></h2>';
    $html .= '</summary>';
    $html .= get_the_excerpt();
    $html .= '<code>';
    $html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
    $html .= '</code>';
    $html .= '<a href="'%20.%20get_the_permalink()%20.%20'">Continue Reading</a>';
    $html .= '</details>';
  endwhile;

  $html .= "</div>";
  $html .= "</div>";

  return $html;
}

기능의 또 다른 문제는 무엇입니까? 생성 된 모든 태그는

문에 샌드위치됩니다. 단일 템플릿 스키마를 보존하기 위해 부분적으로 쿼리를 구문 분석하고 싶더라도 치명적인 PHP 오류 또는 알림을받지 않고 while() 문을 어디에나 놓는 것과는 다릅니다. 다시 말하지만, 나는 함수를 완전히 수정하는 데 관심이 없습니다. if() 문자 아카이브

이 모든 문자 섹션에 대해 빈 하위 페이지를 게시 한 다음 올바른 부모 페이지에 첨부하는 것은 많은 수동 작업입니다. 내가했기 때문에 알고 있습니다. 물론 더 나은 프로그래밍 방법이 있지만 페이지에서 기사로 컨텐츠를 변환하고 그 관점에서 시작하는 것은 저를 끌어들이지 않았으며 당시 서두르고있었습니다. 우리는 항상“이상적인”방법을 찾을 수있는 것은 아닙니다.

WordPress에 따르면,이 편지 페이지를 "아카이브"라고 부르는 것은 잘못된 이름이지만, 컨텐츠가 페이지가 아닌 기사로 제작 된 경우 다른 섹션의 하위 페이지를 보는 방식입니다. 의사 선택기 섹션이 있으면 A에서 Z까지 개별 페이지가 필요합니다.이 페이지는 각 의사 선택기의 부모 페이지 역할을합니다. 각각 26 개의 글자를 가진 3 개의 새로운 섹션이 있습니다. 즉, 78 개의 새 페이지를 만들었습니다. 기이.

Almanac 페이지의 빵 부스러기를 사용하여 (예 :

속성 의이 페이지)를 사용하여 문자 페이지에 액세스하거나 어떤 섹션에서도 대문자 문자를 클릭하여 (예 : 속성 페이지).

우리는이 페이지를 진지하게 받아들이지 않았습니다. 그것들은 구조를 위해 존재하지만 많은 사람들이 그들을 방문하지는 않습니다. 그들은 본질적으로 자리 소유자입니다. 유용하지만 그렇습니다. 그러나 여전히 자리 표시 자. 우리는이 페이지들에 대해 너무나 부도덕하여 공식적으로 스타일을 정하지 않았습니다. 이것은 무엇을 알려주는 CSS 상속 모델입니다.

이것은 내가 시각적으로 연마 할 기회를 얻은 곳입니다. 나는 몇 달 전에이 직업으로 돌아온 이후로 디자인의 거대하고 거친 것들을 다루고 있습니다. 예를 들어, 대형 제목과 두꺼운 그림자가 보입니다.

이것은 내 자연적인 미학이 아니지만 CSS- 트릭과 잘 어울린다고 생각합니다. 아마도.

aspect-ratio 내비게이션 메인 인덱스 페이지에 표시된 내비게이션에 또 다른 향상이 추가되었습니다. 상단의 문자 탐색을 각 섹션으로 이동하는 탐색으로 교체했으며 이제는 우회하지 않고 WordPress에서 페이지를 직접 편집 할 수 있습니다.

저를 귀찮게하는 유일한 것은 관리자 인터페이스에서 관리 할 수있는 적절한 WordPress 메뉴로 만들지 않고 하드 코딩했다는 것입니다. [할 일 목록에 할만미가 추가됩니다. ]

완전히 표시된 선택기 및 속성 목록에서 Almanac 인덱스를 해제 한 이후에 추가하는 많은 수의 부품에 대한 인덱스로 사용할 수 있습니다.

우리는 어느 시점에서 메인 페이지 컨텐츠를 내비게이션으로 덜 중복시켜야 할 수도 있지만, 이것이 우리가 구축 할 수있는 좋은 시작이라고 생각합니다. 또한 제목 측면에서 웹 사이트의 기본 메뉴에 링크 된 다른 "Top"페이지와 더 일치합니다.

아, 내비게이션에 대해 이야기 할 때, 새 섹션은 개별 Almanac 페이지의 기존 왼쪽 사이드 바에 추가되어 인덱스로 돌아 오지 않고 다른 섹션의 다른 항목으로 점프했습니다.

빠른 참조 내가 언급 할 마지막 강화는 작지만 긍정적 인 영향을 미친다 고 생각합니다. 인덱스의 하위 페이지 (즉, 선택기, 속성, 의사 클래스, 함수, @ 규칙)로 이동하면 전체 페이지로 점프하지 않고 각 항목에 대한 코드 및 고급 정의를 얻을 수 있습니다.

우리는 항상 "빠른 액세스 예"에 중점을 두었으며 이것이 큰 도움이되었다고 생각합니다.

"당신은 [x]를 할 수 있습니다 ..." 예, 여전히 개선 할 기회가 여전히 많습니다. 나의 유일한 목표는 Almanac이 다루는 것이 단순한 선택기와 속성 이상, 아마도 여기저기서 스타일이 될 수 있도록 충분히 바꾸는 것입니다. 나는 또한 많은 일을하고 싶다. 어쩌면 우리는 단계별로 그것을 할 것입니다.

무슨 일이야? 우선, 그 하드 코딩 된 인덱스 탐색. 그러나 더 중요한 것은 메인 페이지를 계속 밀고 싶습니다. 그것은 큰 역할을했고 나는 그것을 거의 닦아 냈습니다. 모든 항목 (모든 섹션에 대한 모든 항목)을 나열하는 방법을 찾는 것이 좋을 것입니다. 이것이 내가 공부할 계획입니다.

예, 우리는 일반적인 용어, 미디어 및 사용자 기본 설정 쿼리, 아마도 사양과 같은 더 많은 CSS 컨텐츠를 다루고 싶습니다. Almanac은 우리 팀을위한 자원이며, 당신을 좋아합니다. 우리는 매일 그것을 참조합니다. 우리는 그것이 유용한 정보로 가득 차 있기를 바랍니다.

<.> 그게 다야.

이제 읽기를 중단하고 가상 산책을 위해 Almanac으로 곧장 가십시오.

위 내용은 CSS Almanac 재 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!