개인 블로그 레이아웃을 실현하고 메시지 기능에 대해 이야기하고 Artitalk.js 플러그인을 사용하는 데 10 분

문제:

html과 css의 기초를 배운 후, 우리는 종종 도메인 이름을 신청하고 개인 블로그를 작성했습니다. 개인 블로그에는 종종 메시지 기능에 대해 이야기하는 기능이 있습니다. 메시지 남기기의 실현은 백엔드 데이터베이스의 데이터 상호 작용에 의해 지원되어야하지만 백엔드 환경 레이아웃과 코드 작성이 너무 복잡하고 만지고 싶지 않고 페이지를 작성하고 싶습니다.
행복 나눔의 원칙 (＾ ∀ ＾ ●) ﾉ ｼ에
따라 js 플러그인으로 좋은 것을 어린 학생들에게 공유하고 싶고, 댓글 기능을 10 분만에 설정할 수있어 복잡한 백엔드 처리에 대해 걱정할 필요가 없습니다. 문제.

소개:

1. 우리가 사용하고자하는 것은 Artitalk.js 플러그인 입니다. URL Artitalk.js로 이동 합니다.

2. 공식 웹 사이트 주소로 바로 이동할 수도 있습니다 . Artitalk 웹 사이트의 사용 문서에 이미 단계가 자세히 설명되어 있습니다. 다음 내용은 사용 문서의 일부 세부 보충 자료를 기반으로합니다.

3. 빨간색 화살표로 표시된 항목은 작동해야하는 부분입니다. 숫자는 작동 단계입니다.

솔루션의 첫 번째 단계 :

하나 : LeanCloud 공식 웹 사이트로 이동하여 국제 버전에 대한 계정을 등록하십시오. LeanCloud International Edition. , 백그라운드 데이터를 저장하는 데 사용됩니다.

참고 : 등록하려면 확인 이메일이 필요합니다.

2 : 바인딩이 완료된 후 애플리케이션 만들기를 클릭하고 원하는대로 애플리케이션 이름을 작성하면 다른 옵션을 기본값으로 설정할 수 있습니다.


마지막으로 만들기를 클릭 합니다.

3 : 그런 다음 구조화 된 데이터에 클래스를 만들고 이름을 shuoshuo로 지정합니다. 콘텐츠 데이터를 저장하는 데 사용됩니다.

참고 : shuoshuo를 채운 후에는 기본적으로 다른 사항에 대해 걱정할 필요가 없습니다. 만들기를 클릭하기 만하면됩니다.

4 : 새로 생성 된 애플리케이션의 구조화 된 데이터에서 사용자를 찾고 사용자 추가를 클릭합니다.

5 단계 : 계정과 비밀번호를 입력하세요 블로그를 게시 할 때 로그인하는 데 필요한 계정과 비밀번호입니다. 로그인 한 후에 만 ​​게시 할 수 있습니다.

참고 : 원하는대로 계정과 암호를 디자인하십시오.

6 : 구조화 된 데이터로 돌아가서 수업에서 shuoshuo를 클릭합니다. 권한을 찾고, add_fields를 설정하고, 클래스 액세스 권한에서 지정된 사용자에 대한 권한을 생성하고, 방금 입력 한 사용자 이름 (설계 한 계정)을 입력하면 자동으로 일치합니다. 보안을 위해 삭제 및 업데이트도 동일한 권한으로 설정됩니다.


참고 : 3 단계에서 디자인 한 계정을 작성한 다음 저장을 클릭합니다. 역할 열은 입력 할 필요가 없습니다.
* 그런 다음 작업을 반복하고 나머지 3 명을 지정된 사용자로 설정합니다.

7 : 그런 다음 atComment라는 새 클래스를 만들고 권한에 대한 기본 권한을 사용합니다. 댓글 작성 후 바로 만들기를 클릭하세요.

여덟 : 클래스 아래의 _User를 클릭하여 열을 추가하고 열 이름은 img이고 기본값은 토크 게시에 사용할 아바타 URL에 채워져 있습니다.이 항목은 구성되지 않았으며 토크 아바타가 기본 아바타로 표시됩니다. — Artitalk의 로고.

다음 두 단계는 생략 할 수 있습니다.

9 : 대부분의 메뉴 모음에서 설정-> 응용 프로그램 키를 찾고 AppID 및 AppKey를 적어 둡니다.

10 : Shuoshuo 권한을 설정하는 것과 동일하며, _User 4 개 모두 또는 모두를 지정된 사용자로 조정합니다.

솔루션의 두 번째 단계 :

참고 : 메시지가 html 파일에 배치되었다고 하셨다면 다음 단계를 계속 볼 수 있습니다. vue 프로젝트 또는 기타를 배치하는 경우 여기에서 소개하지 않을 공식 문서로 이동할 수 있습니다.

1. html 파일을 만들거나 원본 파일을 사용하여 코드를 추가합니다.

2. 다음 js 코드를 추가합니다.

   <!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
     
     
    appId: '这里写上面叫你记下的appid', // Your leancloud appId
    appKey: '这里写上面叫你记下的appkey' // Your leancloud appKey
})
</script>

참고 : 본문 태그에 코드를 넣을 수도 있습니다. <div id = "artitalk_main"> 이것은 일반 div 상자로 배치하고 너비 및 높이 위치 등을 설정할 수있는 메시지 함수의 컨테이너입니다.

효과:

위의 단계를 완료 한 후 html 파일을 직접 실행하여 효과를 볼 수 있습니다 ~

이것은 몇 가지 기사의 효과입니다.

물론 훨씬 더 아름다운 완성품도 많이 있으며, 참고 자료는 Artitalk 공식 웹 사이트에서 확인하실 수 있습니다.

보충:

Artitalk의 구성 항목을 통해 일부 플러그인 페이지 또는 레이아웃 기능 을 변경할 수도 있습니다. 자세한 내용은 설명서를 참조하십시오.

예 : 입력 상자의 배경 이미지를 bgImg로
수정하고 다음 바로 뒤에 코드를 추가합니다.

new Artitalk({
    appId: 'xxx', // Your leancloud appId
    appKey: 'xxx', // Your leancloud appKey
    bgImg: '这写上图片链接或者你图片的相对路径'
    
})

요약하자면 :

결점과 실수가 있으면 용서 해주세요 ╭ (′ ▽`) ╯ ~