English
My comment is full of useful advice...
And it goes on and on and on..
...Yeah it was a lengthy comment.
资源说明：A comment traverser to help manage conversations on web pages.
h1. Encouraged Commentary This is the source code for an approach to managing comments which was "evangelized and demonstrated on my blog DontTrustThisGuy.com":http://donttrustthisguy.com/2009/01/04/encouraged-commentary/. h1. Usage h2. Include the Script and Dependencies If you're not using "jQuery":http://jquery.com already you will need to add it to your project. You will also need to include the "jQuery ScrollTo plugin":http://plugins.jquery.com/project/ScrollTo as well. Finally, I recommend using the minimized version of the encouraged commentary script which reduces the file size to only 5.8kb. You should include these scripts in the following order, and also embed them in your HTML just before you close the body tag in your template file. This ensures faster loading of your page.h2. Quotable Content Using this script is easy. Simply add the class 'quotable' to any containing element in your markup that should be quotable. As an example, if your blog post is in a div with an id of 'entry' simply add the 'quotable' class to that div. Now users can highlight text to quote your article! h3. Example This:.../body>Becomes:My Blog Article
The content of this article is as follows.
...../body>
h2. Designate Comment Textarea with id="comment" This step is very important! You will need to give the target textarea an ID *'comment'*. This:My Blog Article
The content of this article is as follows.
...3 Comments
.../body>
Becomes:.../body> h2. [NEW FEATURE] Get a lightbox, live preview, and generate HTML on the fly instead of the TextArea To get form enhancements on your site all you need to do is add the class *'encouraged-form'* for your comment form. Once you do this users will no longer be forced to the bottom of your page. Instead, your form will be temporarily transported into a lightbox and then put back if the user cancels out. Additionally, the directive and quote are stored in javascript and the user is given a manner to remove the quote / directive from their comment if they'd like. This is validated / communicated to the user as they will see a live preview of their comment, generated for them as they type! Any of these features can be toggled off and if you don't add the encouraged-form class everything behaves as it once did before. This:.../body> Becomes:.../body> h2. Quotable Comments For quotable comments things are a little different. Here you must *refrain from using the quotable class* and instead follow some basic conventions in your comment markup. First, give the HTML object that contains all of your comments the class 'commentlist' then make sure every individual comment has the class 'comment' applied to it. h3. Setup the Comment List Container In many blogging systems you may have a heading for your comments. This traditionally has the id of comments. Somewhere below that is a list of responses to your article. This can either be a _ol_, _ul_, or _div_. Wordpress, for example, traditionally uses an _ol_ in most cases. To designate your comment container just add the class *'commentlist'* to this element. This:.../body> Becomes:3 Comments
.../body>
- ...
h3. Designate Your Comments You will need to *ensure that every individual comment is contained in an element with a unique ID* and has the class *'comment'*. This:3 Comments
.../body>
- ...
Becomes:.../body>
- ...
- ...
h3. Designate Comment Permalinks Now we need to add a class to each permalink for an individual comment. Simply add the class *'comment-permalink'* to the anchor of the permalink for that individual comment. This:.../body>
- ...
- ...
Becomes:.../body>
- ... ...
h3. Designate Comment Authors Next, you will need to designate the element in your HTML containing the comment's author name. Simply add the class *'comment-author-name'* to this element. This:.../body>
- ... ...
Becomes:...
.../body>Jon Doe says:...h3. Designate Comment Entry Content Last but not least, you will need to wrap the body of your comment's text in an with the class *'entry-content'*. This:...
.../body>...
.../body>My comment is full of useful advice...
And it goes on and on and on..
...Yeah it was a lengthy comment.
...h1. Toggling Functionality h2. Sorted Commentary To *turn this feature on* add the class "sorted-commentary" to the comment list container in your HTML. This:...
.../body>3 Comments
h2. Disable Related Comments: To *turn this feature off* add the class "no-relatives" to the comment list container in your HTML. This:3 Comments
Becomes:3 Comments
h2. Disable Related Replies: To *toggle this feature off* add the class "no-replies" to the comment list container in your HTML. This:3 Comments
Becomes:3 Comments
h2. Disable Comment Quote Button: To *toggle this feature off* add the class *"no-quote-control"* to the comment list container in your HTML. This:3 Comments
Becomes:3 Comments
h2. Disable Comment Reply Button: To *toggle this feature off* add the class *"no-reply-control"* to the comment list container in your HTML. This:3 Comments
Becomes:3 Comments
h2. Disable Comment Lightbox: To *turn this feature off* add the class "no-lightbox" to the comment list container in your HTML. This:3 Comments
Becomes:3 Comments
h2. Disable Comment Preview: To *turn this feature off* add the class "no-preview" to the comment list container in your HTML. This:3 Comments
Becomes:3 Comments
h1. Dependencies This project relies on "jQuery":http://jquery.com and the "jQuery ScrollTo plugin":http://plugins.jquery.com/project/ScrollTo. h1. Next Steps / Ideas *IE6/7/8 Support:* It looks like there is an error with the text highlight functionality in IE. If a user highlights some text in IE7 and responds to a comment the directive is not caught. I believe it has something to do with the target that is being captured from the onMouseUp listener. -*Build Quote HTML on Submit:* Instead of embedding straight HTML, add a user control to the comment form showing the quote and target author. This will allow the user to enter their comment in as normal while having the HTML output created on form submit.- -*Add live preview support:* Allow the user to see a live preview of their comment with response and target author as they type their comment. This will provide the user better feedback as to what has happened now that they have utilized this advanced commenting system.- -*Lightbox Form:* Users are not anticipating the page scroll to the bottom of the page. Instead it may be more applicable to present the comment form in a lightbox.- -*Looser coupling:* The code in my example is very tightly coupled to my markup. It would be better to provide a good convention which would allow others to incorporate this functionality into their site without overhauling their markup.- -*Toggling functionality:* For this proof of concept I wanted to incorporate all of my ideas. Text highlighting, related comments, related replies, and basic quote/reply buttons. It would be better if authors could easily adjust the script to toggle any of that functionality on or off should they only prefer to utilize some of these ideas.- -*Improved demo CSS:* Right now I'm linking to my site's stylesheet in the demo.html file. It would be better to provide a basic custom CSS file with the minimal rules so that folks can easily see what styling is involved to customize the presentation of these utilities.-3 Comments
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
